jQuery异步通信方法 load()、$.get()、$.post()、$.getScript()、$.getJSON()、$.Ajax()

一、分3层，ajax最底层，可以实现代替其他方法

在jQuery中，$ .Ajax()方法属于最底层的方法，第2层是load()，$ .get()，和$ .post()，第3层是 $ .getScript()和$.getJSON()方法。

$.getScript()，$.getJSON()

load() ， $.get()，$.post()

$.Ajax()

越高层越接近用户，越底层越接近程序员。

二、load()方法

有 本地加载功能、server功能（服务通信）两个功能。

load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中（返回的一般都是innerHTML）。

注意：还存在一个名为 load 的 jQuery 事件方法。调用哪个，取决于参数。

1、结构：jQuery对象.load（“url”,data,callback）；

参数	描述
url	必需。规定您需要加载的 URL。
data	可选。规定连同请求发送到服务器的数据。
callback(response,status,xhr)	可选。规定 load() 方法完成时运行的回调函数。 response - 包含来自请求的结果数据； status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）； xhr - 包含 XMLHttpRequest 对象（这里的xhr是包装后的，是promise的xhr）

2、传递方式：load（）方法传递方式根据参数data来自动指定。如果没有参数传递，则采用get方式，反之，则自动转换为post方式。

$("button").click(function(){
	$("#cont").load("xi.html li"，{name:"rain"，age"18"}，function（）{
		//有参数，是post方式
	});
})

3、回调参数：对于必须在加载完成后才能继续的操作，load() 方法提供了回调函数（callback），该函数有3个参数，“请求返回的内容”、“请求状态、“XMLHttpRequest对象”，如：

$("header").load("testFile/3_header.html ul"，function（responseText，textStates，XMLHttpRequest）{
	//responseText：请求返回的内容
	//textStates：请求状态：success   error 
	//XMLHttpRequest：XMLHttpRequest对象
});
注意：在load（）方法中，无论Ajax请求是否成功，只要请求完成，回调函数就被触发。

4、案例

（一）本地加载功能

新加载到某元素内的内容会覆盖掉原来的内容。

案例1：简单的load使用，引入txt文本中的一句话，然后分别显示txt的内容在页面以及控制台上。

（1）load这种方法，会习惯性的把返回的数据信息放到相关元素里面，也就是直接会显示在页面上：

<script src="./js/jquery-3.2.1.js"></script>
<div id="box"></div>
<script>
    $("#box").load("1load.txt");
</script>

效果截图：

（2）如果不希望加载到页面相关标签，而是希望能够处理数据，则可以用： $(document).load(url,callback(res){});

<script src="./js/jquery-3.2.1.js"></script>
<div id="box"></div>
<script>
    $(document).load("1load.txt", function (res) {
        console.log(res);
    })
</script>

案例2：页面头部重复引用，加载所有的内容到元素里

<header></header>
<!-- load引入头部，可重复使用 -->
<script>
    $(function(){
        $("header").load("./header.html",function(){
            $("li").click(function(){
                console.log($(this).html());
            })
        })
    })
</script>

案例3：筛选载入的HTML文档，只加载页面内的某些内容

如果想对载入的HTML进行筛选，那么只要在url参数后面跟着一个选择器即可；

可以使用load（“URL selector”）这种方式来实现；

例如只加载 header.html 中的 p 标签中的内容到exercise.html中的header标签里面：

<header></header>
<script>
    $(function(){
        $("header").load("./header.html p",function(){
            $("li").click(function(){
                //load是异步，所以把必须加载完成后才能继续的操作，放在回调函数中
                console.log($(this).html());
            })
        })
    })
</script>

然后，就能看见p标签被添加在了文档页面内：

（二）服务通信功能

如果是服务器文件，比如nodeJS或者.php等，一般不仅需要载入数据，还需要向服务器提交数据，此时第二个可选参数data就能发回作用。

向服务器提交数据有两种方式：get、post。

案例1：向服务器传递两个参数，服务器解析地址，将两个参数相加，然后返回结果。

通信服务文件：

var http=require("http");
var querystring=require("querystring");

var server=http.createServer(function(req,res){
    req.on("data",function(_data){
       
    });
    req.on("end",function(){
    	//console.log(req.url);//后台输出查看请求url
        if(req.url.indexOf("favicon.ico")>-1) return;
        var data=querystring.parse(req.url.split("?")[1]);//通过get方式截取url
        var sum=Number(data.a)+Number(data.b);
        res.writeHead(200,{
            "content-type":"text/html;charset=utf-8",
            "Access-Control-Allow-Origin":"*",
            "Access-Control-Allow-Headers":"*"
        })
        res.write(sum.toString());//转化成字符串
        res.end();
    })
});
server.listen(8001)

