本文说明了Ajax返回值的类型和用法。分享给大家参考,如下:
Ajax的返回值类型主要包括XML类型和文本类型,文本类型可以分为HTML、json类型等。
1.返回值的XML类型
只有当服务器响应头中的Content-type内容为text/xml时,才能使用XMLHttpRequest对象的responseXML属性。
2.返回值的文本类型
文本类型主要分为Html类型和json类型。
(1)Html类型
使用场景:一般返回需要重复复杂操作。例如,一个页面使用ajax从服务器请求json格式的数据,将其返回到页面,然后将其转换为数组,遍历它并将其附加到页面。您可以考虑返回html类型,将Html页面打包到服务器中,然后使用innerHTML直接将其追加到页面中。
(2)json类型
{ '姓名' : '田巴龙部'和'简介' :' 《天龙八部》是著名作家金庸的武侠巨著。写于1963年,历时4年(部分内容是倪匡写的)。前后有三个版本,2005年第三版修改了六稿,结局变化很大。”}如果返回值是json文本,则需要在使用其属性之前,使用eval函数将文本转换为js对象。
案例:
使用Ajax返回值
文件结构图:
07-returntype-html文件:
页面中有三个按钮,分别实现onclick事件。点击每个按钮就是从服务器获取不同格式的数据,然后解析出来显示在页面上。
!DOCTYPE htmlhtmlhead元字符集='utf-8 '元http-equiv=' X-UA-兼容'内容='IE=edge' titleAjax返回值类型/title link rel='样式表href=''/headscript /创建XMLHttpRequest对象函数create xhr(){ var xhr=null;如果(窗口. XMLHttpRequest){ xhr=new XMLHttpRequest();//谷歌、火狐等浏览器}else if(窗口ActiveX对象){ xhr=新的ActiveX对象(' Microsoft .XMLHTTP’);//ie低版本}返回xhr} //测试返回值为可扩展标记语言函数test1(){ //1,创建XMLHttpRequest var xhr=createXhr();//2、确定请求参数xhr.open('GET ',')./07-returntype-xml.php ',true);//3、重写回调函数xhr。onreadystatechange=function(){ if(xhr。readystate==4 xhr。status==200){ var DOM XML=xhr。responsexmlvar name=DOM XML。getelementsbytagname(' book ')[0]。第一个孩子。第一个孩子。全文;var intro=DOM XML。getelementsbytagname(' book ')[0]。最后一个孩子。第一个孩子。全文;document.getElementById('name ').值=名称;document.getElementById('intro ').value=intro} } //4、发送请求xhr。发送(null);} //测试返回值为文本-HTML函数test2(){ //1,创建XMLHttpRequest var xhr=createXhr();//2、确定请求参数xhr.open('GET ',')./07-returntype-html.php ',true);//3、重写回调函数xhr。onreadystatechange=function(){ if(xhr。readystate==4 xhr。status==200){ var DOM XML=xhr。responsexmldocument.getElementById('area ').innerHTML=xhr . responsetext } }//4、发送请求xhr。发送(null);} //测试返回值为文本json函数test3(){ //1,创建XMLHttpRequest var xhr=createXhr();//2、确定请求参数xhr.open('GET ',')./07-returntype-json.php ',true);//3、重写回调函数xhr。onreadystatechange=function(){ if(xhr。readystate==4 xhr。status==200){ var result=eval('(' xhr。response text '));document.getElementById('name ').value=result . name document . getelementbyid(' intro ').value=result.intro} } //4、发送请求xhr。发送(null);}/scriptbody p书名:输入类型=' text ' id=' name '/p/p简介:输入类型=' text ' id=' intro '/p输入类型=' button ' onclick=' test1();'值='测试XML '/输入类型=' button ' onclick=' test2();'值='测试HTML '/input type=' button ' onclick=' test3();'值='测试JSON '/p id=' area '/p/body/html 07-返回类型-XML。服务器端编程语言(Professional Hypertext Preprocessor的缩写)文件:
主要是返回可扩展标记语言格式的数据
?php/** *返回可扩展标记语言数据* @ author webbc */header(' Content-type : text/XML;charset=utf-8 ');回声?可扩展标记语言版本='1.0 '编码='UTF-8 '?bookstorebookname天龙八部/nameintro![CDATA[ 《天龙八部》是著名作家金庸的武侠代表作。著于1963年,历时四年创作完成(部分内容曾由倪匡代笔撰写),前后共有三版,并在2005年第三版中经历6稿修订,结局改动较大)]/简介/书籍/书店;07-returntype-html.php文件:
主要是返回超文本标记语言文本
?php/** *返回超文本标记语言标签数据* @author webbc */$arr=array('赵','钱','孙','李');$ str=foreach ($arr as $v) { $str .='li ' .$ v . '/Li ';} echo $ str?07-returntype-json.php文件:
主要是返回数据格式数据
?php/** *返回数据格式数据* @ author webbc */header(' Content-type : text/html;charset=utf-8 ');回显“{ name }”:天龙八部,' intro':' 《天龙八部》是著名作家金庸的武侠代表作。著于1963年,历时四年创作完成(部分内容曾由倪匡代笔撰写),前后共有三版,并在2005年第三版中经历6稿修订,结局改动较大。'}';效果图:
更多关于创建交互式、快速动态网页应用的网页开发技术相关内容感兴趣的读者可查看本站专题: 《jquery中Ajax用法总结》 、 《JavaScript中ajax操作技巧总结》 、 《PHP+ajax技巧与应用小结》 及《asp.net ajax技巧总结专题》
希望本文所述对大家创建交互式、快速动态网页应用的网页开发技术程序设计有所帮助。