Ajax学习D2 –Ajax响应数据格式及ajax的封装

4.Ajax的响应数据格式

普通文本:后台在接收到ajax请求后，处理后直接响应普通字符串给ajax
获取响应内容时用
var result=ajax.responseText;

json数据（重点, 现在绝大部分用json）：

其实就是讲述数据按照json的格式拼接好的字符串，方便使用eval方法
将接受的字符串数据直接转换为js的对象。

后台在接收到ajax请求后，处理后响应json格式的字符串ajax ajax处理代码中使用eval()方法将json数据转换为js对的对象， 将对象中的数据通过js的dom操作显示到页面中。 注意： json格式：

var 对象名={ 键名:值,
			 键名:值,
			 ........ } 

同样的 ：获取响应内容时用

						var result=ajax.responseText;
						 //利用eval函数在客户端(jsp端)将返回的文本转化成js对象
						 //相对应去客户端【Servlet端的话 可以用gson(json一种格式)：
						 								response.getWriter().write(new Gson().toJson(u));】
						 //在ajax.responseText下面加上eval这句
						eval("var obj="+result);//这里的obj可以换成任何都行 
												//只要方便下面（处理响应内容的时候）取用就好
												

xml数据：后台在接收到ajax请求后，处理后响应xml格式的字符串给 ajax。
前台使用ajax.responseXML进行数据接收，返回的是xml文档对象(document对象)。因此使用document对象将数据从 xml 中取出并显示到页面中即可
同时注意： 后台服务器端（Servlet端）的响应数据格式必须设置成xml格式：resp.setContentType(“text/xml;charset=utf-8”); //通过ajax写xml数据最好使用utf-8

参考代码：ajaxData.jsp–> UserServlet

5.Ajax封装

AjaxUtil.js:

/*
 * 	method :请求方式，值为get或者post
	url:请求地址
	data:没有值的话需要传入null
		 有值的话得传入字符串，格式为 例"name='zhangsan'&pwd=123"
	deal200:
		接收一个有一个形参的js函数对象，形参接收的实参是ajax引擎对象。用于处理网页正常情况
	deal404:同上，但是用于处理网页资源找不到的情况
	deal500:同上，但是用于服务器繁忙的情况
 */
	function myAjax(method,url,data,deal200,deal404,deal500,async){		
		var ajax=getAjax();
			//复写onreadystatechange函数//（死代码）
			
			ajax.onreadystatechange=function(){
				//var ajax=getAjax();//当时学习的时候出错 调试半天 导致ajaxData.jsp里的GetData2()的alert(rs)一直出不来
						//是因为上面 已经创建过了 在创建 下面使用ajax 系统不知道是哪个ajax
				//判断Ajax状态吗
				if(ajax.readyState==4){
					//判断响应状态吗
					if(ajax.status==200){
						if(deal200){
							deal200(ajax);
						}
					}else if(ajax.status==404){
						if(deal404){
							deal404(ajax);
						}	
					}else if(ajax.status==500){
						if(deal500){
							deal500(ajax);
						}
					}
				}
			}
				
		//发送请求
		if("get"==method){
			ajax.open("get",url+(data==null?"":"?"+data),//该方法的第二个参数是url-mapping（即url地址的别名）
					async);//true代表异步 （默认为true）
			ajax.send(null);
		}else if("post"==method){
		//以上为get传参 若为Post方式传参
			ajax.open("post",url,async);
			ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			ajax.send(data);  //send里的是传参来的data
		}

		//alert("哈哈");//测试异步
	}
	
	/*----------------------------------------------------------------------------------*/
	function getAjax(){
		//创建ajax引擎对象		//（死代码）
		var ajax;
		if(window.XMLHttpRequest){//火狐
			ajax=new XMLHttpRequest();
		}else if(window.ActiveXObject){//ie
			ajax=new ActiveXObject("Msxml2.XMLHTTP");
		}
		return ajax;
	}
	
 
	

测试该知识点的代码在ajaxData.jsp的getData2()这个函数里：

注意（自己学习的时候犯的错误 找了半天bug lol!）：用这个封装的时候 比如在getData2()这个函数 里用的时候，注意名字要和你申明的js文件对齐，例如我的ajaxUtil.js这个文件（然后js里可以直接写函数名，例如我这里的Myajax()函数，来调用函数，）
所以到这个时候，可以看到 第四个及后面的参数（类似deal200,deal404,deal500）
可以直接写在函数头（这是jsp的特点 ，而且优点在于 处理网页不同状态的时候 有着动态的处理方法，，也即可以动态的获取响应数据 和 处理响应数据 ！！！）

function getData2(){
 		var name=document.getElementById("uname").value;
 		var data="name="+name;
 		myAjax("get","user",data,function(a){
	 		//获取响应数据
				var rs=a.responseText;
	 
	//处理响应数据
			alert(rs);
 		});
 	}
 	

注意 （自己学习的时候犯的错误 找了半天bug lol!）：若要使用封装，应将要封装的内容封到 js文件里(不是jsp文件！！) 并且使用的时候 要在jsp文件里引入 一个script** 标签 （即这个js文件）**

 <script type= "text/javascript" src="js/AjaxUtil.js"></script> //src后面是js文件的url
	

参考代码: AjaxFz.jsp(知识点在ajaxData.jsp里的getData2()这个函数里)–>UserServlet 和AjaxUtil.js 和ajaxData.jsp‘

plus:jquery里已经把ajax封装好了 到时候用的时候查文档就ok

最后的最后 注意：ajax是前端的技术，由浏览器进行解析执行。