ajaxphp空格技巧_Ajax异步操作集合啦

文章目录 [+]

Ajax的核心操为难刁难象是xmlHttpRequest

实例化工具

（图片来自网络侵删）

考虑到兼容问题,非IE5/IE6 利用 => new XMLHttpRequest;

IE5/IE6利用 => new ActiveXObject(Microsoft.XMLHTTP); ☯神呐，请带走IE吧！

发送要求

利用 XMLHttpRequest 工具的 open('GET',url,async) 和 send 方法：

❶ open 有三个参数：

分别为http要求办法(get/post) ==》与 POST 比较，GET 更大略也更快，POST 没有数据量限定，不会缓存，相对安全

http要求地址 ==》url(统一资源定位符)文件所在做事器的地址

async：true（异步）或 false（同步）

❷send(string) string：仅用于 POST 要求

接管相应，实行回调

当readyState的值发生改变时，触发readystatechange事宜，事宜中就可以为所欲为了

readyState==4 =>要求加载完成 / http的状态为200 =>相应成功

<!DOCTYPE html>\r<html>\r\r <head>\r <meta charset=\"大众UTF-8\"大众>\r <title>异步操作凑集啦</title>\r <script type=\公众text/javascript\"大众>\r /\r Ajax的核心操为难刁难象是xmlHttpRequest\r 简化操作步骤：实例化一个xmlHttpRequest工具 ==> 发送要求 ==> 接管相应 ==> 实行回调\r /\r var jsAjax = function {\r var xmlHttpR = null;\r if(window.ActiveXObject) {\r //IE5/IE6把xmlHttpRequest封装在window的子工具ActiveXObject中\r xmlHttpR = new ActiveXObject(Microsoft.XMLHTTP);\r } else if(window.XMLHttpRequest) {\r //非IE5、IE6\r xmlHttpR = new XMLHttpRequest;\r }\r\r if(xmlHttpR) {\r xmlHttpR.open(\公众GET\公众, \公众ajax.xml\公众, true);\r xmlHttpR.onreadystatechange = function(e) {\r if(xmlHttpR.readyState == 4) {\r if(xmlHttpR.status == 200) {\r console.log(xmlHttpR.responseText);\r }\r }\r }\r xmlHttpR.send(null);\r }\r }<script></head><body></body></html>

<?xml version=\"大众1.0\"大众 encoding=\公众utf-8\"大众?>\r<bookstore>\r <book category=\"大众COOKING\"大众>\r <title lang=\公众en\"大众>Everyday Italian</title>\r <author>Giada De Laurentiis</author>\r <year>2005</year>\r <price>30.00</price>\r </book>\r <book category=\公众CHILDREN\公众>\r <title lang=\"大众en\公众>Harry Potter</title>\r <author>J K. Rowling</author>\r <year>2005</year>\r <price>29.99</price>\r </book>\r <book category=\"大众WEB\公众>\r <title lang=\"大众en\公众>Learning XML</title>\r <author>Erik T. Ray</author>\r <year>2003</year>\r <price>39.95</price>\r </book>\r</bookstore>\r

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) {\r /\r 常用与把某段文本(如 :html文档) 嵌入当前文档中，更逆天的是可以把某文档的某片段加载进来如$(\"大众.loadDom\"大众).load(\公众load.htm div.test\"大众).\r load 有四个参数:\r ① url:可以加入querystring ==》'login.php?uname=\公众wbx_2018@qq.com\"大众&pwd=\"大众jiubugaosuni\"大众',很明显这已然是get要求\r ② data:附带参数就会转换为post要求，基本会省略\r ③ function：回调函数 ↙☜下左连续剖析\r \r 回调函数也可以携带三个参数：\r ① responseText 做事端返回的文本\r ② textStatus 值为success或error\r ③ xmlHttpRequest 这工具就不多说了，原生的\r /\r console.log(responseText);\r })\r\r\r $.get(\公众ajax.json\"大众, {\r para1: \公众val1\"大众,\r para2: \公众val2\"大众\r }, function(data, textStatus) {\r console.log(data);\r }, \"大众json\"大众)\r\r\r //$.post(\"大众ajax.php\"大众,{\r // para1: \公众val1\"大众,\r // para2: \"大众val2\公众\r //}, function(data, textStatus) {\r // console.log(data);\r //},\"大众json\"大众)\r\r\r $.getScript('ajax.js', function(data) {\r console.log(data);\r });\r\r\r $.getJSON('ajax.json', function(data) {\r console.log(data);\r });\r

$.ajax({\r type: \公众get\公众,\r async: true,\r url: \"大众ajax.xml\"大众,\r dataType: \"大众xml\公众,\r complete: function(data) {\r console.log(data);\r },\r success: function(res) {\r //遍历xml文档 dom操作\r var books=$(res).find(\公众bookstore book\"大众),\r $this,\r $htm=;\r $.each(books, function(index) {\r $this=$(this);\r $htm.push(\公众第\"大众+(index+1)+\"大众本书：《\"大众+$this.find(\"大众title\"大众).text+\"大众》 --- \"大众);\r $htm.push($this.find(\"大众author\"大众).text);\r $htm.push(\公众 (\"大众+$this.find(\"大众year\"大众).text+\"大众)<br>\"大众);\r });\r $(\"大众#test\公众).append($htm.join(\"大众\公众));\r }\r });

注:在进行ajax访问时大概会碰着页面无效果或是报错---XMLHttpRequest cannot load，涌现这种情形一样平常是浏览器禁止ajax本地访问（chrome）。
把文件支配到做事器不会涌现该问题。
办理方法：

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

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

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