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

╰+哭是因爲堅強的太久メ 2023-02-21 06:25 11阅读 0赞

#### 一、分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）；

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

**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的内容在页面以及控制台上。  
![在这里插入图片描述][20200629164046423.png]  
（1）load这种方法，会习惯性的把返回的数据信息放到相关元素里面，也就是直接会显示在页面上：

效果截图：  
![在这里插入图片描述][20200630191638655.png]  
（2）如果不希望加载到页面相关标签，而是希望能够处理数据，则可以用： $(document).load(url,callback(res)\{\});

![在这里插入图片描述][20200630192046813.png]

**案例2**：页面头部重复引用，加载所有的内容到元素里  
![在这里插入图片描述][20200629165619342.png]

<header></header>
    
    <script> $(function(){ $("header").load("./header.html",function(){ $("li").click(function(){ console.log($(this).html()); }) }) }) </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

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

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

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

例如只加载 header.html 中的 p 标签中的内容到exercise.html中的header标签里面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]

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

然后，就能看见p标签被添加在了文档页面内：  
![在这里插入图片描述][2020062919082429.png]

###### （二）服务通信功能 ######

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

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

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

通信服务文件：

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

开启服务，打开页面，load() 方法从服务器加载数据，并把返回的数据放置到指定的元素div中：  
![在这里插入图片描述][20200630195705344.png]  
如果不希望处理数据，则修改load加载那一块的代码（下面这两种写法都是get方式通信）：

刷新网页，如果在服务文件里后台输出url，能发现，不管是直接拼接还是分开写，url依然不变；然后依然是get方式截取url：  
![在这里插入图片描述][20200630201842759.png]  
页面控制台输出截图：  
![在这里插入图片描述][20200630202259933.png]  
（2）post方式，对象的形式传递data。跟get不一样的地方体现在，get是以字符串的方式填参。

服务文件：

重新开启服务，刷新网页：  
![在这里插入图片描述][20200630204815679.png]

#### 三、$.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)])`

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td align="left">必需。规定将请求发送到哪个URL。</td> 
  </tr> 
  <tr> 
   <td>callback</td> 
   <td align="left">可选。可选。规定当请求成功时运行的函数。<br> <br>response - 包含来自请求的结果数据；<br>status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）</td> 
  </tr> 
 </tbody> 
</table>

**3、应用**：

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

效果：两个script已经携带内容加入到body里，然后可以执行对应函数。  
![在这里插入图片描述][20200630170004317.png] ![在这里插入图片描述][20200630165924897.png]

**案例2**：加载多个js文件，比如要想使用c.js里的函数fn()，就要先加载b.js，但是b.js文件里的对象obj的a方法需要abc.js里的abc()函数，所以又得加载abc.js文件。那么怎么逐一把三个文件都加载进来呢？  
![在这里插入图片描述][20200630173950939.png]![在这里插入图片描述][20200630174045827.png]![在这里插入图片描述][20200630174416300.png]

很明显，三个js文件的内容都被添加进body里的script标签里面了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]  
fn()执行的结果也在后台打印了：  
![在这里插入图片描述][20200630174944588.png]

**案例3**：新创建一个js文件，写入一个函数，该函数功能是能够随机生成颜色；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]

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

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

![在这里插入图片描述][2020062920521956.png]

#### 六、$.getJson（）方法 ####

**1、简介**：

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

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

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

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

**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)//请求失败时
    })

[20200629164046423.png]: https://img-blog.csdnimg.cn/20200629164046423.png
[20200630191638655.png]: https://img-blog.csdnimg.cn/20200630191638655.png
[20200630192046813.png]: https://img-blog.csdnimg.cn/20200630192046813.png
[20200629165619342.png]: https://img-blog.csdnimg.cn/20200629165619342.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200629165550286.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200629190012718.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[2020062919082429.png]: https://img-blog.csdnimg.cn/2020062919082429.png
[20200630195705344.png]: https://img-blog.csdnimg.cn/20200630195705344.png
[20200630201842759.png]: https://img-blog.csdnimg.cn/20200630201842759.png
[20200630202259933.png]: https://img-blog.csdnimg.cn/20200630202259933.png
[20200630204815679.png]: https://img-blog.csdnimg.cn/20200630204815679.png
[20200630170004317.png]: https://img-blog.csdnimg.cn/20200630170004317.png
[20200630165924897.png]: https://img-blog.csdnimg.cn/20200630165924897.png
[20200630173950939.png]: https://img-blog.csdnimg.cn/20200630173950939.png
[20200630174045827.png]: https://img-blog.csdnimg.cn/20200630174045827.png
[20200630174416300.png]: https://img-blog.csdnimg.cn/20200630174416300.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200630175035241.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200630174944588.png]: https://img-blog.csdnimg.cn/20200630174944588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200629204943113.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[2020062920521956.png]: https://img-blog.csdnimg.cn/2020062920521956.png