[JavaScript] XMLHttpRequest記錄

時間 2020-06-29

標籤 javascript xmlhttprequest 記錄欄目 JavaScript 简体版

原文原文鏈接

XMLHttpRequest

使用 XMLHttpRequest 對象能夠和服務器進行交互,能夠獲取到數據,而無需讓整個頁面進行刷新.這樣 web 頁面能夠作到只更新局部頁面,下降了對用戶操做的影響.html

XMLHttpRequest 對象能夠用於獲取各類類型的數據,而不止是 xml,還支持 JSON，HTML 或者純文本node

本地服務器

let http = require("http");
let url = require("url");

const port = 3333;

http.createServer((request, response) => {
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.writeHead(200, { "Content-type": "text/html;charset=utf8" });

    if (request.url !== "/favicon.ico") {
        let pathname = url.parse(request.url).pathname;
        pathname = pathname.replace(/\//, "");
        if (pathname === "get_money") {
            get_money(request, response);
        }
        response.end("\r\n錢給完了,沒了", "utf-8");
    }
}).listen(port);

console.log(`本地服務器建立成功=>localhost:${port}`);

function get_money(request, response) {
    response.write("給了你666塊錢", "utf-8");
}

安裝個 node,跑在本地就行web

status/readyState/onreadystatechange

onreadystatechange
- 當 readyState 值變化時,會調用相應的處理函數
readyState
- 0=>UNSENT=>XMLHttpRequest 代理被建立，但還沒有調用 open() 方法
- 1=>OPENED=>open() 方法已經被調用,能夠經過 setRequestHeader() 方法來設置請求的頭部，能夠調用 send() 方法來發起請求
- 2=>HEADERS_RECEIVED=>send() 方法已經被調用，響應頭也已經被接收
- 3=>LOADING=>響應體部分正在被接收。若是 responseType 屬性是 text 或空字符串， responseText 將會在載入的過程當中擁有部分響應數據
- 4=>DONE=>請求操做已經完成。這意味着數據傳輸已經完全完成或失敗
status
- 在請求完成前,status 的值爲 0.XMLHttpRequest 出錯,瀏覽器返回的 status 也爲 0
- 若是服務器響應中沒有明確指定 status 碼,XMLHttpRequest.status 將會默認爲 200

var xhr = new XMLHttpRequest();

        console.log("open調用前的status", xhr.status); // open調用前的status 0
        console.log("open調用前的readyState", xhr.readyState); //open調用前的readyState 0

        xhr.open("GET", "http://127.0.0.1:3333/get_money", true);

        console.log("open調用後的status", xhr.status); //open調用後的status 0
        console.log("open調用後的readyState", xhr.readyState); //open調用後的readyState 1

        xhr.send();

        console.log("send調用後的status", xhr.status); //send調用後的status 0
        console.log("send調用後的readyState", xhr.readyState); //send調用後的readyState 1

        xhr.onreadystatechange = function() {
            console.log(xhr.status); //2,3,4
            console.log(xhr.readyState); //200,200,200
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            }
        };

readyState 表明 send()方法已經被調用,可是 send()以後 readyState 不必定就是 2json

當服務器指定了 status,其實就是 http 的狀態碼跨域

//node中writeHead修改一下
response.writeHead(404, { "Content-type": "text/html;charset=utf8" });

response/responseText/responseType

response
1. 返回響應的正文
2. 返回的類型能夠是 ArrayBuffer,Blob,Document,Object,DOMString.這取決於 responseType 屬性
3. 請求還沒有完成或未成功,則取值是 null
4. 讀取文本數據時若是將 responseType 的值設置成 text 或空字符串且當請求狀態還在是 readyState (3) 時,response 包含到目前爲止該請求已經取得的內容
responseText
1. 返回一個 DOMString,包含對文本請求的響應,請求不成功或者請求還沒有發送,返回 null
2. 在請求完成以前將會獲得部分屬性
3. 若是值不是 text 或者 string,responseType 將會拋出 InvalidStateError 異常
responseType
1. responseType 屬性是一個枚舉類型的屬性,返回響應數據的類型
2. 設置爲一個空字符串,它將使用默認的 text 類型
3. 同步請求設置 responseType 會拋出一個 InvalidAccessError 的異常
4. "","arraybuffer","blob","document","json","text"

var xhr = new XMLHttpRequest();

        xhr.open("GET", "http://127.0.0.1:3333/get_money", true);

        xhr.onreadystatechange = function() {
            console.log("readyState=>", xhr.readyState);
            console.log("status=>", xhr.status);
            console.log(xhr.response);
            console.log(xhr.responseText);
        };

        xhr.send();

open 和 send

open(method,url,async,user,password)
1. XMLHttpRequest 的 http 或者 https 的請求必須經過 open 來發起
2. 必需要在 send 以前調用
3. method('GET','POST','PUT','DELETE').url 請求地址.async 是否開啓同步請求,默認 true,執行異步操做.用戶名用於認證,默認 null.密碼用於認證,默認 null
4. 同步的請求會阻塞 js 執行,不須要調用 onreadystatechange 事件監聽器
sendRequestHeader(header,value)
1. 在 open() 方法和 send() 之間調用
2. 屢次對同一個請求頭賦值，只會生成一個合併了多個值的請求頭
send()
1. 用於發送 http 請求,異步請求會在請求發送後當即返回,若是是同步請求,會在響應到達後才返回
2. send()接收一個可選參數,做爲請求主體.若是請求方法是 GET 或 HEAD,則將請求主體設爲 null
3. 發送二進制內容的最佳方法是結合 ArrayBufferView 或者Blobs
4. 參數['null','ArrayBuffer','ArrayBufferView','Blob','Document','FormData','DOMString']

一個小案例瀏覽器

經過請求發送一個留言,經過 FormData 發送一個表單數據安全

var xhr = new XMLHttpRequest();

        xhr.open("POST", "http://127.0.0.1:3333/add", true);

        var body = new FormData();

        body.append("oid", 8029794);
        body.append("type", 1);
        body.append("message", "本大王來巡山了");
        body.append("plat", 1);
        body.append("jsonp", "jsonp");
        body.append("csrf", "af15b2a3a0e64a2ea304f885bea6bfd1");

        xhr.send(body);

        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                console.log(xhr.response);
            }
        };

爲了安全，跨域 XHR 對象有一些限制：服務器