AJAX淺談

Youngs 發布于2019-08-22 14:00 / 743人閱讀

摘要：用規范重新封裝該函數什么是同源策略協議域名端口一摸一樣跨域就是告訴后端哪個域名可以訪問，后端中寫入你請求的網站所在一般現在跨域用跨域比較多

ajax的含義

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

利用XMLHttpRequest發請求

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

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

代碼：

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

        } else if(httpRequest.status >= 400) {
            console.log("說明請求失敗")
        }
    }
})
httpRequest.send("設置request第四部分")       //GET請求不會設置第四部分

用AJAX設置請求頭

第一部分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獲取響應頭

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

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

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

第四部分 : httpRequest.responseText

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

自己封裝jQuery的ajax函數

//傳入一個對象，該對象具有url,method等方法和回調函數。
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規范重新封裝該函數：

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

什么是同源策略？

協議+域名+端口一摸一樣

cors跨域（Cross-Origin Resource Sharing）

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

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

一般現在跨域用cors跨域比較多

GPU云服務器云服務器設計淺談淺談javascript 淺談sdwan解決方案淺談正則表達式

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

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

淺談contentType = false

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

renweihub 2019-08-21 14:38 評論0 收藏0
淺談JSONP

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

binta 2019-08-21 10:41 評論0 收藏0
淺談 JavaScript 運行機制

摘要：以多線程的形式，允許單個任務分成不同的部分進行運行。提供協調機制，一方面防止進程之間和線程之間產生沖突，另一方面允許進程之間和線程之間共享資源。主線程會不斷的重復上訴過程。眾所周知，js是單線程的，說到線程，我們首先來仔細辨析一下線程和進程的知識。一、進程與線程阮一峰老師的一篇文章寫的很好 cpu會給當前進程分配資源，進程是資源分配的最小單位，進程的資源會分配給線程使用，線程是C...

URLOS 2019-08-22 18:13 評論0 收藏0
淺談 Web 中前后端模板引擎的使用

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

chenjiang3 2019-08-20 11:56 評論0 收藏0
淺談Javascript中Promise對象的實現

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

caiyongji 2019-08-21 10:18 評論0 收藏0