首页 / AJAX / Ajax返回值类型与用法实例分析
Ajax返回值类型与用法实例分析
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Ajax返回值类型与用法实例分析,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4259字,纯文字阅读大概需要7分钟。
内容图文
本文实例讲述了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类型
{ "name": "天龙八部", "intro": "《天龙八部》是著名作家金庸的武侠代表作。著于1963年,历时4年创作完成(部分内容曾由倪匡代笔撰写),前后共有三版,并在2005年第三版中经历6稿修订,结局改动较大。" }
如果返回值是json文本,首先需要使用eval函数将文本转换为js对象,然后才能使用其属性。
案例:
使用Ajax返回值
文件结构图:
07-returntype-html文件:
页面中有3个按钮,分别实现了onclick事件,点击每个按钮就是从服务器获取不同格式的数据,然后解析,显示到页面中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Ajax返回值类型</title> <link rel="stylesheet" href=""> </head> <script> //创建XMLHttpRequest对象 function createXhr(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();//谷歌、火狐等浏览器 }else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP");//ie低版本 } return xhr; } //测试返回值为xml function 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 domxml = xhr.responseXML; var name = domxml.getElementsByTagName('book')[0].firstChild.firstChild.wholeText; var intro = domxml.getElementsByTagName('book')[0].lastChild.firstChild.wholeText; document.getElementById('name').value = name; document.getElementById('intro').value = intro; } } //4、发送请求 xhr.send(null); } //测试返回值为文本-HTML function 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 domxml = xhr.responseXML; document.getElementById('area').innerHTML = xhr.responseText; } } //4、发送请求 xhr.send(null); } //测试返回值为文本-json function 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.responseText+')'); document.getElementById('name').value = result.name; document.getElementById('intro').value = result.intro; } } //4、发送请求 xhr.send(null); } </script> <body> <p>书名:<input type="text" id="name"/></p> <p>简介:<input type="text" id="intro"/></p> <input type="button" onclick="test1();" value="测试xml"/> <input type="button" onclick="test2();" value="测试HTML" /> <input type="button" onclick="test3();" value="测试json" /> <p id="area"></p> </body> </html>
07-returntype-xml.php文件:
主要是返回xml格式的数据
<?php /** * 返回xml数据 * @author webbc */ header('Content-type:text/xml;charset=utf-8'); echo '<?xml version="1.0" encoding="UTF-8"?><bookstore><book><name>天龙八部</name><intro><![CDATA[《天龙八部》是著名作家金庸的武侠代表作。著于1963年,历时4年创作完成(部分内容曾由倪匡代笔撰写),前后共有三版,并在2005年第三版中经历6稿修订,结局改动较大。]]></intro></book></bookstore>'; ?>
07-returntype-html.php文件:
主要是返回html文本
<?php /** * 返回html标签数据 * @author webbc */ $arr = array('赵','钱','孙','李'); $str = ''; foreach ($arr as $v) { $str .= '<li>' . $v .'</li>'; } echo $str; ?>
07-returntype-json.php文件:
主要是返回json格式数据
<?php /** * 返回json格式数据 * @author webbc */ header('Content-type:text/html;charset=utf-8'); echo '{"name":"天龙八部","intro":"《天龙八部》是著名作家金庸的武侠代表作。著于1963年,历时4年创作完成(部分内容曾由倪匡代笔撰写),前后共有三版,并在2005年第三版中经历6稿修订,结局改动较大。"}'; ?>
效果图:
更多关于ajax相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》、《PHP+ajax技巧与应用小结》及《asp.net ajax技巧总结专题》
希望本文所述对大家ajax程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的Ajax返回值类型与用法实例分析全部内容,希望文章能够帮你解决Ajax返回值类型与用法实例分析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。