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

        }
    }
}