Ajax异步操作集合啦（阿贾克斯）

本文主要是介绍Ajax异步操作集合啦（阿贾克斯），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

/*
* Ajax的核心操作对象是xmlHttpRequest
* 　　简化操作步骤：实例化一个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>
<html><head><meta charset="UTF-8"><title>异步操作集合啦</title><script type="text/javascript">/** Ajax的核心操作对象是xmlHttpRequest*    简化操作步骤：实例化一个xmlHttpRequest对象  ==> 发送请求  ==> 接受响应 ==> 执行回调*/var jsAjax = function() {var xmlHttpR = null;if(window.ActiveXObject) {//IE5/IE6把xmlHttpRequest封装在window的子对象ActiveXObject中xmlHttpR = new ActiveXObject(Microsoft.XMLHTTP);} else if(window.XMLHttpRequest) {//非IE5、IE6xmlHttpR = new XMLHttpRequest();}if(xmlHttpR) {xmlHttpR.open("GET", "ajax.xml", true);xmlHttpR.onreadystatechange = function(e) {if(xmlHttpR.readyState == 4) {if(xmlHttpR.status == 200) {console.log(xmlHttpR.responseText);}}}xmlHttpR.send(null);}}</script></head><body></body></html>

<?xml version="1.0" encoding="utf-8"?>
<bookstore><book category="COOKING"><title lang="en">Everyday Italian</title><author>Giada De Laurentiis</author><year>2005</year><price>30.00</price></book><book category="CHILDREN"><title lang="en">Harry Potter</title><author>J K. Rowling</author><year>2005</year><price>29.99</price></book><book category="WEB"><title lang="en">Learning XML</title><author>Erik T. Ray</author><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封装了 "jquery.ajax()" "jquery.post()" "jquery.get() " "jquery(selector).load()" "jquery.getJson()" "jquery.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  这对象就不多说了，原生的*/console.log(responseText);})$.get("ajax.json", {para1: "val1",para2: "val2"}, function(data, textStatus) {console.log(data);}, "json")//$.post("ajax.php",{//        para1: "val1",//        para2: "val2"//}, function(data, textStatus) {//        console.log(data);//},"json")
$.getScript('ajax.js', function(data) {console.log(data);});$.getJSON('ajax.json', function(data) {console.log(data);});

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