AJAX原理和實現方式

missonce 發布于2019-08-26 11:54 / 726人閱讀

摘要：隨后也跟進抄襲了，取名，并被納入規范全稱翻譯成中文異步的和技術的核心是對象簡稱，可以在不刷新頁面頁面也能取得新的數據。注意請求和響應都不包含信息。

JSONP發展

了解了JSONP技術棧后，知道了JSONP是AJAX出現之前后端交互最好的解決方案，但它依然沒解決問題，用JSONP只能發送GET請求，不能發其他請求

form表單可以發GET請求，也可以發POST請求，POST請求沒有請求參數，但是會刷新頁面或新開頁面

a標簽可以發GET請求，會刷新頁面或新開頁面

img標簽可以發GET請求，只能以圖片方式展示

let image = document.createElement("img")
img.src = "/xxx"
imgae.onload = () => {}
imgae.onerror = () => {}

link可以發GET請求，但是只能以CSS、favicon的形式展示

let link = document.createElement("link")
link.src = "/xxx"
document.head.appendChild(link)
link.onload = () => {}
link.onerror = () => {}

用script可以發GET請求，但是只能以腳本的形式運行

let script = document.createElement("script")
script.src = "/xxx"
document.body.appendChild(script)
script.onload = () => {}
script.onerror = () => {}

有沒有什么方式可以實現

get、post、put、delete請求都行

想以什么形式展示就以什么形式展示

微軟的突破
IE 5 率先在 JS 中引入 ActiveX 對象（API），使得 JS 可以直接發起 HTTP 請求。
隨后 Mozilla、 Safari、 Opera 也跟進（抄襲）了，取名 XMLHttpRequest，并被納入 W3C 規范

AJAX

AJAX 全稱 Async Javascript and XML 翻譯成中文：異步的 JavaScript 和 XML

Ajax 技術的核心是 XMLHttpRequest 對象（簡稱：XHR），可以在不刷新頁面頁面也能取得新的數據。

滿足下面的條件就是AJAX

使用 XMLHttpReques 發請求

服務器返回 XML 格式的字符串

JS 解析 XML，并更新局部頁面

XMLHttpRequest 的用法

使用 XMLHttpRequest 三步驟：

要用 XMLHttpRequest 構造一個對象

調用 open() 方法

調用 send() 方法

open() 方法接收三個參數：請求類型，請求 url，是否使用異步；
send() 方法接受一個參數：請求主體發送的數據。

這個請求是同步的，瀏覽器會等到服務器響應之后繼續執行，響應之后的相關屬性：
responseText：響應主體返回的文本
status：響應的 HTTP 狀態
statusText：響應的 HTTP 狀態說明

在接收到響應后，應該這樣檢查兩種狀態

let request = new XMLHttpRequest()
request.onreadystatechange = function(e){
    if(request.status >= 200 && request.status < 300 || request.status === 304){
        console.log(request.responseText)
    }else if(request.status >=400){
        console.log("錯誤信息：" + request.status)
    }
}
request.open("POST","http://jack.com:8889/xxx")
request.send()

大多數情況下，我們使用的是異步請求，才能 JS 繼續執行，不必等待響應，此時應該檢查readyState，這個屬性有5種取值：

值	狀態	描述
0	UNSENT(未打開)	open()方法還未被調用
1	OPENED(未發送)	send()方法還未被調用
2	HEADERS_RECEIVED(以獲取響應頭)	send()方法已經被調用，響應頭和響應狀態已經返回
3	LOADING(正在下載響應體)	響應體下載中；responseText中已經獲取部分數據
4	DONE(請求完成)	整個請求過程已完畢

只要readyState屬性值一變化，就會觸發一次readystatechange事件，可以利用這個事件來檢測每次狀態變化后的readystate的屬性值，通常我們只對readystate值為4進行檢測。

let request = new XMLHttpRequest()
request.onreadystatechange = function(e){
    if(request.readyState === 4){
        if(request.status >= 200 && request.status <= 300){
            console.log(request.responseText)
        }else if(request.status >=400){
            console.log("錯誤信息：" + request.status)
        }
    }
}
request.open("POST","http://jack.com:8889/xxx")
request.send()

響應返回的requestText永遠是字符串，早期使用的符合 XML 格式的字符串，現在使用的是符合 JSON 語法的字符串，前端拿到后可以用window.JSON.parse()來解析

具體來看一個例子：點擊按鈕發送一個 POST 請求


myButton.addEventListener("click",function(){
    let request = new XMLHttpRequest()
    request.onreadystatechange = function(){    //盡量往上放，不會錯過任何一個狀態，放在下面的話會錯過之前的狀態
        console.log(request.readyState)
        if(request.readyState === 4){        //請求完成
            if(request.status === 200){            //請求成功
                let string = request.responseText
                //把符合 JSON 語法的String 轉換成 JS 對應的 Object
                let object = window.JSON.parse(string)    //JSON.parse 是瀏覽器提供的，json3.js是著名的就是寫JSON.parse的
            }else if(request.status === 400){    //請求失敗
                console.log("錯誤信息：" + request.status)
            }
        }
    }
    request.open("POST","http://jack.com:8889/xxx")    //配置 request
    request.send()
})

