ajax如何处理服务器返回的三种数据类型.docx
《ajax如何处理服务器返回的三种数据类型.docx》由会员分享，可在线阅读，更多相关《ajax如何处理服务器返回的三种数据类型.docx（9页珍藏版）》请在冰点文库上搜索。
ajax如何处理服务器返回的三种数据类型
其原理很简单，结构上基本不变，只是改变处理返回数据的方式.
1.Text/HTML格式
这种返回类型处理很简单，直接就当作字符串用就行了.为了方便使用，封装成如下函数:
/**
*@function利用ajax动态交换数据（Text/HTML格式）
*@paramurl要提交请求的页面
*@paramjsonData要提交的数据,利用Json传递
*@paramgetMsg这个函数可以获取到处理后的数据
*/
functionajaxText（url,jsonData,getMsg）
{
//创建Ajax对象,ActiveXObject兼容IE5,6
varoAjax=window.XMLHttpRequest?
newXMLHttpRequest（）:
newActiveXObject（"Microsoft.XMLHTTP"）;
//打开请求
oAjax.open（'POST',url,true）;//方法,URL,异步传输
//发送请求
vardata='';
for（vardinjsonData）//拼装数据
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'请输入用户名';
elseif（$username=='acme'）
echo'用户名已被注册';
else
echo'用户名可用';
调用格式如下:
url='abc.php';
varjsonData={username:
'acme',passw:
'acme'};
ajaxText（url,jsonData,getMsg）;
functiongetMsg（msg）
{
//dosomething
}
2.XML格式
返回的是一个XMLDOM对象，解析其中的数据就类似于HTMLDOM编程.比如通过name获取标签对象（数组形式），再从该数组中获取需要的标签对象，再从标签对象中获取文本值.
函数如下:
/**
*@function利用ajax动态交换数据（XML格式）
*@paramurl要提交请求的页面
*@paramjsonData要提交的数据,利用Json传递
*@paramtagName要获取值的标签名
*@paramgetMsg这个函数可以获取到处理后的数据
*/
functionajaxXML（url,jsonData,tagName,getMsg）
{
//创建Ajax对象,ActiveXObject兼容IE5,6
varoAjax=window.XMLHttpRequest?
newXMLHttpRequest（）:
newActiveXObject（"Microsoft.XMLHTTP"）;
//打开请求
oAjax.open（'POST',url,true）;//方法,URL,异步传输
//发送请求
vardata='';
for（vardinjsonData）//拼装数据
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）
{
varoXml=oAjax.responseXML;//返回的是一个XMLDOM对象
varoTag=oXml.getElementsByTagName（tagName）;
vartagValue=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'请输入用户名';//这些标签可以自定义
elseif（$username=='acme'）
echo'用户名已被注册';
else
echo'用户名可用';
调用格式如下:
varurl='abc.php';
varjsonData={username:
'acme'};
ajaxXML（url,jsonData,'mes',getMsg）;
functiongetMsg（msg）
{
//dosomething
}
3.返回json
函数如下：
/**
*@function利用ajax动态交换数据（Text/HTML格式），但是返回的是Json类型的文本数据
*@paramurl要提交请求的页面
*@paramjsonData要提交的数据,利用Json传递
*@paramgetMsg这个函数可以获取到处理后的数据
*/
functionajaxJson（url,jsonData,getMsg）
{
//创建Ajax对象,ActiveXObject兼容IE5,6
varoAjax=window.XMLHttpRequest?
newXMLHttpRequest（）:
newActiveXObject（"Microsoft.XMLHTTP"）;
//打开请求
oAjax.open（'POST',url,true）;//方法,URL,异步传输
//发送请求
vardata='';
for（vardinjsonData）//拼装数据
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）
{
varjson=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":
"请输入用户名"}';
elseif（$username=='acme'）
echo'{"mes":
"用户名已被注册"}';
else
echo'{"mes":
"用户名可用"}';
调用格式如下:
url='abc.php';
varjsonData={username:
'acme',passw:
'acme'};
ajaxText（url,jsonData,getMsg）;
functiongetMsg（msg）
{
//dosomething
}
为了方便使用，可以把三个函数合并.合并后的函数如下:
/**
*@function利用ajax动态交换数据
*@paramurl要提交请求的页面
*@paramjsonData要提交的数据,利用Json传递
*@paramgetMsg这个函数可以获取到处理后的数据
*@paramtype接受的数据类型,text/xml/json
*@paramtagNametype=xml的时候这个参数设置为要获取的文本的标签名
*@return无
*/
functionajax（url,jsonData,getMsg,type,tagName）
{
//创建Ajax对象,ActiveXObject兼容IE5,6
varoAjax=window.XMLHttpRequest?
newXMLHttpRequest（）:
newActiveXObject（"Microsoft.XMLHTTP"）;
//打开请求
oAjax.open（'POST',url,true）;//方法,URL,异步传输
//发送请求
vardata='';
for（vardinjsonData）//拼装数据
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）;
}
elseif（type=='json'）
{
varjson=eval（'（'+oAjax.responseText+'）'）;//把传回来的字符串解析成json对象
if（getMsg）getMsg（json）;
}
elseif（type=='xml'）
{
varoXml=oAjax.responseXML;//返回的是一个XMLDOM对象
varoTag=oXml.getElementsByTagName（tagName）;
vartagValue=oTag[0].childNodes[0].nodeValue;
if（getMsg）getMsg（tagValue）;
}
}
}
}
升级会员 