JavaScript異步Ajax與json總結
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：Visual Studio 2015 與 JavaScript
作者：黃富滔
撰寫時間：2020年4月30日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
知識點羅列：
Json總結
1、Json簡介：
JSON:JavaScript物件表示法（JavaScript Object Notation）
JSON是存盤和交換文本資訊的語法：
（1）.JSON是輕量級的文本資料交換格式
（2）.JSON獨立于語言和平臺
（3）.JSON具有自我描述性，更容易理解。
類似于xml,比XML更小、更快、更易決議
(XML:指可擴展標記語言。XML被設計用來傳輸和存盤資料。)
2、 JSON語法是JavaScript物件表示語法的子集
（1） .資料在名稱/值對中(資料在鍵值對中)
（2）.資料由逗號分隔
（3）.花括號保存物件({})
（4）.方括號保存陣列([])
3、 JSON值可以是：
數字（整數或浮點數）
字串（在雙引號中）
布林值（true或false）
陣列（在方括號中）
物件（在花括號中）
Null
（json的值沒有undefined和NaN）
4、JSON物件與JS物件有2個地方不一樣：
（1）.沒有宣告變數（JSON中沒有變數的概念）
（2）.末尾沒有分號（因為這不是JavaScript陳述句，所以不需要分號）
5、JS與json之間的轉換
JSON物件有兩個方法：
stringify():將JS物件序列化為JSON字串
parse() :將JSON字串決議為原生的JS值
語法： JSON.方法(js物件);
6、json的存在形式
（1）json物件
{
"屬性": "屬性值",
"屬性": "屬性值",
"屬性": "屬性值"
}
（2）Json陣列
{
{
"屬性": "屬性值",
"屬性": "屬性值",
"屬性": "屬性值"
},
{
"屬性": "屬性值",
"屬性": "屬性值",
"屬性": "屬性值"
}
}
Ajax異步總結：
1、同步與異步
同步：就是指一個行程在執行某個請求的時候，
若該請求需要一段時間才能回傳資訊，
那么這個行程將會一直等待下去，
直到收到回傳資訊才繼續執行下去；
同步（一共3ms）
請求一 1ms
請求二 1ms
請求三 1ms
異步 1.3ms
異步：是指行程不需要一直等下去，
而是繼續執行下面的操作，不管其他行程的狀態。
當有訊息回傳時系統會通知行程進行處理，
這樣可以提高執行的效率。
異步實作：
1、運用HTML與CSS來實作頁面，表達資訊
2、運用XMLHttpRequest和web服務器進行資料的異步交換
3、運用JavaScript操作DOM，實作動態區域重繪
2、什么是 AJAX ？
Ajax不是某種編程語言 。AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。傳統的網頁（不使用 AJAX）如果需要更新內容頁，必需多載整個網面。
異步的實作分為四個步驟：（1）創建XMLHttpRequest 物件
（2）XMLHttpRequest 物件向服務器發送請求
（3）瀏覽器與服務器建立連接
（4）服務器回應
3、從服務器上獲取資料（）
第一步：XMLHttpRequest 物件的創建
XMLHttpRequest 物件簡介：所有現代瀏覽器均支持 XMLHttpRequest 物件（ IE6以下的瀏覽器使用 ActiveXObject）。所以當我們處理瀏覽器兼容性問題是要寫一個if判斷。
XMLHttpRequest 用于在后臺與服務器交換資料。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
創建XMLHttpRequest 物件的語法：var xhr = new XMLHttpRequest();
創建 ActiveXObject的語法： var xhr=new ActiveXObject("Microsoft.XMLHTTP");
第二步：XMLHttpRequest 物件向服務器發送請求
向服務器發送請求，我們要用到XMLHttpRequest 物件中的兩個方法open()方法和send()方法
open方法：
open(method,url,asyns) 規定請求的型別、URL 以及是否異步處理請求。
引數說明：
method：請求的型別；GET 或 POST
url：檔案在服務器上的位置
async：true（異步）或 false（同步）
說明：async中默認值為true；當你要選擇異步時，可以不寫該引數。
send()方法：將請求發送到服務器
語法：xhr.open()/xhr.send();
第三步：瀏覽器與服務器建立連接
第四步：服務器的回應
使用XMLHttpRequest物件的responseText或responseXML屬性獲取來自服務器的回應（意思就是用該屬性去接收服務器中回傳的值）
responseText:獲得字串形式的回應資料。
responseXML：獲得 XML 形式的回應資料。
說明：如果使用responseText屬性去接識訓傳值，就要把json服務器中json的值轉換為JS物件的值。去接收值得時候不是立刻接收，而是需要一段時間去判斷服務器回應是否已經處理完畢，回應完成后才會去接收資料。
XMLHttpRequest物件的三個重要的屬性
（1）在XMLHttpRequest物件中，readyState屬性存有XMLHttpRequest的狀態資訊，每當readyState改變時，都會觸發onreadystatechange事件，總共會觸發四次 。
readyState:存有XMLHttpRequest的狀態。從0到4發生變化，又稱為狀態碼。
0: 請求未初始化
1: 服務器連接已建立（表示open()方法已經呼叫）
2: 請求已接收 （表示send()方法已經呼叫）
3: 請求處理中 （資料下載中，responseText屬性已經包含部分資料）
4: 請求已完成，且回應已就緒 （資料接收完成）
簡單來說就是記錄XMLHttpRequest物件當前是屬于什么樣的狀態，
（2）status: 200: "OK" 404: 未找到頁面（當status=200時表示回應已經處理完）
（3）onreadystatechange:存盤函式(或函式名),每當readyState屬性改變時,就會呼叫該函式。
簡單來說就是發送一個請求后，客戶端無法確定是什么時候會完成這個請求，所以需要用事件來捕獲請求的狀態，XMLHttpRequest物件提供了onreadyStateChange事件實作這一功能。這類似于回呼函式的做法。
當readyState等于4且status為 200 時，表示回應已就緒：
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
console.log(txt);
}
}
4、XMLHttpRequest 將頁面資料提交給服務器
跟從服務器上獲取資料的步驟一樣，只不過變數之間的賦值位置交換了。
小結：從服務器上獲取資料中服務器資料是以json形式，并且要進行轉義。
將頁面資料提交給服務器要進行字串的拼接。
注意：當使用post提交方式提交資料的時候，要加上這句代碼，指定回應頭：
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/54488.html
標籤：非技術區
下一篇：這樣遞增的表單怎么做？