服務器上面就要這樣寫

if(path === "/xxx" && method === "POST"){
    response.setHeader("Content-Type","text/json;charset=utf-8")
    response.write(`        //JSON語法
        {            //Http第四部永遠是 String，這里是符合 JSON 語法的
 String，不是 Object
            "note":{
                "to":"張三",
                "from":"李四",
                "heading":"打招呼",
                "content":"hi"
            }
        }
    `)
}

JavaScript 和 JSON 語法的不同之處

JS	JSON
undefined	沒有
null	null
["a","b"]	["a","b"]
function{}	沒有
{name:"frank"}	{"name":"frank"}
"frank"	"frank"
var a = {};a.self = a	搞不定(沒有變量)
{__proto__}	沒有原型鏈

跨域資源共享

Ajax 通信只能訪問同一個域下的資源，簡單的說如果不是同一個網站，不能送 AJAX 請求，它是狀態碼status為0。

只有協議+端口+域名一模一樣才允許發 AJAX 請求
因為 AJAX 可以讀取響應內容，因此瀏覽器不允許你這樣做

有時也需要合理的跨域請求，有兩種方法：

SRJ方案

CORS方案

SRJ 方案之前已經講過了，這里不在重復，可以看：JSONP技術棧

這里講解一個 CORS（Cross-Origin Resource Sharing，跨域源資源共享），基本思想就是使用自定義的 HTTP 響應頭：

在服務器上，共享的資源加上響應頭response.setHeader("Access-Control-Allow-Origin","http://jack.com:8889")就可以了。

如果沒有這個頭部，或者有這個信息但源信息不匹配，請求還是成功，但服務器給的響應沒有響應體（第四部分）。注意：請求和響應都不包含 Cookie 信息。

GPU云服務器云服務器 ajax工作原理 Ajax實現機制 get實現ajax ajax實現百度搜索

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107795.html

Ajax的原理和實現步驟

摘要：如果我們假設文件和文件位于相同的目錄，那么代碼是這樣的其他方法如下編程步驟創建對象設置請求方式調用回調函數發送請求處理返回的結果創建對象一般來說手寫的時候，首先需要判斷該瀏覽器是否支持對象，如果支持則創建該對象，如果不支持則創建對象。 Ajax的簡介什么是Ajax AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）...

Harpsichord1207 2019-08-26 18:42 評論0 收藏0
Ajax的原理和編程步驟

摘要：如果我們假設文件和文件位于相同的目錄，那么代碼是這樣的其他方法如下編程步驟創建對象設置請求方式調用回調函數發送請求處理返回的結果創建對象一般來說手寫的時候，首先需要判斷該瀏覽器是否支持對象，如果支持則創建該對象，如果不支持則創建對象。 Ajax的簡介什么是Ajax AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）...

phpmatt 2019-08-26 18:42 評論0 收藏0
深入淺出Ajax

摘要：在接收響應期間持續不斷地觸發。在請求發生錯誤時觸發。在通信完成或者觸發或事件后觸發。已經接收到部分響應數據。基于標準被廣泛支持。破壞程序的異常處理機制。原文（我的GitHub）：https://github.com/liangfengbo/frontend-ability/issues/1 學習大綱理解Ajax的工作原理 Ajax核心-XMLHttpRequest對象封裝Aja...

megatron 2019-08-22 18:39 評論0 收藏0
ajax跨域，這應該是最全的解決方案了

摘要：關于，強烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個實現原理圖簡化版如何判斷是否是簡單請求瀏覽器將請求分成兩類簡單請求和非簡單請求。前言從剛接觸前端開發起，跨域這個詞就一直以很高的頻率在身邊重復出現，一直到現在，已經調試過N個跨域相關的問題了，16年時也整理過一篇相關文章，但是感覺還是差了點什么，于是現在重新梳理了一下。個人見識有限，如有差錯，請多多見諒，歡迎提出iss...

ytwman 2019-08-22 11:21 評論0 收藏0
javascript跨域

摘要：實現跨域的原理通過方式請求載入并執行一個文件，相當于通過的形式的導入一個外部的方法語法該函數是簡寫的函數，等價于在中，您可以通過使用形式的回調函數來加載其他網域的數據，如。將自動替換為正確的函數名，以執行回調函數。更多詳情見http://blog.zhangbing.club/Ja... 最近在項目開發的過程中遇到一些Javascript 跨域請求的問題，今天抽空對其進行總結一下，以...

PingCAP 2019-08-22 18:10 評論0 收藏0