ajax的步驟與封裝ajax

今天和大家聊下如何ajax的工作原理和如何封裝ajax.

1.什麼是ajax

ajax技術核心是xmlhttprequest物件(簡稱xhr)，這是由微軟首先引入的乙個特性，其他瀏覽器提供商後來都提供了相同的實現。在xhr出現之前，ajax式的通訊必須借助一些hack手段來實現，大多數是使用隱藏的框架或內嵌框架。

簡單來說，它是一門與服務端進行資料交換的技術。

2.何為同步

ajax的核心的思想就是非同步，那麼什麼是非同步，什麼是同步呢？我在這裡以php為例。乙個很常見的表單提交。樣式也是採用bootstrap

html (傳統表單提交)

class="container">div>

在傳統的表單提交中，是同步互動的方式，也就是說它會發生頁面的跳轉，這麼沒有問題的。

用get方式，與post方式類似。我們在這裡要注意，前台是以什麼形式向後台發起請求的呢？我們開啟控制台中的network

我們看到username=123&password=123它是以這種方式來傳送的，get方式也是一樣，這個很重要

ajax它是分為4個階段:

1.例項化乙個xhr物件

var xhr = new xmlhttprequest()

2.連線伺服器

xhr.open("get","api/data.php",true)

3.向伺服器傳送資料

xhr.send()

4.等待伺服器返回資料onreadystatechange

使用非同步呼叫的時候，需要觸發readystatechange事件，然後檢測readystate屬性即可
然後在判斷status狀態， 
完整**:
//1.例項化乙個xhr物件

//2.連線伺服器
xhr.open("get","api/data.php",true)
//3.向伺服器傳送請求
xhr.send()
// open()
// 1.開啟方式
// 2.位址
// 3.是否非同步 非同步:阻塞: 前面的**不會影響到後面的** 同步:前面的**會影響到後面的**
// send() //傳送資料
//4.等待伺服器返回的結果 onreadychange 方法
xhr.onreadystatechange = function
() }
}
5.封裝ajax()

function

ajax
(options)else
if(options.type == "get")
xhr.onreadystatechange = function
() }
}function
formsparams
(data)
return arr.join("&");
}
 
ajax請求步驟 和 簡易封裝
建立非同步物件var xhr 設定 請求行 open 請求方式，請求url get請求如果有引數就需要在url後面拼接引數，xhr.open get validate.php?username name post如果有引數，就在請求體中傳遞 xhr.open post validate.php 設定...
實現Ajax的步驟和封裝函式
實現ajax的步驟 第一步 建立乙個xmlhttprequest物件 var xhr null 標準瀏覽器以及ie6以上版本瀏覽器使用xmlhttprequest物件 ie6及一下版本瀏覽器使用activexobject microsoft.xmlhttp 建立。第二步 使用xmlhttpreque...
原生ajax步驟詳解以及簡單封裝
一原生ajax詳解 二簡單封裝ajax 最後把 封裝起來,封裝起來以後，要給這個函式加上乙個引數url.引數是為了替換要讀取的檔名 function ajax url,fnsucc else ajax.open get url,true 把要讀取的引數的傳過來。ajax.send ajax.onre...