国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

AJAX淺談

Youngs / 749人閱讀

摘要：用規(guī)范重新封裝該函數(shù)什么是同源策略協(xié)議域名端口一摸一樣跨域就是告訴后端哪個(gè)域名可以訪問，后端中寫入你請(qǐng)求的網(wǎng)站所在一般現(xiàn)在跨域用跨域比較多

ajax的含義

ajax是異步JavaScript和xml（asynchronous JavaScript and xml）：

利用XMLHttpRequest發(fā)請(qǐng)求

服務(wù)器返回XML格式的字符串，但后面一般使用JSON

JS解析XML，并更新局部頁(yè)面

代碼：

let httpRequest = new XMLHttpRequest()      //聲明一個(gè)xmlhttprequest對(duì)象
httpRequest.open("GET", "/xxx")             // 配置request
httpRequest.setRequestHeader("Content-Type", "x-www-form-urlencoded")   // 設(shè)置請(qǐng)求頭第二部分
httpRequest.onreadystatechange = ( => { //隨便放在哪個(gè)位置，監(jiān)聽狀態(tài)的變化 
    if(httpRequest.readyState === 4) {      
        console.log("請(qǐng)求響應(yīng)完畢")
        console.log(httpRequest.status)
        console.log(httpRequest.statusText)
        if(httpRequest.status >= 200 && httpRequest.status < 300>) {
            console.log("請(qǐng)求成功")
            console.log(httpRequest.getAllResponseHeaders())
            console.log(httpRequest.responseText)
            let string = httpRequest.responseText   //取得響應(yīng)體
            let object = window.JSON.parse(string)  //把符合JSON語法的字符串轉(zhuǎn)換為JS對(duì)象
            //JSON.parse是瀏覽器提供的

        } else if(httpRequest.status >= 400) {
            console.log("說明請(qǐng)求失敗")
        }
    }
})
httpRequest.send("設(shè)置request第四部分")       //GET請(qǐng)求不會(huì)設(shè)置第四部分
用AJAX設(shè)置請(qǐng)求頭

第一部分GET /XXX HTTP/1.1 : httpRequest.open("get", "/XXX")

第一部分HOST: jack.com:8002 : httpRequest.open("get", "http://jack.com:8002/")

第二部分Content-Type : application/x-www-url-encoded : httpRequest.setRequestHeader("Content-Type", "application/x-www-url-encoded")

第四部分a = 1&b = 2 : httpRequest.send("a = 1&b = 2")

用AJAX獲取響應(yīng)頭

第一部分HTTP/1.1 200 OK : httpReuqest.status & httpRequest.statusText

第二部分Content-Type : application/x-www-url-encoded : httpRequest.getResponseHeader("Content-Type")

所有的第二部分 : httpRequest.getAllResponseHeaders()

第四部分 : httpRequest.responseText

現(xiàn)在一般不使用XML,而使用JSON，JSON是道格拉斯寫的一本輕量型的文本語言

自己封裝jQuery的ajax函數(shù) 
//傳入一個(gè)對(duì)象，該對(duì)象具有url,method等方法和回調(diào)函數(shù)。
window.jQuery.ajax = function({url, method, body, successFn, failFn, headers}) {
    let request = new XMLHttpRequest()
    request.open(method, url)
    for(let key in headers) {
        let value = headers[key]
        request.setRequestHeader(key, value)
    }
    
    request.onreadystatechange = () => {
        if(request.readystate === 4) {
            if(request.status >= 200 && request.status < 300) {
                successFn.call(undefined, request.responseText)
            } else if(request.status >= 400) {
                failFn.call(undefined, request)
            }
        }
    }
    request.send(body)
}
用promise規(guī)范重新封裝該函數(shù)： 
window.jQuery.ajax = function({url, method, body, headers}) {
    return new Promise(function(resolve, reject) {
        let request = new XMLHttpRequest()
        request.open(method, url)
        for(let key in headers) {
            let value = headers[key]
            request.setRequestHeader(key, value)
        }
    
        request.onreadystatechange = () => {
            if(request.readystate === 4) {
                if(request.status >= 200 && request.status < 300) {
                    resolve.call(undefined, request.responseText)
                } else if(request.status >= 400) {
                    reject.call(undefined, request)
                }
            }
        }
        request.send(body)
    })
}

window.jQuery.ajax({
    url: "/baidu.com",
    method: "GET",
    headers: {
        "Content-Type" : "application/x-www-form-urlencoded"
    }
}).then(
    (responseText) => {
        console.log(responseText)
    },
    (request) => {
        console.log(request)
    }
)
什么是同源策略？

