原生js實現ajax封裝

一、什么是ajax？

定義：Ajax(Asynchronous Java and XML的縮寫)是一種異步請求數據的web開發技術，在不需要重新刷新頁面的情況下，Ajax 通過異步請求加載后台數據，並在網頁上呈現出來。

作用：提高用戶體驗，減少網絡數據的傳輸量

二、ajax常見運用場景

表單驗證是否登錄成功、百度搜索下拉框提示和快遞單號查詢等等。

三、Ajax原理是什么

Ajax請求數據流程，其中最核心的依賴是瀏覽器提供的對象xhr，它扮演的角色相當於秘書，使得瀏覽器可以發出HTTP請求與接收HTTP響應。瀏覽器接着做其他事情，等收到XHR返回來的數據再渲染頁面

四、ajax涉及的知識點

1、readyState：返回當前文檔的載入狀態

     0-(未初始化)還沒有調用send()方法

     1-(載入)已調用send()方法，正在發送請求

     2-(載入完成)send()方法執行完成，已經接收到全部響應內容

     3-(交互)正在解析響應內容

     4-(完成)響應內容解析完成，可以在客戶端調用了

 2、status：HTTP狀態碼

     1XX：信息性狀態碼     ，表示接收的請求正在處理

      2XX：成功狀態碼       ， 表示請求正常處理

      3XX：重定向狀態碼    ，表示需要附加操作來完成請求

      4XX：客戶端錯誤狀態  ，表示服務器無法處理請求

      5XX：服務器錯誤狀態  ，表示服務器處理請求出錯

3、get和post的區別

五、原生JS實現ajax請求

<script>
    function ajax(options){ options = options ||{};  //調用函數時如果options沒有指定，就給它賦值{},一個空的Object
        options.type=(options.type || "GET").toUpperCase();/// 請求格式GET、POST，默認為GET
        options.dataType=options.dataType || "json";    //響應數據格式，默認json

        var params=formatParams(options.data);//options.data請求的數據

        var xhr; 
 //考慮兼容性 if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else if(window.ActiveObject){//兼容IE6以下版本
            xhr=new ActiveXobject('Microsoft.XMLHTTP'); } //啟動並發送一個請求
        if(options.type=="GET"){ xhr.open("GET",options.url+"?"+params,true); xhr.send(null); }else if(options.type=="POST"){ xhr.open("post",options.url,true); //設置表單提交時的內容類型
            //Content-type數據請求的格式
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send(params); } // 設置有效時間
        setTimeout(function(){ if(xhr.readySate!=4){ xhr.abort(); } },options.timeout) // 接收
    // options.success成功之后的回調函數 options.error失敗后的回調函數
 //xhr.responseText,xhr.responseXML  獲得字符串形式的響應數據或者XML形式的響應數據

        xhr.onreadystatechange=function(){ if(xhr.readyState==4){ var status=xhr.status; if(status>=200&& status<300 || status==304){ options.success&&options.success(xhr.responseText,xhr.responseXML); }else{ options.error&&options.error(status); } } } } //格式化請求參數
    function formatParams(data){ var arr=[]; for(var name in data){ arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name])); } arr.push(("v="+Math.random()).replace(".","")); return arr.join("&"); } //基本的使用實例 ajax({ url:"http://server-name/login", type:'post', data:{ username:'username', password:'password' }, dataType:'json', timeout:10000, contentType:"application/json", success:function(data){ 　　　　　　。。。。。。//服務器返回響應，根據響應結果，分析是否登錄成功 },
 //異常處理 error:function(e){ console.log(e); } }) </script>

 

 

參考文章：

http://www.sohu.com/a/238246281_100109711

https://www.cnblogs.com/lanyueboyu/p/8793352.html