成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

AJAX原理和實現(xiàn)方式

missonce / 756人閱讀

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

JSONP發(fā)展

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

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

a標(biāo)簽可以發(fā)GET請求，會刷新頁面或新開頁面

img標(biāo)簽可以發(fā)GET請求，只能以圖片方式展示

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

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

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

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

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

有沒有什么方式可以實現(xiàn)

get、post、put、delete請求都行

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

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

AJAX

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

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

滿足下面的條件就是AJAX

使用 XMLHttpReques 發(fā)請求

服務(wù)器返回 XML 格式的字符串

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

XMLHttpRequest 的用法

使用 XMLHttpRequest 三步驟：

要用 XMLHttpRequest 構(gòu)造一個對象

調(diào)用 open() 方法

調(diào)用 send() 方法

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

這個請求是同步的，瀏覽器會等到服務(wù)器響應(yīng)之后繼續(xù)執(zhí)行，響應(yīng)之后的相關(guān)屬性：
responseText：響應(yīng)主體返回的文本
status：響應(yīng)的 HTTP 狀態(tài)
statusText：響應(yīng)的 HTTP 狀態(tài)說明

在接收到響應(yīng)后，應(yīng)該這樣檢查兩種狀態(tài)

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()

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

值 狀態(tài) 描述
0 UNSENT(未打開) open()方法還未被調(diào)用
1 OPENED(未發(fā)送) send()方法還未被調(diào)用
2 HEADERS_RECEIVED(以獲取響應(yīng)頭) send()方法已經(jīng)被調(diào)用，響應(yīng)頭和響應(yīng)狀態(tài)已經(jīng)返回
3 LOADING(正在下載響應(yīng)體) 響應(yīng)體下載中；responseText中已經(jīng)獲取部分?jǐn)?shù)據(jù)
4 DONE(請求完成) 整個請求過程已完畢

只要readyState屬性值一變化，就會觸發(fā)一次readystatechange事件，可以利用這個事件來檢測每次狀態(tài)變化后的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()

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

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


myButton.addEventListener("click",function(){
    let request = new XMLHttpRequest()
    request.onreadystatechange = function(){    //盡量往上放，不會錯過任何一個狀態(tài)，放在下面的話會錯過之前的狀態(tài)
        console.log(request.readyState)
        if(request.readyState === 4){        //請求完成
            if(request.status === 200){            //請求成功
                let string = request.responseText
                //把符合 JSON 語法的String 轉(zhuǎn)換成 JS 對應(yīng)的 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()
})

服務(wù)器上面就要這樣寫

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 通信只能訪問同一個域下的資源，簡單的說如果不是同一個網(wǎng)站，不能送 AJAX 請求，它是狀態(tài)碼status為0。

只有協(xié)議+端口+域名一模一樣才允許發(fā) AJAX 請求
因為 AJAX 可以讀取響應(yīng)內(nèi)容，因此瀏覽器不允許你這樣做

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

SRJ方案

CORS方案

SRJ 方案之前已經(jīng)講過了，這里不在重復(fù)，可以看：JSONP技術(shù)棧

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/107795.html

相關(guān)文章

  • Ajax的原理和實現(xiàn)步驟

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

    Harpsichord1207 評論0 收藏0

  • Ajax的原理和編程步驟

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

    phpmatt 評論0 收藏0

  • 深入淺出Ajax

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

    megatron 評論0 收藏0

  • ajax跨域，這應(yīng)該是最全的解決方案了

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

    ytwman 評論0 收藏0

  • javascript跨域

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

    PingCAP 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<