（1）向服务器提交数据的第一种方式，直接拼接到地址上，不传递data，默认get方式：

<div></div>
<script>
    $("div").load("http://127.0.0.1:8001/?a=100&b=242");
</script>

开启服务，打开页面，load() 方法从服务器加载数据，并把返回的数据放置到指定的元素div中：

如果不希望处理数据，则修改load加载那一块的代码（下面这两种写法都是get方式通信）：

<script>
    $(document).load("http://127.0.0.1:8001/?a=100&b=242",function(res){
        console.log(res);
    })
    //还可以分开写
    $(document).load("http://127.0.0.1:8001","a=100&b=242",function(res){
        console.log(res);
    })
</script>

刷新网页，如果在服务文件里后台输出url，能发现，不管是直接拼接还是分开写，url依然不变；然后依然是get方式截取url：

页面控制台输出截图：

（2）post方式，对象的形式传递data。跟get不一样的地方体现在，get是以字符串的方式填参。

<script>
// 前面是服务文件的地址，后面data以对象方式发送
    $(document).load("http://127.0.0.1:8001/",{a:3,b:4},function(res,success,xhr{
        console.log(res,success,xhr);
    }) 
</script>

服务文件：

var http=require("http");
var querystring=require("querystring");

var server=http.createServer(function(req,res){
    var data="";
    req.on("data",function(_data){
        data+=_data;
    });
    req.on("end",function(){
        // console.log(req.url)
        if(req.url.indexOf("favicon.ico")>-1) return;
        // var data=querystring.parse(req.url.split("?")[1]);
        data=querystring.parse(data);
  
        var sum=Number(data.a)+Number(data.b);
        res.writeHead(200,{
            "content-type":"text/html;charset=utf-8",
            "Access-Control-Allow-Origin":"*",
            "Access-Control-Allow-Headers":"*"
        })
       
        //res.write(JSON.stringify(data));//这个展示的就是data数据内容：{"a":"3","b":"4"}
        res.write(sum.toString());//转化成字符串
        res.end();
    })
});
server.listen(8001)

重新开启服务，刷新网页：

三、$.get() 方法

load（）通常是从web服务器上获取静态的数据文件，如果需要专递一些参数给服务器中的页面，可以使用 $ .get( ) 方法和$ .post（）方法（或$ .ajax()方法）。

1、结构：$.get( url，[ data ]，[ callback ]，[ datatype ])

2、参数介绍
 url：服务文件地址
 data：数据，多条数据可以放到对象里面
 callback：回调函数，如果数据正常传递并成功返回，那么就可以调用该回调函数；
该回调函数有两个参数，比如下面示例：

$(function(){                                                        
        $.get("testFile/4test.php",{name:"老王"},function(res,status){
        	//res：返回值（XML文档，json文件，XHML片段等）
  			//status：请求状态（success  error）
          console.log(res);
});

 datatype：规定预期的服务器响应的数据类型，jQuery 能够默认智能判断（xml、html、text、script、json等）。

get方法返回值是一个promise对象，举个小例子：

$.get("./user.php",{name:"sky",pwd:"12345"}).then(function(res,state){
    console.log(res,state);
},function(){
    console.log("失败");
})

四、get与post区别

$ .post() 方法 与$ .get( )方法的结构和使用方式都相同，不过之间仍然有一下区别：

1、post的安全性高于get。如果以get方式请求，请求参数会拼接到url后面，安全性性低；而以post方式请求，请求参数会包裹在请求体中，安全性更高。

2、数量区别：get方式传输的数据量小，规定不能超过2kb；post方式请求数据量大，没有限制。

3、传输速度：get的传输速度高于post。

$.post("3getAndPost.php",{name:"laowang",pwd:123456},function(res,status){
	console.log(res);
	console.log(status);
});

$.post("3getAndPost.php",{name:"xiaoming",pwd:123456}).then(function(res){
	console.log(res);
},function(){
	console.log("失败");
});

五、$.getScript( ) 方法

1、简介：
getScript() 方法使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript。

有时候，在页面出现时就获取所需的全部JavaScript文件是完全没有必要的，可以在需要的时候直接加载。
jQuery提供了 $.getScript( )方法来直接加载js文件。

2、结构：$(selector).getScript(url,[callback (response,status)])

参数	描述
url	必需。规定将请求发送到哪个URL。
callback	可选。可选。规定当请求成功时运行的函数。 response - 包含来自请求的结果数据； status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）

3、应用：

案例1：加载一个js文件，把返回的res数据内容放到script标签里面，然后执行该js文件里面的函数。（其实，不放入script也可以执行js文件里的函数，只不过，如果多次使用的话，只需要加载一次）

<script>
    $.getScript("./js/abc.js",function(res){
    
        console.log(res);//查看res的内容

        // 原生js方式
        var script=document.createElement("script");//原生js创建Dom标签
        script.innerHTML=res;//把结果放进该script标签里
        document.body.appendChild(script);//把该script标签放进body里面
        abc();//运行从abc.js文件引入的函数

        // jQuery方式
        $("<script><\/script>").html(res).appendTo("body");//也可以不放在页面内，也可以直接执行下面的函数,<\/script>转义字符\
        anotherABC();
    })
</script>

效果：两个script已经携带内容加入到body里，然后可以执行对应函数。

案例2：加载多个js文件，比如要想使用c.js里的函数fn()，就要先加载b.js，但是b.js文件里的对象obj的a方法需要abc.js里的abc()函数，所以又得加载abc.js文件。那么怎么逐一把三个文件都加载进来呢？

<script>
    // 逐一加载多个js文件
    var arr = ["./js/abc.js", "./js/b.js", "./js/c.js"];
    var script = $("<script><\/script>").appendTo("body");//先创建一个script标签添加进body里面
    // 然后放在一个自定义函数中
    getScriptFile();
    function getScriptFile() {
        var url = arr.shift();//删除数组的第一个元素，且返回该元素
        // 然后对url进行判断，如果真实存在，则继续；直到三个url都加载完
        if (url) {
            $.getScript(url, function (res) {
                script.html(script.html() + res);//连接上一次的返回结果
                getScriptFile();//然后递归循环，知道url不复存在
            })
            return;//一定记得返回，递归一层层返回            
        }
        fn();
    }
</script>

很明显，三个js文件的内容都被添加进body里的script标签里面了：

fn()执行的结果也在后台打印了：

案例3：新创建一个js文件，写入一个函数，该函数功能是能够随机生成颜色；

然后我们在另外的html中写入两个div，一个表示原色，一个表示随机后的颜色；

<div>原色</div>
<div id="box">随机后的色彩</div>
<script>
    $.getScript("./js/randColor.js", function () {
        changeColor($("#box"));
    })
</script>

六、$.getJson（）方法

1、简介：

getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

$ .getJson( )方法用于加载JSON文件，与$ .getScript( )方法的用法相同。

2、结构：$(selector).getJSON(url,[data],[callback(data,status,xhr)])

参数	描述
url	必需。规定将请求发送到哪个URL。
data	可选。规定发送到服务器的数据。
callback	可选。规定当请求成功时运行的函数。 data - 包含从服务器返回的数据，被自动序列成对象； status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）； xhr - 包含 XMLHttpRequest 对象

3、应用： 点击按钮，逐条打印相关json文件里的信息。
（要先生成一个json文件，如果大家安装了npm的话，我们每次 npm init -y 就会默认生成一个json配置文件。）

<button>临时加载json</button>
<script>
    $("button").click(function(){
        $.getJSON("./goods.json",function(data){
            $.each(data,function(prop,value){
                console.log(prop,value); //加载了JSON文件后，在回调函数里可以处理返回的数据。
            })
        })
    })
</script>

$ .each()： 遍历，可以遍历数组、对象、jQuery对象。

（$.each()函数是以一个数组或者对象为第1个参数，以一个回调函数作为第2个参数，回调函数拥有两个参数，第1个为对象的成员或者数组的下标，第2个位对应变量或内容）

$.each(data，function(prop,value){})

七、$.Ajax（）方法

前面用到的 $ .load()，$ .get()，$ .post()，$ .getScript()，$ .getJSON()这些方法，都是基于$ .ajax()方法构建的，$ .ajax()是jQuery最底层的Ajax实现，因而可以用来代替前面的所有方法。

$ .ajax()不仅能实现与$ .load()，$ .get()，$ .post()同样的功能，而且还可以设定beforeSend（提交前回调函数）、error（请求失败后处理）、success（请求成功后处理）、complete（请求完成后处理）回调函数，通过设定这些回调函数，可以给用户更多的Ajax提示信息，另外，还有一些参数可以设置Ajax请求的超时时间或者页面的“最后更改”状态。

$.ajax({
	url：请求地址
	type:"get | post | put | delete " 默认是get,
	data:请求参数 {"id":"123","pwd":"123456"}, //代入对象的方式
	//dataType:请求数据类型"html | text | json | xml | script | jsonp ",
	success:function(data,dataTextStatus,jqxhr){ },//请求成功时
	//error:function(jqxhr,textStatus,error)//请求失败时
})