jquery異步請(qǐng)求的意思是瀏覽器在發(fā)送請(qǐng)求給服務(wù)器之后，不需要等待服務(wù)器響應(yīng)返回就可以隨時(shí)發(fā)送下一次請(qǐng)求，即請(qǐng)求發(fā)送之前的數(shù)據(jù)不丟失，又能實(shí)現(xiàn)頁面的局部刷新；可以利用Ajax、“$.get()”、“$.post()”和“$.getJSON()”四種方法實(shí)現(xiàn)異步請(qǐng)求。

本教程操作環(huán)境：windows10系統(tǒng)、jquery3.6.0版本、Dell G3電腦。

jquery異步請(qǐng)求是什么意思

異步請(qǐng)求

當(dāng)瀏覽器向服務(wù)器發(fā)送同步請(qǐng)求時(shí)，服務(wù)處理同步請(qǐng)求的過程中，瀏覽器會(huì)處于等待的狀態(tài)，服務(wù)器處理完請(qǐng)求把數(shù)據(jù)響應(yīng)給瀏覽器并覆蓋瀏覽器內(nèi)存中原有的數(shù)據(jù)，瀏覽器重新加載頁面并展示服務(wù)器響應(yīng)的數(shù)據(jù)。

那么，有沒有一種技術(shù)，可以讓瀏覽器發(fā)送請(qǐng)求給服務(wù)器，服務(wù)器處理請(qǐng)求的過程中，瀏覽器不處于等待的狀態(tài)，并且瀏覽器接收響應(yīng)數(shù)據(jù)的同時(shí)不再重新加載整個(gè)頁面，既請(qǐng)求發(fā)送之前的數(shù)據(jù)不丟失，又能實(shí)現(xiàn)頁面的局部刷新呢？那就要用到ajax請(qǐng)求——異步請(qǐng)求模型

同步請(qǐng)求就是在發(fā)送一個(gè)請(qǐng)求之后，需要等待服務(wù)器響應(yīng)返回，才能夠發(fā)送下一個(gè)請(qǐng)求。

異步請(qǐng)求和同步請(qǐng)求相對(duì)，異步不需要等待響應(yīng)，隨時(shí)可以發(fā)送下一次請(qǐng)求。

jQuery異步請(qǐng)求的四種方式

第一種Ajax請(qǐng)求：
保存數(shù)據(jù)到服務(wù)器，成功時(shí)顯示信息

$.ajax({  type: “POST”,  url: “some.php”,  data: “name=John&location=Boston”,  success: function(msg){  alert( "Data Saved: " + msg );  }  });

注釋：
l type:（默認(rèn)：“GET”），請(qǐng)求方式（“POST”或“GET”）其他請(qǐng)求方法僅部分瀏覽器支持。
l url:(默認(rèn)當(dāng)前頁地址)發(fā)送請(qǐng)求的地址。
l data:存入的數(shù)據(jù)。
l success：當(dāng)請(qǐng)求之后調(diào)用，轉(zhuǎn)入返回后的數(shù)據(jù)，以及包含成功代碼的字符串。
l Function()里面需要存入控制器那邊聲明的全局變量

第二種$.get()請(qǐng)求：
（通過遠(yuǎn)程 HTTP GET 請(qǐng)求載入信息。這是一個(gè)簡(jiǎn)單的 GET 請(qǐng)求功能以取代復(fù)雜 $.ajax 。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請(qǐng)使用 $.ajax。）
描述：
顯示 test.php 返回值(HTML 或 XML，取決于返回值)。
jQuery 代碼:

$.get(“test.php”, function(data){  alert("Data Loaded: " + data);  });

第三種$.post()請(qǐng)求：
（通過遠(yuǎn)程 HTTP POST 請(qǐng)求載入信息）
描述：
輸出來自請(qǐng)求頁面 test.php 的結(jié)果（HTML 或 XML，取決于所返回的內(nèi)容）：
jQuery 代碼:

$.post(“test.php”, function(data){  alert("Data Loaded: " + data);  });

第四種$.getJSON()請(qǐng)求：
（通過 HTTP GET 請(qǐng)求載入 JSON 數(shù)據(jù)）
jQuery 代碼:

$.getJSON(“http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format  =json&jsoncallback=?”, function(data){  $.each(data.items, function(i,item){  $("").attr(“src”, item.media.m).appendTo("#images");  if ( i == 3 ) return false;  });  });

注意：

l $.getJSON()請(qǐng)求，與前三中有個(gè)點(diǎn)不太一樣，控制器里面return的并非是Content而是JSon格式的代碼

視頻教程推薦：jQuery視頻教程