JavaScript實現(xiàn)Ajax

binta 發(fā)布于2019-08-26 10:31 / 1114人閱讀

摘要：用于從網絡上獲取數(shù)據，有了對象，就可以實現(xiàn)頁面的無刷新請求數(shù)據，就可以做到一個局部的更新，也可以獲取多種類型的數(shù)據文件。這篇文章主要是分享了中對象的基本屬性和方法從實例化初始化發(fā)送和接受四個階段完成了網絡請求核心內容封裝。

1：基本概念

jQuery的Ajax請求實際上是封裝的一個XHLHttpRequest，從字面意思來看是，XML是一種文件格式，Http是一個網絡請求，Request最開始是用于請求XML文件的，后來不斷擴展可以請求多種類型的文件。

XHLHttpRequest，網絡請求模塊，或者是一個瀏覽器網絡線程。用于從URL網絡上獲取數(shù)據，有了對象，就可以實現(xiàn)頁面的無刷新請求數(shù)據，就可以做到一個局部的更新，也可以獲取多種類型的數(shù)據(ftp、文件)。

2：要實現(xiàn)和使用XMLHttpRequest

它是一個對象，首先我們需要實例化，定義一個：

    var xhr = new XMLHttpRequest();

3：初始化請求，給定一些必要的配置，給它一些property

    //Ajax請求時的參數(shù)設置
    method          請求方式
    url             請求地址
    async           是否異步
    user            用戶名
    password        密碼
    
    xhr.open(method,url,async,user,password);

4：發(fā)送請求(encodeURLComponent)

    xhr.send(data);
    等待接收

5：接收網絡請求返回

一般有如下屬性：

responseText，請求返回的數(shù)據內容，可以是一段文本，是一段二進制或者是一個json

responseXML，是一個文件，如果響應頭內容是text/xml，這個屬性將保留響應數(shù)據的XML、DOM文檔。

status，響應的HTTP狀態(tài)，如 200(正常，200-300之間都表示成功) 304(使用緩存) 404(沒找到) 500(服務器內部錯誤)等

statusText，HTTP狀態(tài)說明

readyStatus，請求/響應過程的當前活動階段，一共有5個值：0(未被調用open)，1(已被調用open但未發(fā)送)，2(已調用send)，3(已接收到請求返回的數(shù)據)，4(請求已完成)。

timeout，設置請求超時時間

    xhr.onreadystatechange = () => {
        if (xhr.readyStatus === 4) {
            /* HTTP 狀態(tài)在 200-300 之間表示請求成功 */
            /* HTTP 狀態(tài)為 304 表示請求內容未發(fā)生改變，可直接從緩存中讀取 */
            if (xhr.status >= 200 &&
                xhr.status < 300 ||
                xhr.status == 304) {
                console.log("請求成功", xhr.responseText)
            }
        }
    }

6：封裝(promise)

    function ajax (options) {
        /* 獲取請求地址 */
        let url = options.url;
        /* 獲取請求方法 */
        const method = options.method.toLocaleLowerCase() || "get";
        /* 默認異步 */
        const async = options.async != false;
        /* 獲取請求request數(shù)據 */
        const data = options.data;
        /* 實例化XMLHttpRequest */
        const xhr = new XMLHttpRequest();
        /* 設置超時時間 */
        if (options.timeout && options.timeout > 0) {
            xhr.timeout = options.timeout
        }
    
        return new Promise ( (resolve, reject) => {
            /* 添加超時回調 */
            xhr.ontimeout = () => reject && reject("請求超時");
            /* 成功回調 */
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        resolve && resolve(xhr.responseText);
                    } else {
                        reject && reject();
                    }
                }
            }
    
            /* 失敗回調 */
            xhr.onerror = err => reject && reject(err);
    
            /* 拼接參數(shù) */
            let paramArr = [];
            let encodeData;
            if (data instanceof Object) {
                for (let key in data) {
                    paramArr.push( encodeURIComponent(key) + "=" + encodeURIComponent(data[key]) );
                }
                encodeData = paramArr.join("&");
            }
    
            /* get請求 */
            if (method === "get") {
                const index = url.indexOf("?")
                if (index === -1) url += "?"
                else if (index !== url.length -1) url += "&"
                url += encodeData
            }
    
            /* 初始化請求 */
            xhr.open(method, url, async);
    
            /* get直接發(fā)送拼接的URL */
            if (method === "get") xhr.send(null);
    
            if (method === "post") {
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8")
                xhr.send(encodeData)
            }
        })
    }

