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'<user><mes>请输入用户名</mes></user>';//这些标签可以自定义 elseif($username=='acme') echo'<user><mes>用户名已被注册</mes></user>'; else echo'<user><mes>用户名可用</mes></user>';
调用格式如下:
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); } } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。