AJAX的學習
AJAX的簡介
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創建互動式網頁應用的網頁開發技術，
AJAX = 異步 JavaScript和XML（標準通用標記語言的子集），
AJAX 是一種用于創建快速動態網頁的技術，
AJAX的優缺點
優點：
不需要插件支持
用戶體驗極佳
提升Web程式性能
減輕服務器和寬帶的負擔
缺點：
前進后退按鈕被破壞
搜索引擎的支持不夠
開發除錯工具缺乏
XHR的創建與兼容
1.創建 XMLHttpRequest 物件的語法：
1 variable=new XMLHttpRequest();
2.老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 物件：
1 variable=new ActiveXObject("Microsoft.XMLHTTP");
AJAX如何作業
正如您在上面的示例中所看到的，XMLHttpRequest物件起著重要作用，
- 用戶從UI發送請求，JavaScript中呼叫XMLHttpRequest物件，
- HTTP請求由XMLHttpRequest物件發送到服務器，
- 服務器使用JSP，PHP，Servlet，ASP.net等與資料庫互動，
- 檢索資料，
- 服務器將XML資料或JSON資料發送到XMLHttpRequest回呼函式，
- HTML和CSS資料顯示在瀏覽器上，
AJAX的連接（封裝過）
POST和GET的區別：
1.POST主要用來發送資料，GET主要用來接受資料；
2.PSOT發送資料的安全性較好，而GET較差；
3.POST發送資料不限制大小，而GET大小受限2~100k，
什么時候用GET和POST：在資料獲取時用GET方式，在操作資料時應使用POST方式，
1.GET連接
1 function ajaxGet(url,cb,data){
2 data = https://www.cnblogs.com/wx-1998/p/data || {};
3 var str = "";
4 for(var i in data){
5 str += `${i}=${data[i]}&`;
6 }
7 var d = new Date();
8 url = url + "?" + str + "__qft="+d.getTime();
9
10 var xhr = new XMLHttpRequest();
11 xhr.open("get",url,true);
12 xhr.onreadystatechange = function(){
13 if(xhr.readyState == 4 && xhr.status == 200){
14 cb(xhr.responseText)
15 }
16 }
17 xhr.send();
18 }
2.POST連接
1 function ajaxPost(url,callback,data){
2 data = https://www.cnblogs.com/wx-1998/p/data || {};
3 var str = "";
4 for(var i in data){
5 str += `${i}=${data[i]}&`;
6 }
7
8 var xhr = new XMLHttpRequest();
9 xhr.open("POST",url,true);
10 xhr.onreadystatechange = function(){
11 if(xhr.readyState == 4 && xhr.status == 200){
12 callback(xhr.responseText);
13 }
14 }
15 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
16 xhr.send(str);
17 }
拓展
XHR readyState
AJAX - onreadystatechange 事件
當發送一個請求后，客戶端需要確定這個請求什么時候會完成，因此，XMLHttpRequest物件提供了onreadystatechange事件機制來捕獲請求的狀態，繼而實作回應，
當請求被發送到服務器時，我們需要執行一些基于回應的任務，
每當readyState改變時，就會觸發onreadystatechange事件，
readyState屬性存有 XMLHttpRequest 的狀態資訊，
回呼函式
回呼函式是一種以引數形式傳遞給另一個函式的函式，
如果您的網站上存在多個 AJAX 任務，那么您應該為創建 XMLHttpRequest 物件撰寫一個標準的函式，并為每個 AJAX 任務呼叫該函式，
該函式呼叫應該包含 URL 以及發生onreadystatechange事件時執行的任務（每次呼叫可能不盡相同）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/179779.html
標籤：JavaScript