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

    其原理很简单，结构上基本不变，只是改变处理返回数据的方式。 1。Text/HTML格式 这种返回类型处理很简单，直接就当作字符串用就行了。为了方便使用，封装成如下函数: /** * @function 利用ajax动态交换数据(Text/HTML格式) * @param url 要提交请求的页面 * @param jsonData 要提交的数据,利用Json传递 * @param getMsg 这个函数可以获取到处理后的数据 */ function ajaxText(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 '=' 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 '用户名已被注册'; else echo '用户名可用'; 调用格式如下: 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,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 '=' 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 '请输入用户名'; //这些标签可以自定义 else if($username == 'acme') echo '用户名已被注册'; else 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 这个函数可以获取到处理后的数据 */ function 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 '=' 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":"用户名已被注册"}'; else echo '{"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,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 '=' 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); } } } } 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。