[ajax如何返回数据遍历]Ajax返回数据如何显示

/*

* Ajax的核心操作数是xmlHttpRequest

*/

实例化对象

考虑到兼容性问题，使用非IE5/IE6=new XMLHttpRequest；

使用IE5/IE6=new ActiveXObjec)；上帝啊，带上IE！

发送请求

使用XMLHttpRequest对象的open('GET '，url，async)和send方法。

Open有三个参数：

分别是http请求方法(GET/POST)==”。get比POST更容易、更快。开机自检受数据量限制，不缓存，相对安全

Http请求地址=="URL(统一资源定位器)文件所在的服务器的地址

Async:true(异步)或false(同步)

Send(string) string:仅用于POST请求

接受响应，执行回调

如果ReadyState值发生更改，则会触发readystatechange事件，您可以根据自己的喜好进行操作

ReadyState==4=请求加载完成/http状态200=响应成功

！DOCTYPE html

Html

头(电影)

meta charset=' utf-8 '

标题异步任务集合/标题

Script type='text/javascript '

/*

* Ajax的核心操作数是xmlHttpRequest

*简化程序：实例化xmlHttpRequest对象==发送请求==允许响应==执行回调

*/

Var jsAjax=function {

Var xmlHttpR=null

I) {

//IE5/IE6将xmlHttpRequest封装在window的子对象ActiveXObject中

XmlHttpR=new ActiveXObjec)；

} else i) {

//非IE5、IE6

XmlHttpR=new XMLHttpRequest

}

If(xmlHttpR) {

XmlH('GET '，' ajax.xml '，true)；

XmlH=function(e) {

I==4) {

I==200) {

con)；

}

}

}

XmlH(空)；

}

}

脚本(脚本)

/head

菩提

/body

/html？Xml版本=' 1.0' encoding=' utf-8 '？

北店

book category=' cookie '

title lang=' en ' every day Italian/title

AuthorGiada De Laurentiis/author

年2005/年

Price30.00/price

/book

Book category='CHILDREN '

title lang=' en ' Harry Potter/title

AuthorJ K. Rowling/author

年2005/年

Price29.99/price

/book

book category=' web '

title lang=' en ' learning XML/title

AuthorErik T. Ray/auth

or> <year>2003</year> <price>39.95</price> </book> </bookstore>

/*

* js就是这么复杂，一套行云流水的操作下来，浏览器F5，哎，咋没效果，不行，修改代码，再刷，还有bug等着你！ (∪｡∪)｡｡｡zzz 敲两行jQuery放松一下！

* jQuery操作ajax用一个封装的函数 $.ajax 就可以搞定,操作步骤及其简化！！！

*/

常用参数

type:"get", //http请求方式,值为 get/post 默认值为get

url:"", //统一资源定位符 ！！！重要参数

async:true, //值为 true/false 默认值为true,为异步,ajax发送请求后,在等待server端返回的这个过程中，会继续执行ajax块后面的脚本（异步思想）,直到server端返回正确的结果才会去执行success

dataType:"xml", //返回数据的类型 ,值为 xml/html/script/json/jsonp/text

data:obj, //传给sever的数据 可以是字符串也可以是对象(比如登陆时传用户名密码)

cache:true, //默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息

complete:function{}, //请求完成后调用的回调函数（请求成功或失败时均调用）

success:function(res){}, //成功时调用回调函数 ！！！重要回调

error: function (err) {} //发生错误时调用回调函数

jquery封装了 $.ajax $.post $.get $(selector).load $.getJson $.getScript

其实弄懂$.ajax就好了，别的都是它延伸出来，具有某种特异功能，$.ajax是大一统，霸天下，废话不多说，直接上实例，看注释

$(".loadDom").load("ajax.html", function(responseText, textStatus, xmlHttpRequest) { /* * 常用与把某段文本(如 :html文档) 嵌入当前文档中，更逆天的是可以把某文档的某片段加载进来 如$(".loadDom").load("load.htm div.test"). * load 有四个参数: * ① url:可以加入querystring ==》'login.php?uname="wbx_2018@qq.com"&pwd="jiubugaosuni"',很明显这已然是get请求 * ② data:附带参数就会转换为post请求，基本会省略 * ③ function：回调函数 ↙☜下左继续分析 * * 回调函数也可以携带三个参数： * ① responseText 服务端返回的文本 * ② textStatus 值为success或error * ③ xmlHttpRequest 这对象就不多说了，原生的 */ con(responseText); }) $.get("ajax.json", { para1: "val1", para2: "val2" }, function(data, textStatus) { con(data); }, "json") //$.post("ajax.php",{ // para1: "val1", // para2: "val2" //}, function(data, textStatus) { // con(data); //},"json") $.getScript('ajax.js', function(data) { con(data); }); $.getJSON('ajax.json', function(data) { con(data); }); $.ajax({ type: "get", async: true, url: "ajax.xml", dataType: "xml", complete: function(data) { con(data); }, success: function(res) { //遍历xml文档 dom操作 var books=$(res).find("bookstore book"), $this, $htm=; $.each(books, function(index) { $this=$(this); $("第"+(index+1)+"本书： 《"+$("title").text+"》 --- "); $($("author").text); $("&nbsp;("+$("year").text+")<br>"); }); $("#test").append($("")); } });

注:在进行ajax访问时也许会遇到页面无效果或是报错---XMLHttpRequest cannot load，出现这种情况一般是浏览器禁止ajax本地访问（chrome）。把文件部署到服务器不会出现该问题。解决方法：

1.可在 Chrome 快捷方式中添加启动参数： --allow-file-access-from-files（前面加空格）

2.用HBuilder这类具有内置服务器的编辑器，直接运行即可

当然我们可以用浏览器提供的调试工具，搞清楚 阿贾克斯 的一举一动，还是