協(xié)議+域名+端口一摸一樣

cors跨域 （Cross-Origin Resource Sharing）

就是告訴后端哪個(gè)域名可以訪問，后端node中寫入

response.setHeader("Access-Control-Allow-Origin", "你請(qǐng)求的網(wǎng)站所在")

一般現(xiàn)在跨域用cors跨域比較多

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/92747.html

相關(guān)文章

  • 淺談contentType = false

    摘要：起初，協(xié)議中沒有上傳文件方面的功能，直到為協(xié)議添加了這個(gè)功能。而我們?cè)谥性O(shè)置為是為了避免對(duì)其操作，從而失去分界符，而使服務(wù)器不能正常解析文件。 在剛接觸 JQuery 中的 ajax 時(shí)，對(duì)其 contentType 并沒有很在意，只是知曉它是代表發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型,通俗點(diǎn)說就是告訴服務(wù)器從瀏覽器提交過來的數(shù)據(jù)格式。 默認(rèn)值為contentType = applicatio...

    renweihub 評(píng)論0 收藏0

  • 淺談JSONP

    摘要：就這樣被發(fā)明了，利用的屬性不受同源策略的控制，作弊般地巧妙地逃過了瀏覽器的這一限制。然后，聲明這個(gè)回調(diào)函數(shù)。 這是我在13年初寫的文章，當(dāng)時(shí)懵懵懂懂寫下了自己對(duì)JSONP的理解。 文章原文 博客 歡迎訂閱 提到JSONP，我當(dāng)時(shí)在網(wǎng)上找了無數(shù)帖子也沒有看懂它。那些文章大同小異，都是講到JSONP原理以后就戛然而止，把我們這些初學(xué)者搞得云里霧里。所以，寫下這篇文章，希望對(duì)大家有幫助...

    binta 評(píng)論0 收藏0

  • 淺談 JavaScript 運(yùn)行機(jī)制

    摘要：以多線程的形式，允許單個(gè)任務(wù)分成不同的部分進(jìn)行運(yùn)行。提供協(xié)調(diào)機(jī)制，一方面防止進(jìn)程之間和線程之間產(chǎn)生沖突，另一方面允許進(jìn)程之間和線程之間共享資源。主線程會(huì)不斷的重復(fù)上訴過程。 眾所周知，js是單線程的，說到線程，我們首先來仔細(xì)辨析一下線程和進(jìn)程的知識(shí)。 一、進(jìn)程與線程 阮一峰老師的一篇文章寫的很好 cpu會(huì)給當(dāng)前進(jìn)程分配資源，進(jìn)程是資源分配的最小單位，進(jìn)程的資源會(huì)分配給線程使用，線程是C...

    URLOS 評(píng)論0 收藏0

  • 淺談 Web 中前后端模板引擎的使用

    摘要：前端模板的出現(xiàn)使得前后端分離成為可能。總結(jié)本文簡(jiǎn)單介紹了模板引擎在前后端的使用，下文我們回到，重點(diǎn)分析下的使用方式以及源碼原理。樓主對(duì)于模板引擎的認(rèn)識(shí)比較淺顯，有不正之處希望指出感謝 前言 這篇文章本來不打算寫的，實(shí)話說樓主對(duì)前端模板的認(rèn)識(shí)還處在非常初級(jí)的階段，但是為了整個(gè) 源碼解讀系列 的完整性，在深入 Underscore _.template 方法源碼后，覺得還是有必要記下此文，...

    chenjiang3 評(píng)論0 收藏0

  • 淺談Javascript中Promise對(duì)象的實(shí)現(xiàn)

    摘要：我們可以進(jìn)行適當(dāng)?shù)母倪M(jìn)，把回調(diào)函數(shù)寫到外面即使是改寫成這樣，代碼還是不夠直觀，但是如果有了對(duì)象，代碼就可以寫得非常清晰，一目了然，請(qǐng)看這樣函數(shù)就不用寫在的回調(diào)中了目前的標(biāo)準(zhǔn)中還未支持對(duì)象，那么我們就自己動(dòng)手，豐衣足食吧。 本文同步自我得博客：http://www.joeray61.com 很多做前端的朋友應(yīng)該都聽說過Promise（或者Deferred）對(duì)象，今天我就講一下我對(duì)Prom...

    caiyongji 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Youngs

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<