大家好，我是IT修真院武漢分院第10期學員余佳貝，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網(wǎng)js任務(wù)4，深度思考中的知識點——什么是ajax
一.背景介紹
在 2005 年，Google 通過其 Google Suggest 使 AJAX 變得流行起來。Google Suggest 使用 AJAX 創(chuàng)造出動態(tài)性極強的 web 界面：當我們在谷歌的搜索框輸入關(guān)鍵字時，JavaScript 會把這些字符發(fā)送到服務(wù)器，然后服務(wù)器會返回一個搜索建議的列表。
AJAX的全稱是： Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）
AJAX不是編程語言 是一種無需重載整個網(wǎng)頁的情況下與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的技術(shù)
二.知識剖析
2.1同步和異步
同步
傳統(tǒng)的網(wǎng)頁(沒有使用ajax的網(wǎng)頁)，想要更新內(nèi)容或者提交一個表單，必須重載整個網(wǎng)頁
異步
頁面上的操作與服務(wù)器端的操作互相之間不會造成堵塞
比如說在填寫表單的時候不小心填寫錯誤? 錯誤信息會實時的顯示在頁面上 這個過程不會有整個頁面的刷新 也不會有個整個頁面的提交和等待
2.2XMLHttpRequest
xhr對象是ajax的基礎(chǔ) 在xhr對象沒有出現(xiàn)之前 網(wǎng)頁開發(fā)采用的都是同步的方式 有了xhr對象之后 才可以進行異步的操作
一個典型的xhr建立一個ajax異步請求的過程大概就是這樣
var request = new XMLHttpRequest();//新建一個xhr對象
request.open('GET','DEMO.php',true);//調(diào)用xhr對象的post方法
request.send();//將請求發(fā)送到服務(wù)器
request.onreadystatechange=function(){//對這個請求過程進行監(jiān)聽 并作出判斷
if (request.readyState==4 && request.status==200)
{
document.getElementById("myDiv").innerHTML=request.responseText;
}
}
我們可以把這段代碼拆分一下? 看看open(),send()是什么意思.
open(method,url,async),send()是xhr對象向服務(wù)器發(fā)送請求的兩個方法 open里面有3個參數(shù)? 規(guī)定請求的類型、URL 以及是否異步處理請求。method：請求的類型；GET 或 POST url：文件在服務(wù)器上的位置? ?async：true（異步）或 false（同步）
三.常見問題
使用post提交的時候沒有添加請求頭信息
四.解決方案
在post和send之間加上content-Type: application/x-www-form-urlencoded
五.編碼實戰(zhàn)
六.拓展思考
readyState值說明
狀態(tài)0，未初始化，表明對象已經(jīng)建立，但未初始化，也就是尚未調(diào)用Oen方法創(chuàng)建Http請求。
狀態(tài)1，初始化，表明對象已經(jīng)建立，但是未調(diào)用send方法發(fā)送Http請求
狀態(tài)2，發(fā)送數(shù)據(jù)，表明send方法已經(jīng)被調(diào)用，但是當前的狀態(tài)以及Http頭未知。
狀態(tài)3，數(shù)據(jù)傳送中，表明服務(wù)器已經(jīng)接受部分數(shù)據(jù)，因為響應(yīng)時間以及Http頭補全，這時通過 response系列方法獲取部分數(shù)據(jù)會出現(xiàn)錯誤
狀態(tài)4，傳送完成，數(shù)據(jù)接收完畢，此時可以通過response系列方法獲取完整的回應(yīng)數(shù)據(jù)。
七.參考文獻
https://www.w3cschool.cn/ajax/
八.更多討論
1.get（）與post（）的區(qū)別是什么？
與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：
無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠
2.如何將數(shù)據(jù)發(fā)送到服務(wù)器？
如果需要像 HTML 表單那樣 POST 數(shù)據(jù)，使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規(guī)定要發(fā)送的數(shù)據(jù)
3.jq的ajax是如何實現(xiàn)的？
jQuery load() 方法是簡單但強大的 AJAX 方法。
load() 方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中。
