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

前端  /  管理员 发布于 5年前   342

其原理很简单，结构上基本不变，只是改变处理返回数据的方式.

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 '<user><mes>请输入用户名</mes></user>'; //这些标签可以自定义else if($username == 'acme')  echo '<user><mes>用户名已被注册</mes></user>';else  echo '<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,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);      }    }  }}

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