lazzyRabbit hello

1、Controller部分

在SpringMVC中可以使用@ResponseBody将对象转换为转化为json格式数据

    @RequestMapping("/getSomething2")
    @ResponseBody()
    public ChartData getSomething2(HttpServletRequest request,String name,Integer value){
        ChartData cd = new ChartData(name,value);
        return cd;
    }
    @RequestMapping("/index")
    public String index(HttpServletRequest request){
        String json = request.getSession().getServletContext().getAttribute("chartdata").toString();
        request.setAttribute("data", json);
        return "index";
    }

2、页面部分

<div class="maindiv" >
	<span id="text1"></span><br>
	<span id="text2"></span>
	<div id="sundiv" ></div>
	</div>
	<input type="button" id="btn1" value="点我" class="btn"></input>
	<input type="button" id="btn2" value="点我" class="btn"></input>
	<input type="button" id="btn3" value="点我" class="btn"></input>
	<input type="button" id="btn5" value="点我" class="btn"></input>
	<input type="button" id="btn4" value="点我" class="btn"></input><br>
	<div id="loaddiv"></div>
</body>

<script type="text/javascript">
$(document).ready(function() {
	var options = {
		success : showResponse, // post-submit callback 
		dataType : 'json',
		url:'../ajax/getSomething2',
		data:{name:"Suarez ",value:"199"}
	};
	//jQuery.ajax()
	$('#btn1').click(function(){
		$.ajax(options);
	});
	//jQuery.get()
	$('#btn2').click(function(){
		$.get('../ajax/getSomething2',{name:"Messi",value:"2000"},function(data){
			$('#sundiv').empty();
			$('#text1').html('$.get:'+data.name+' and '+data.value);
		});
	});
	//jQuery.post()
	$('#btn3').click(function(){
		$.post('../ajax/getSomething2',{name:"Neymar",value:"3000"},function(data){
			$('#sundiv').empty();
			$('#text1').html('$.post:'+data.name+' and '+data.value);
		});
	});
	//jQuery.load()
	$('#btn4').click(function(){
		$('#sundiv').load('../ajax/index',function(){
			$('#text1').html('$.load:mlxp');
		});
	});
	//js原生AJAX
	var oBtn = document.getElementById("btn5");
    oBtn.onclick = function(){
    	{
            //1.创建ajax对象
            //只兼容非ie6的浏览器,在ie6浏览器上运行会提示没有被定义
            //var oAjax = new XMLHttpRequest();//这才是ajax实际的请求
            //alert(oAjax);
            
            //ie6浏览器下按照下面方法写,但是在别的浏览器中不能用,会报错。
            //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
            //alert(oAjax);
            
            //鉴于上面出现的问题,可以采取下面的方法解决,用if判断是否为IE6浏览器
            if(window.XMLHttpRequest)//如果有XMLHttpRequest,那就是非IE6浏览器。()里面加window的原因下面会有描述。
            {
                var oAjax = new XMLHttpRequest();//创建ajax对象
            }
            else//如果没有XMLHttpRequest,那就是IE6浏览器
            {
                var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
            }
            
            //2.连接服务器
            //open(方法、文件名、异步传输)
            //方法:
                //传输方式是get方式还是post方式。
            //文件名
                //告诉服务器要读哪个文件
            //异步传输
                //异步:多件事一件一件的做
                //同步:多件事情一起进行
                //但是js里面的同步和异步和现实的同步异步相反。
                    //同步:多件事一件一件的做
                    //异步:多件事情一起进行
            //ajax天生是用来做异步的
            
            oAjax.open("GET","../ajax/getSomething",true);//加上t='+new Date().getTime()"的目的是为了消除缓存,每次的t的值不一样。
            
            //3.发送请求
            oAjax.send();
            
            //4.接收返回
            //客户端和服务器端有交互的时候会调用onreadystatechange
            oAjax.onreadystatechange=function()
            {
                //oAjax.readyState  //浏览器和服务器,进行到哪一步了。
                    //0->(未初始化):还没有调用 open() 方法。
                    //1->(载入):已调用 send() 方法,正在发送请求。
                    //2->载入完成):send() 方法完成,已收到全部响应内容。
                    //3->(解析):正在解析响应内容。
                    //4->(完成):响应内容解析完成,可以在客户端调用。
                if(oAjax.readyState==4)
                {
                    if(oAjax.status==200)//判断是否成功,如果是200,就代表成功
                    {
                        $('#sundiv').empty();
            			$('#text1').html('$.post:'+oAjax.responseText);
                    }
                    else
                    {
                        alert("失败");
                    }
                }
            };
        }
    }
});
function showResponse(data){
	$('#sundiv').empty();
	$('#text1').html('$.ajax:'+data.name+' and '+data.value);
}
	$("#btn1").ajaxSuccess(function(evt, request, settings){
		$('#text2').html("AJAX 请求已成功完成");
	});
// 	$("#btn1").ajaxStart(function(){
// 		$('#text2').html("AJAX 请求已开始");
// 	});
// 	$("#btn1").ajaxComplete(function(){
// 		$('#text2').html("AJAX 请求已完成");
// 	});
</script>

#point

1@ResponseBody:该注解用于将Controller方法返回的对象,通过适当的HttpMessageConverter转换为指定格式后(如:json格式),写入到Response对象的body数据区。

2在SpringMVC的配置文件中配置,它可以向Spring中注册用来处理请求、映射、异常的Bean实例。

3需要导入的jar包:

jackson-all-1.7.6.jar

jackson-core-asl-1.9.13.jar

jackson-mapper-asl-1.9.13.jar

4load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中,在加载页面时可以选择只加载页面的某个部分。

5)jQuery部分参考:http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

Demo:http://download.csdn.net/download/lazyrabbitlll/10131155