一、什么是Ajax？ Ajax(Asynchronous JavaScript and XML):異步的js和XML
是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術
Ajax(Asynchronous JavaScript and XML):異步的js和XML
是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術
組成：js，css，DOM，XMLHttpRequest物件
二、作業原理：
- Ajax提供與服務器
異步通信的能力，可在web頁面觸發js事件中中服務器發出異步請求，如執行更新或查詢資料庫 - Ajax的核心是js物件XMLHttpRequest，改物件在IE5中首次引入，使用戶通過js向服務器提出請求并處理相應，
不阻塞用戶 - 當web服務器的相應回傳時，使用js回呼函式和CSS相應的
更新頁面的區域頁面，而不是重繪整個頁面 - 在頁面與服務器互動的程序中
不中斷用戶操作，用戶甚至察覺不到瀏覽器正在與服務器進行通信
三、XMLHttpRequest 物件
XMLHttpRequest 用于在后臺與服務器交換資料，這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新，
1. 創建XMLHttpRequest物件
variable=new XMLHttpRequest();
2. 獲取XMLHttpRequest物件
瀏覽器內核不同獲取方式不同
底層代碼:
// 獲取物件
var xmlhttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){ //IE
xmlhttp=new ActiveXObject('Microdoft.XMLHTTP')
}else if(window.XMLHttpRequest){ //Mozilla
xmlhttp=new XMLHttpRequest()
}
}
3. XMLHttpRequest的方法
| 方法 | 屬性 |
|---|---|
| open(‘method’,‘url’) | 建立服務器的呼叫 ，method：請求的型別；GET 或 POST ，url：檔案在服務器上的位置 |
| send(content) | 向服務器發送資料 ，content：僅用于 POST 請求 |
4. XMLHttpRequest的屬性
- Onreadystatechange 請求狀態發生改變時，指定事件處理函式
- readyState 請求回應程序中的狀態碼
| 狀態碼 | 含義 |
|---|---|
| 0 | 未初始化 |
| 1 | 正在加載 |
| 2 | 加載完成 |
| 3 | 互動 |
| 4 | 完成 |
- responseText 服務器端的相應資訊
- status 服務器端回應的狀態碼
| 狀態碼 | 含義 |
|---|---|
| 404 | 請求的服務器資源不存在 |
| 500 | 服務器端錯誤 |
| 304 | 請求方式錯誤 |
四、jQuery對Ajax的封裝
1. 向遠程服務器發送get請求
$.get(url,[data]m[callback],[type])
2. 向遠程服務器發送post請求
$.post(url,[data]m[callback],[type])
3.
$.ajax({
url:'遠程服務器地址',
type:'請求方式',
data:{
引數名1：引數值1,
引數名2：引數值2,
...
}
dataType:'服務器回應的資料型別',
success:function(result){
//請求成功后的回呼函式
}
error:function(result){
//請求失敗后的回呼函式
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/259757.html
標籤：其他