ajax如何处理服务器返回的三种数据类型
来源:互联网 发布:淘宝卖死人穿过的衣服 编辑:程序博客网 时间:2024/05/16 06:14
其原理很简单,结构上基本不变,只是改变处理返回数据的方式.
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); } } }}
0 0
- ajax如何处理服务器返回的三种数据类型
- ajax如何处理服务器返回的3种数据格式
- AJAX返回的三种数据格式
- J2EE AJAX(六) 如何处理复杂的返回值类型
- Ajax处理XML、HTML、JSON三种数据格式的方法
- typeof能返回的六种数据类型
- ajax 返回数据,alert后显示object类型,如何处理
- J2EE下使用AJAX(六) 后记以及如何处理复杂的返回值类型
- AJAX三种数据格式的读取实例
- [专题] Ajax三种数据格式的读取实例
- QT中三种数据类型之间的转换:
- QT中三种数据类型之间的转换:
- 比较三种数据类型的类模板
- 数据传输的三种数据类型(标量、序列、映射)
- CvArr CvMat IplImage 三种数据类型
- AJAX对服务器返回XML的处理方法
- 如何判断服务器返回的图片类型为GIF
- AJAX建立和服务器连接,接收服务器技术处理服务器返回的数据
- 作业上传+学生互评打分系统
- js 模块编程 module.exports require
- BroadcastReceiver
- Dubbo开发调试方法
- css伪类选择器及其兼容性
- ajax如何处理服务器返回的三种数据类型
- poj3278
- 小谈网易云音乐----API
- linux中bin和sbin目录的主要区别
- 服务器推送之WebSocket 入门学习路程(三)
- 【爬虫-反爬虫】系列一:反爬虫之session(4)
- SDKD 2016 Summer Single Contest #03.A
- ScrollView中EditText导致自动滚动问题
- Python常用的第三方模块——学习笔记