Ajax入門篇(一),請求類型get&&post的區別
AJAX
* Asynchronous JavaScript and Xml
* 直譯中文 - javascript和XML的異步
* (不嚴格的定義)客戶端與服務器端進行交互,而無需刷新當前頁面的技術,稱之爲Ajax
* Ajax實現的是B/S架構下的異步交互
* 實現異步交互的技術
* <iframe src="">元素
* 同步與異步的區別
* 同步交互
* 執行速度相對比較慢
* 響應的是完整的HTML頁面
* 異步交互
* 執行速度相對比較快
* 響應的是部分數據
* Ajax具有核心對象
* XMLHttpRequest對象
* 創建XMLHttpRequest對象
function getXhr(){
// 聲明XMLHttpRequest對象
var xhr = null;
// 根據瀏覽器的不同情況進行創建
if(window.XMLHttpRequest){
// 表示除IE外的其他瀏覽器
xhr = new XMLHttpRequest();
}else{
// 表示IE瀏覽器
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
// 創建核心對象
var xhr = getXhr();
* Ajax的核心對象
* 屬性
* readyState
* status
* 方法
* open() - 與服務器端建立連接
* send() - 向服務器端發送請求
* 事件
* onreadystatechange事件
* 作用 - 監聽服務器端的通信狀態改變
* 實現Ajax的異步交互步驟
* 創建XMLHttpRequest核心對象
* 固定寫法 - 獨立編寫
* 與服務器端建立連接
* 使用XMLHttpRequest對象的open(method,url)方法
* method - 設置當前請求的類型
* url - 設置當前請求的地址
* 向服務器端發送請求
* 使用XMLHttpRequest對象的send(請求參數)方法
* 請求參數的格式 - key=value
* 接收服務器端的響應數據
* 使用XMLHttpRequest對象的onreadystatechange事件,監聽服務器端的通信狀態
* 使用XMLHttpRequest對象的readyState屬性,判斷服務器端的當前狀態(0-4)
* 使用XMLHttpRequest對象的status屬性,判斷服務器端的狀態碼(200)
* 使用XMLHttpRequest對象的responseText屬性,接收服務器端的響應數據
* GET與POST的區別
* GET請求類型
* send()方法不起作用,但是不能被省略
xhr.send(null);
* 請求參數 - 添加到URL?key=value
* POST請求類型
* send()方法起作用
* 在send()方法被調用前,使用setRequestHeader()方法設置請求頭信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
* 使用Ajax的原則
* 小則怡情,大則傷身
*
* Asynchronous JavaScript and Xml
* 直譯中文 - javascript和XML的異步
* (不嚴格的定義)客戶端與服務器端進行交互,而無需刷新當前頁面的技術,稱之爲Ajax
* Ajax實現的是B/S架構下的異步交互
* 實現異步交互的技術
* <iframe src="">元素
* 同步與異步的區別
* 同步交互
* 執行速度相對比較慢
* 響應的是完整的HTML頁面
* 異步交互
* 執行速度相對比較快
* 響應的是部分數據
* Ajax具有核心對象
* XMLHttpRequest對象
* 創建XMLHttpRequest對象
function getXhr(){
// 聲明XMLHttpRequest對象
var xhr = null;
// 根據瀏覽器的不同情況進行創建
if(window.XMLHttpRequest){
// 表示除IE外的其他瀏覽器
xhr = new XMLHttpRequest();
}else{
// 表示IE瀏覽器
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
// 創建核心對象
var xhr = getXhr();
* Ajax的核心對象
* 屬性
* readyState
* status
* 方法
* open() - 與服務器端建立連接
* send() - 向服務器端發送請求
* 事件
* onreadystatechange事件
* 作用 - 監聽服務器端的通信狀態改變
* 實現Ajax的異步交互步驟
* 創建XMLHttpRequest核心對象
* 固定寫法 - 獨立編寫
* 與服務器端建立連接
* 使用XMLHttpRequest對象的open(method,url)方法
* method - 設置當前請求的類型
* url - 設置當前請求的地址
* 向服務器端發送請求
* 使用XMLHttpRequest對象的send(請求參數)方法
* 請求參數的格式 - key=value
* 接收服務器端的響應數據
* 使用XMLHttpRequest對象的onreadystatechange事件,監聽服務器端的通信狀態
* 使用XMLHttpRequest對象的readyState屬性,判斷服務器端的當前狀態(0-4)
* 使用XMLHttpRequest對象的status屬性,判斷服務器端的狀態碼(200)
* 使用XMLHttpRequest對象的responseText屬性,接收服務器端的響應數據
* GET與POST的區別
* GET請求類型
* send()方法不起作用,但是不能被省略
xhr.send(null);
* 請求參數 - 添加到URL?key=value
* POST請求類型
* send()方法起作用
* 在send()方法被調用前,使用setRequestHeader()方法設置請求頭信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
* 使用Ajax的原則
* 小則怡情,大則傷身
*
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.