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 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"/></p> <p>简介:<input type="text"/></p> <input type="button" value="测试xml"/> <input type="button" value="测试HTML" /> <input type="button" value="测试json" /> <p></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名目数据

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsdfys.html