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 '<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);
      }

    }
  }
}

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