ajax处理服务器返回的三种数据类型方法

其原理很简单，结构上基本不变，只是改变处理返回数据的方式.
1.Text/HTML格式
这种返回类型处理很简单，直接就当作字符串用就行了.为了方便使用，封装成如下函数:

/** * @function 利用ajax动态交换数据（Text/HTML格式） * @param url要提交请求的页面 * @param jsonData 要提交的数据,利用Json传递 * @param getMsg 这个函数可以获取到处理后的数据 */function ajaxText（url,jsonData,getMsg）{//创建Ajax对象,ActiveXObject兼容IE5,6var oAjax = window.XMLHttpRequest?new XMLHttpRequest（）:new ActiveXObject（"Microsoft.XMLHTTP"）;//打开请求oAjax.open（"POST",url,true）;//方法,URL,异步传输//发送请求var data = "";for（var d in jsonData）//拼装数据data += （d + "=" +jsonData[d]+"&"）;oAjax.setRequestHeader（"Content-type","application/x-www-form-urlencoded"）;oAjax.send（data）;//接收返回,当服务器有东西返回时触发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"）;//禁用缓存,是为了数据一样的前提下还能正常提交，而不是缓存数据header（"Cache-Control:no-cache"）;$username = $_POST["username"]; //获取用户名if（empty（$username））echo "请输入用户名";else if（$username == "acme"）echo "用户名已被注册";elseecho "用户名可用";

调用格式如下:

url = "abc.php";var jsonData={username:"acme",passw:"acme"};ajaxText（url,jsonData,getMsg）;function getMsg（msg）{ //do something}

2.XML格式

返回的是一个XML DOM对象，解析其中的数据就类似于HTML DOM 编程. 比如通过name获取标签对象（数组形式），再从该数组中获取需要的标签对象，再从标签对象中获取文本值.
函数如下:

/** * @function 利用ajax动态交换数据（XML格式） * @param url要提交请求的页面 * @param jsonData 要提交的数据,利用Json传递 * @param tagName 要获取值的标签名 * @param getMsg 这个函数可以获取到处理后的数据 */function ajaxXML（url,jsonData,tagName,getMsg）{//创建Ajax对象,ActiveXObject兼容IE5,6var oAjax = window.XMLHttpRequest?new XMLHttpRequest（）:new ActiveXObject（"Microsoft.XMLHTTP"）;//打开请求oAjax.open（"POST",url,true）;//方法,URL,异步传输//发送请求var data = "";for（var d in jsonData）//拼装数据data += （d + "=" +jsonData[d] + "&"）;oAjax.setRequestHeader（"Content-type","application/x-www-form-urlencoded"）;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 = oTag[0].childNodes[0].nodeValue;if（getMsg）getMsg（tagValue）;}}}

服务器端返回数据格式如下:
例如:

//返回的是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 = $_POST["username"]; //获取用户名if（empty（$username））echo "<user><mes>请输入用户名</mes></user>"; //这些标签可以自定义else if（$username == "acme"）echo "<user><mes>用户名已被注册</mes></user>";elseecho "<user><mes>用户名可用</mes></user>";

调用格式如下:

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 这个函数可以获取到处理后的数据 */function ajaxJson（url,jsonData,getMsg）{//创建Ajax对象,ActiveXObject兼容IE5,6var oAjax = window.XMLHttpRequest?new XMLHttpRequest（）:new ActiveXObject（"Microsoft.XMLHTTP"）;//打开请求oAjax.open（"POST",url,true）;//方法,URL,异步传输//发送请求var data = "";for（var d in jsonData）//拼装数据data += （d + "=" +jsonData[d] + "&"）;oAjax.setRequestHeader（"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-Type:text/xml;charset=utf-8"）;//返回的是text或Json格式header（"Content-Type:text/html;charset=utf-8"）;//禁用缓存,是为了数据一样的前提下还能正常提交，而不是缓存数据header（"Cache-Control:no-cache"）;$username = $_POST["username"]; //获取用户名if（empty（$username））echo "{"mes":"请输入用户名"}";else if（$username == "acme"）echo "{"mes":"用户名已被注册"}";elseecho "{"mes":"用户名可用"}";

调用格式如下:

url = "abc.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 type = xml 的时候这个参数设置为要获取的文本的标签名 * @return 无 */function ajax（url,jsonData,getMsg,type,tagName）{//创建Ajax对象,ActiveXObject兼容IE5,6var oAjax = window.XMLHttpRequest?new XMLHttpRequest（）:new ActiveXObject（"Microsoft.XMLHTTP"）;//打开请求oAjax.open（"POST",url,true）;//方法,URL,异步传输//发送请求var data = "";for（var d in jsonData）//拼装数据data += （d + "=" +jsonData[d]+"&"）;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 = oTag[0].childNodes[0].nodeValue;if（getMsg）getMsg（tagValue）;}}}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。