原生Ajax發送get、post請求每一步

說明

發送Ajax的請求的核心對象是XMLHttpRequest，因此我們需要了解該對象的相關屬性和方法

方法(圖一)

屬性(圖二)

第一步：創建 XMLHttpRequest對象，下面都簡寫為 xhr對象

由於XMLHttpRequest不兼容IE6及以下的瀏覽器，因此在IE6及以下的瀏覽器不能使用XMLHttpRequest創建 xhr對象，使用ActiveXObject('Microsoft.XMLHTTP')代替。但是我寫好之后測試了一波，IE5好像支持 XMLHttpRequest對象，IE6沒測，因此技術不斷更新，現在看到的不一定是對的。還需要自己動手測試以下。

 var xhr = null
 if (window.XMLHttpRequest){//如果瀏覽器存在這個對象 則以這種方式創建
     xhr = new XMLHttpRequest()
 } else{//否則 以下面這種方式
     xhr = new ActiveXObject('Microsoft.XMLHTTP')
 }

 //或者使用 try catch  這里與上面的 if 語句 效果等同
 try{
     xhr = new XMLHttpRequest()
 }catch(e){
     xhr = new ActiveXObject('Microsoft.XMLHTTP')
 }

第二步：准備發送，調用open方法

xhr.open(type, url, boolean)，該方法具有三個參數。

type：請求的方式，可以是以下這些值: GET、POST、DELETE、OPTIONS、HEAD、PUT、TRACE、CONNECT，用的最多的是 GET、POST請求。
url： 請求路徑和參數。路徑和參數以?為分割線例如 : http://localhost:3000?uname="車神-黃傑&age=23"
boolean：操作方式，true(默認值) --->異步發送請求 false ---> 同步發送請求。

第三步：發送，調用send方法

xhr.send()

GET請求：最好傳入null，有些瀏覽器約定好了，在發送GET請求時不傳入null會報錯。
POST請求：傳入向服務器發送的數據。

向服務器發送數據

GET請求

此時數據由open方法傳入，數據拼接在第二個參數請求路徑的后面 以？為分隔符。
在IE瀏覽器中，請求參數存在中文會出現亂碼 此時需要對請求參數進行編碼 使用encodeURI(parme)解決兼容性。
encodeURI() 可把字符串作為 URI 進行編碼 但是對於一些ASCLL的字母或者數字不會進行編碼， 一些特殊的符號也不會進行編碼 例如_ . ! ~ * ' ( ) 等
例如encodeURI('宿舍') 此時結果為 %E5%AE%BF%E8%88%8D 。

 var parme = 'username=' + "車神-黃傑" + '&paw='+ 123
 //在IE瀏覽器會出現亂碼
 //xhr.open('GET', 'http://localhost:3000/?' + parme, true)
 xhr.open('GET', 'http://localhost:3000/?' + encodeURI(parme), true)

POST請求

在發送GET請求的時候，send()方法傳入null，而在POST請求中，傳入需要發送給服務器的數據。
此時不需要對請求字符串進行編碼，但是需要設置Content-Type為application/x-www-form-urlencoded。

 var parme = 'username=' + "車神-黃傑" + '&paw='+ 123
 //調用open方法
 xhr.open('POST', 'http://localhost:3000/', true)
 //設置Content-Type 
 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
 //發生數據
 xhr.send(parme)

第四步：處理請求

綁定 onreadystatechange事件
readyState 為 4說明收到數據
status 為 200 表示數據完整

 xhr.onreadystatechange = function () {
     // 狀態為4 表示收到數據
     if (xhr.readyState === 4){
         //狀態碼為 200 表示數據完整
         if (xhr.status === 200){
             //接收並處理數據
             var rel = xhr.responseText       
         }
     }
 }

示例

主要的事件 onreadystatechange，屬性readyState、status，請看圖一、圖二即可

GET

 getAjax()
 function getAjax(){		
    //發送Ajax的步驟
    var parme = 'username=' + "車神-黃傑" + '&paw='+ 123
    //第一步： 創建XMLHttpRequest對象
    var xhr = null
    if (window.XMLHttpRequest){//如果瀏覽器存在這個對象 則以這種方式創建
         xhr = new XMLHttpRequest()
    } else{//否則 以下面這種方式
         xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    //第二步 准備發送 調用opent方法 (有三個參數) 拼接數據
    xhr.open('GET', 'http://localhost:3003/?' + encodeURI(parme), true)
    //第三步 發送 調用send方法
    xhr.send(null)//get請求 為null
    //第四步處理請求 綁定事件onreadystatechange
    xhr.onreadystatechange = function () {
        // 狀態為4 表示收到數據
        if (xhr.readyState === 4){
            //狀態碼為 200 表示數據完整
            if (xhr.status === 200){
                //接收並處理數據
                var rel = xhr.responseText
                //接收的是json數據   使用JSON.parse()轉為js對象
                console.log("GET: " + JSON.parse(rel).msg)
            }
        }
    }
 }

POST

 postAjax()
 function postAjax(){
    //發送Ajax的步驟
    var parme = 'username=' + "車神-黃傑" + '&paw='+ 123
    //第一步： 創建XMLHttpRequest對象
    var xhr = null
    if (window.XMLHttpRequest){//如果瀏覽器存在這個對象 則以這種方式創建
         xhr = new XMLHttpRequest()
    } else{//否則 以下面這種方式
         xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    //第二步 准備發送 調用opent方法 (有三個參數) 拼接數據
    xhr.open('POST', 'http://localhost:3003/?', true)
    //第三步 發送 調用send方法
    //設置Content-Type
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(parme)//get請求 為null
    //第四步處理請求 綁定事件onreadystatechange
    xhr.onreadystatechange = function () {
        // 狀態為4 表示收到數據
        if (xhr.readyState === 4){
            //狀態碼為 200 表示數據完整
            if (xhr.status === 200){
                //接收並處理數據
                var rel = xhr.responseText
                //接收的是json數據   使用JSON.parse()轉為js對象
                console.log("POST: " + JSON.parse(rel).msg)
            }
        }
    }
 }

node簡單服務器 只是部分代碼

 //GET
 router.get('/', (req, res) =>{
    res.json({"msg": "發生成功", "code": 1})
 })
 //POST
 router.post('/', (req, res) =>{
    res.json({"msg": "發生成功", "code": 1})
 })

打印結果