總結：
關于網絡請求，一般常用的有四種：

一個是get，獲取網絡資源

然后是post，一般用于提交數(shù)據，提交數(shù)據的參數(shù)是放在請求的body里面的

delete，刪除

put，標準的一個修改

關于Http的簡單請求和非簡單請求或者是跨域，在跨域時由于瀏覽器的安全機制，涉及到一個問題關于在Ajax請求，是在請求之后還是請求之前判斷跨域，這時候就需要了解一下簡單請求和復雜請求。

簡單請求是先把資源請求回來，然后再去判斷是否跨域。如果是一個復雜請求，瀏覽器會先去發(fā)送一個嗅探或者是欲請求（一般是一個option），先判斷是否跨域，如果不是跨域那就執(zhí)行，如果是跨域那就直接不請求了。一般來講，如果get不修改它的Content-Type，那么基本上都是簡單請求。post如果采用www-form的形式，也是一個簡單請求。

這篇文章主要是分享了Javascript中XMLHttpRequest對象的基本屬性和方法, 從實例化、初始化、發(fā)送和接受四個階段完成了Ajax網絡請求核心內容封裝。

GPU云服務器云服務器 javascript+ajax Ajax實現(xiàn)機制 get實現(xiàn)ajax ajax實現(xiàn)百度搜索

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

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

異步 JavaScript 與 Promise

摘要：為這些回調函數(shù)分別命名并分離存放可以在形式上減少嵌套，使代碼清晰，但仍然不能解決問題。如果在一個結束成功或失敗，同前面的說明后，添加針對成功或失敗的回調，則回調函數(shù)會立即執(zhí)行。異步？我在很多地方都看到過異步(Asynchronous)這個詞，但在我還不是很理解這個概念的時候，卻發(fā)現(xiàn)自己常常會被當做已經很清楚(*￣?￣)。如果你也有類似的情況，沒關系，搜索一下這個詞，就可以得到大致...

livem 2019-08-21 10:26 評論0 收藏0
原生javaScript實現(xiàn)Ajax 和 jQuery實現(xiàn)Ajax

摘要：作者后臺使用的是語言，所以這里以后臺為例子不影響學習一原生使用方法創(chuàng)建對象兼容處理處理低版本不兼容問題準備發(fā)送請求方式接口參數(shù)名參數(shù)值異步執(zhí)行發(fā)送回調是表示數(shù)據解析完成，后臺處理完成了。是表示處理的結果是的。作者后臺使用的是php語言，所以這里以php后臺Api為例子,不影響學習Ajax 一、 javaScript原生使用Ajax 1.get方法 //1.創(chuàng)建對象兼容處理 var ...

ssshooter 2019-08-23 17:03 評論0 收藏0
原生JavaScript實現(xiàn)AJAX、JSONP

摘要：在這里講解一下用原生如何實現(xiàn)。當然，前面也說過，你可以給定固定回調函數(shù)名最后我已經將和請求合并在一起了，下載鏈接原文鏈接原生實現(xiàn)如有問題，歡迎在下方留言相信大多數(shù)前端開發(fā)者在需要與后端進行數(shù)據交互時，為了方便快捷，都會選擇JQuery中封裝的AJAX方法，但是有些時候，我們只需要JQuery的AJAX請求方法，而其他的功能用到的很少，這顯然是沒必要的。其實，原生JavaScript...

xcc3641 2019-08-20 14:06 評論0 收藏0
前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發(fā)工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
Python3網絡爬蟲實戰(zhàn)---35、 Ajax數(shù)據爬取

摘要：所以說，我們所看到的微博頁面的真實數(shù)據并不是最原始的頁面返回的，而是后來執(zhí)行后再次向后臺發(fā)送了請求，拿到數(shù)據后再進一步渲染出來的。結果提取仍然是拿微博為例，我們接下來用來模擬這些請求，把馬云發(fā)過的微博爬取下來。上一篇文章：Python3網絡爬蟲實戰(zhàn)---34、數(shù)據存儲：非關系型數(shù)據庫存儲:Redis下一篇文章：Python3網絡爬蟲實戰(zhàn)---36、分析Ajax爬取今日頭條街拍美圖 ...

Thanatos 2019-07-31 10:36 評論0 收藏0