ajax如何处理服务器返回的三种数据类型.docx

1、ajax如何处理服务器返回的三种数据类型其原理很简单，结构上基本不变，只是改变处理返回数据的方式.1.Text/HTML格式这种返回类型处理很简单，直接就当作字符串用就行了.为了方便使用，封装成如下函数:/* * function 利用ajax动态交换数据(Text/HTML格式) * param url 要提交请求的页面 * param jsonData 要提交的数据,利用Json传递 * param getMsg 这个函数可以获取到处理后的数据 */function ajaxText(url,jsonData,getMsg) /创建Ajax对象,ActiveXObject兼容IE5,6 v

2、ar oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(Microsoft.XMLHTTP); /打开请求 oAjax.open(POST,url,true);/方法,URL,异步传输 /发送请求 var data = ; for(var d in jsonData) /拼装数据 data += (d + = +jsonDatad+&); oAjax.setRequestHeader(Content-type,application/x-www-form-urlencoded); oAjax.send(da

3、ta); /接收返回,当服务器有东西返回时触发 oAjax.onreadystatechange = function () if(oAjax.readyState = 4 & oAjax.status = 200) if(getMsg) getMsg(oAjax.responseText); 服务器端返回数据格式如下:例如:/返回的是xml格式/header(Content-Type:text/xml;charset=utf-8);/返回的是text或Json格式header(Content-Type:text/html;charset=utf-8);/禁用缓存,是为了数据一样的前提下还能正

4、常提交，而不是缓存数据header(Cache-Control:no-cache);$username = $_POSTusername; /获取用户名if(empty($username) echo 请输入用户名;else if($username = acme) echo 用户名已被注册;else echo 用户名可用;调用格式如下:url = abc.php;var jsonData=username:acme,passw:acme;ajaxText(url,jsonData,getMsg);function getMsg(msg) /do something2.XML格式返回的是一个X

5、ML DOM对象，解析其中的数据就类似于HTML DOM 编程. 比如通过name获取标签对象(数组形式)，再从该数组中获取需要的标签对象，再从标签对象中获取文本值.函数如下:/* * function 利用ajax动态交换数据(XML格式) * param url 要提交请求的页面 * param jsonData 要提交的数据,利用Json传递 * param tagName 要获取值的标签名 * param getMsg 这个函数可以获取到处理后的数据 */function ajaxXML(url,jsonData,tagName,getMsg) /创建Ajax对象,ActiveXObj

6、ect兼容IE5,6 var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(Microsoft.XMLHTTP); /打开请求 oAjax.open(POST,url,true);/方法,URL,异步传输 /发送请求 var data = ; for(var d in jsonData) /拼装数据 data += (d + = +jsonDatad + &); oAjax.setRequestHeader(Content-type,application/x-www-form-urlencoded);

7、 oAjax.send(data); /接收返回,当服务器有东西返回时触发 oAjax.onreadystatechange = function () if(oAjax.readyState = 4 & oAjax.status = 200) var oXml = oAjax.responseXML; /返回的是一个XML DOM对象 var oTag = oXml.getElementsByTagName(tagName); var tagValue = oTag0.childNodes0.nodeValue; if(getMsg)getMsg(tagValue); 服务器端返回数据格式如

8、下:例如:/返回的是xml格式header(Content-Type:text/xml;charset=utf-8);/返回的是text或Json格式/header(Content-Type:text/html;charset=utf-8);/禁用缓存,是为了数据一样的前提下还能正常提交，而不是缓存数据header(Cache-Control:no-cache);$username = $_POSTusername; /获取用户名if(empty($username) echo 请输入用户名; /这些标签可以自定义else if($username = acme) echo 用户名已被注册;e

9、lse echo 用户名可用;调用格式如下:var url = abc.php;var jsonData = username:acme;ajaxXML(url,jsonData,mes,getMsg);function getMsg(msg) /do something 3.返回json函数如下：/* * function 利用ajax动态交换数据(Text/HTML格式)，但是返回的是Json类型的文本数据 * param url 要提交请求的页面 * param jsonData 要提交的数据,利用Json传递 * param getMsg 这个函数可以获取到处理后的数据 */funct

10、ion ajaxJson(url,jsonData,getMsg) /创建Ajax对象,ActiveXObject兼容IE5,6 var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(Microsoft.XMLHTTP); /打开请求 oAjax.open(POST,url,true);/方法,URL,异步传输 /发送请求 var data = ; for(var d in jsonData) /拼装数据 data += (d + = +jsonDatad + &); oAjax.setRequestH

11、eader(Content-type,application/x-www-form-urlencoded); oAjax.send(data); /接收返回,当服务器有东西返回时触发 oAjax.onreadystatechange = function () if(oAjax.readyState = 4 & oAjax.status = 200) var json = eval(+oAjax.responseText+);/把传回来的字符串解析成json对象 if(getMsg)getMsg(json); 服务器端返回数据格式如下:例如:/返回的是xml格式/header(Content-

12、Type:text/xml;charset=utf-8);/返回的是text或Json格式header(Content-Type:text/html;charset=utf-8);/禁用缓存,是为了数据一样的前提下还能正常提交，而不是缓存数据header(Cache-Control:no-cache);$username = $_POSTusername; /获取用户名if(empty($username) echo mes:请输入用户名;else if($username = acme) echo mes:用户名已被注册;else echo mes:用户名可用;调用格式如下:url = ab

13、c.php;var jsonData=username:acme,passw:acme;ajaxText(url,jsonData,getMsg);function getMsg(msg) /do something为了方便使用，可以把三个函数合并.合并后的函数如下:/* * function 利用ajax动态交换数据 * param url 要提交请求的页面 * param jsonData 要提交的数据,利用Json传递 * param getMsg 这个函数可以获取到处理后的数据 * param type 接受的数据类型,text/xml/json * param tagName typ

14、e = xml 的时候这个参数设置为要获取的文本的标签名 * return 无 */function ajax(url,jsonData,getMsg,type,tagName) /创建Ajax对象,ActiveXObject兼容IE5,6 var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(Microsoft.XMLHTTP); /打开请求 oAjax.open(POST,url,true);/方法,URL,异步传输 /发送请求 var data = ; for(var d in jsonData)

15、 /拼装数据 data += (d + = +jsonDatad+&); oAjax.setRequestHeader(Content-type,application/x-www-form-urlencoded); oAjax.send(data); /接收返回,当服务器有东西返回时触发 oAjax.onreadystatechange = function () if(oAjax.readyState = 4 & oAjax.status = 200) if(type = text) if(getMsg) getMsg(oAjax.responseText); else if(type = json) var json = eval(+oAjax.responseText+);/把传回来的字符串解析成json对象 if(getMsg)getMsg(json); else if(type = xml) var oXml = oAjax.responseXML; /返回的是一个XML DOM对象 var oTag = oXml.getElementsByTagName(tagName); var tagValue = oTag0.childNodes0.nodeValue; if(getMsg)getMsg(tagValue);