目錄
一.AJAX簡介
二.XMLHttpRequests對象
2.1XMLHttpRequests對象簡介
2.2創建XMLHttpRequests對象
2.3定義回調函數
2.4發送請求
?2.5XMLHttpRequests對象方法介紹
2.6XMLHttpRequests對象屬性
三.向服務器發送請求
3.1發送請求
3.2使用GET還是POST
3.3使用GET來發送信息
3.4POST請求
一.AJAX簡介
服務器向瀏覽器傳輸數據時，瀏覽器需要跳轉到一個新的“URL”或者“重新渲染網頁”，才可以接收來自服務器的數據，這對于現代用戶來說是不友好的，因為觀感極差
那么有沒有一種辦法可以使瀏覽器接收服務器的數據，并且不更新網頁只是動態的更新網頁的部分數據呢？
隨著這個問題“AJAX”應運而生，使用“AJAX”可以做到以下事情：
- 不刷新頁面更新網頁
- 在頁面加載后從服務器請求數據
- 在頁面加載后從服務器接收數據
- 在后臺向服務器發送數據
二.XMLHttpRequests對象
2.1XMLHttpRequests對象簡介
XMLHttpRequests對象是AJAX的基石
使用XMLHttpRequests對象允許前端向后端發送一個數據請求用來獲得數據
這個數據請求的過程可以分為下面"四大步”：
- 創建XMLHttpRequests對象
- 定義回調函數
- 打開XMHttpRequests對象
- 向服務器發送請求
2.2創建XMLHttpRequests對象
創建XMLHttpRequests對象的語法：
var myXMLR = new XMLHttpRequests();
2.3定義回調函數
回調函數是作為參數傳遞給另一個函數的函數
定義回調函數我們可以使用XMLHttpRequests對象提供的“onload()”函數，該函數用來指定當請求響應后應該執行的函數
xhttp.onload = function(){
? ? ? ? //當相應準備就緒時要做什么
}
2.4發送請求
向服務器發送請求，我們可以使用“open()”方法來打開XMLHttpRequests對象，再使用“send()”方法來發送請求
xhttp.open("open","ajax_info.txt");
xhttp.send();
?2.5XMLHttpRequests對象方法介紹
| 方法 | 描述 |
| new XMLHttpRequests() | 創建新的XMLHttpRequests對象 |
| abort() | 取消當前請求 |
| getAllResponseHeaders() | 返回頭部信息 |
| getReponseHeader() | 返回特定的頭部信息 |
| open(method,url,async,user,psw) | 規定請求
|
| send() | 向服務器發送請求，用于GET請求 |
| send(string) | 向服務器發送請求，用于POST請求 |
| setRequestHeader() | 將標簽/值對添加到要發送的標頭 |
2.6XMLHttpRequests對象屬性
| 屬性 | 描述 |
|---|---|
| onload | 定義接收到(加載)請求時要調用的函數 |
| onreadystatechange | 定義當readyState屬性發生變化時調用的函數 |
| readyState | 保存XMLHttpRequests的狀態
|
| responseText | 以字符串形式返回響應數據 |
| responseXML | 以XML數據返回響應數據 |
| status | 返回請求的狀態號
|
| statusText | 返回狀態文本,比如("OK"、"Not Found"等) |
ps：“當readyState為4且status為200時，響應就緒”
三.向服務器發送請求
3.1發送請求
在上面我們已經提到過，可以使用“open()”和“send()”方法搭配向服務器發送請求
| open(method,url,async,user,psw) | 規定請求
|
| send() | 向服務器發送請求，用于GET請求 |
| send(string) | 向服務器發送請求，用于POST請求 |
3.2使用GET還是POST
在大多數情況下，GET比POST更簡單更快
但在以下情況請考慮使用POST：
- 緩存文件不是選項(更新服務器上的文件或數據庫)
- 向服務器發送大量數據(POST無大小限制)
- 發送用戶輸入(可包含未知字符)，POST比GET更強大更安全
3.3使用GET來發送信息
如果想要使用GET來發送信息，可以在URL中構造信息：
xhttp.open("GET","demo.asp?fname=Bill&&name=Gates",true);
xhttp.send();3.4POST請求
一條簡單的POST請求：
xhttp.open("POST","demo_post.asp",true);
xhttp.send();
如果需要像HTML表單那樣POST數據，請通過setRequestHeader()添加一個HTTP頭部，并在send()方法中定義要發送的數據
例如：
xhttp.open("POST","ceshi.asp",true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhttp.send("fname=Bill&&name=Gates");
AZ 系列)
