ajax

時間 2020-03-09

標籤 ajax 欄目 Ajax 简体版

原文原文鏈接

**今天，我就帶你來了解一下ajax吧！**

首先咱們得明白什麼是ajax？那到底什麼纔是ajax呢？

AJAX = 「Asynchronous Javascript And XML」（==異步 JavaScript 和 XML==）直譯出來就是異步的 JavaScript和數據傳輸技術。國內常翻譯爲**==「阿賈克斯」==**是指一種無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。直白的說，ajax就是js經過一個網址去加載數據。用戶是看不見的，能夠經過瀏覽器控制檯中的網絡查看。

上面說到，xml，咱們就結合json來給你介紹~~~
==xml（可擴展標記語言）、json（輕量級數據格式）都是字符串的格式，都用於數據傳輸==
二者之間有什麼區別呢？
**xml：**
     優勢：
      一、傳輸的數據種類特別豐富
      二、傳輸的數據量很是大
       缺點：
      解析起來比較麻煩
    【注】用於大型門戶網站，今日頭條、騰訊新聞、網易新聞。
**json：**
      優勢：
       一、解析起來很是方便
       二、適合輕量級的數據
       缺點：
       一、種類比較少
       【注】基本上90%以上應用用的都是json格式字符串傳輸。
同時說到異步，有的小夥伴就懵逼了，心想異步是啥，有什麼做用呢？

瞭解異步以前，咱們首先看看javas中的同步是什麼吧！
==同步==：阻塞，當前程序必須等前面的程序執行完畢之後，才能運行。
舉個例子：就比如咱們作飯，飯作好了，纔去作菜。
在JavaScript中，異步與同步是相反的存在，因此說異步就是什麼呢？
==異步==：非阻塞，當前程序的執行和前面程序是否執行完畢沒有關係。
舉個例子：作飯的同時，我能夠洗菜，切菜。
**總結着來講**：同步必須按照順序一步一步執行，而異步就是不按順序無論前面執不執行或者執行完不完畢我都執行！
ajax有什麼好處？有什麼缺點呢？

**AJAX的優勢：**
1）頁面無刷新更新數據：AJAX最大優勢就是能在不刷新整個頁面的前提下與服務器通訊維護數據；
2）異步與服務器通訊：AJAX使用異步方式與服務器通訊，不須要打斷用戶的操做，具備更加迅速的響應能力；
3）前端和後端負載平衡：AJAX能夠把之前一些服務端負擔的工做轉嫁到客戶端，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本；
4）基於標準被普遍支持：AJAX基於標準化的並被普遍支持的技術，不須要下載瀏覽器插件；
5）界面與應用分離：Ajax使WEB中的數據與呈現分離，有利於分工合做，提升效率。
**AJAX的缺點：**
1）AJAX幹掉了Back和History功能：即對瀏覽器機制的破壞，在動態更新頁面的狀況下，用戶沒法回到前一個頁面狀態；
2）AJAX有安全問題：AJAX技術給用戶帶來很好的用戶體驗的同時也帶來了新的安全威脅，Ajax技術就如同對企業數據創建了一個直接通道；
3）對搜索引擎支持較弱：對搜索引擎優化不太友好；
4）破壞程序的異常處理機制：像Ajax.dll，Ajaxpro.dll這些Ajax框架是會破壞程序的異常機制；
5）AJAX不能很好支持移動設備：一些手持設備（如手機、PDA等）不能很好的支持Ajax。
**瞭解這些以後，咱們接下來看看ajax是怎樣操做的，具體步驟有哪些呢**？
總結爲以下四步：
1.聲明一個ajax對象
2.輸入請求信息（三個參數）
第一個參數：請求的方式
get post
第二個參數：請求的url
第三個參數：是否異步
true（異步） false(同步)
3.發送
4.等待數據響應

<!DOCTYPE html><html lang="en">   
 <head>       
 <meta charset="UTF-8">        
 <meta name="viewport" content="width=device-width, initial-scale=1.0">                 <title>Document</title>        
 <script>            
    window.onload = function(){                
       var oBtn = document.getElementById('btn1');                
       oBtn.onclick = function(){ 
       //一、聲明一個ajax對象                 
          var xhr = new XMLHttpRequest();
                //二、輸入請求的信息      
             /*   
                  第一個參數：請求的方式           
                     get post  
                  第二個參數：請求的url                       
                  第三個參數：是否異步                            
                  true (異步)  false (同步)                  
                    */                    
                xhr.open("get", "1.txt", true);
               //三、發送                    
                 xhr.send();
                //四、等待數據響應             
             xhr.onreadystatechange = function(){
                 if(xhr.readyState == 4){
                 alert(xhr.responseText);             
                    }  
                   }  
                  }  
                 }
        </script>
            </head>
                <body>
                        <button id = 'btn1'>下載數據</button> 
               </body>
            </html>

有一種瀏覽器兼容的寫法：

<!DOCTYPE html><html lang="en">    
<head>        
<meta charset="UTF-8">       
<meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title>        
<script>            
       window.onload = function(){ 
        var oBtn = document.getElementById('btn1');                
        oBtn.onclick = function(){ 
         //一、聲明一個ajax對象   
         /*             
         XMLHttpRequest 在低版本的IE瀏覽器下並不兼容               
           */                              
          var xhr = null; 
          if(window.XMLHttpRequest){
           xhr = new XMLHttpRequest(); 
           }else{ 
            xhr = new ActiveXObject("Microsoft.XMLHTTP");               
            //二、輸入請求的信息                    
            /*                       
             第一個參數：請求的方式                           
              get post                       
            第二個參數：請求的url                        
            第三個參數：是否異步     
            true (異步)  false (同步)  
              */                   
               xhr.open("get", "1.txt", true);
                    //三、發送   
                  xhr.send();
                //四、等待數據響應
                xhr.onreadystatechange = function(){
                   if(xhr.readyState == 4){
                     alert(xhr.responseText); 
                       }  
                    }    
                  }  
                }
        </script>  
          </head>   
           <body>   
                <button id = 'btn1'>下載數據</button>   
            </body>
          </html>

**明白了嘛？明白了接下來咱們在瞭解一個頗有用又有趣的東西： try-throw-catch**
格式：
             try{
               咱們要去執行的代碼;
               throw new Error("錯誤文本");
                }catch(error){ 補救代碼; }
執行：
一、先去執行try中的代碼
二、若是try中的代碼執行正常，catch中的代碼就不執行了
三、若是try中的代碼執行異常(包括throw手動拋出異常)，執行catch中的代碼進行補救。
【注】同時，error是try中異常信息。
【注】最大用處的，用於代碼調試。

<!DOCTYPE html><html lang="en">    
<head>        
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title>  
<script>        
     try{  
      alert("認識成果");  
      alert("追到手"); 
      alert("娶成果"); 
       throw new Error("追到手代碼執行正常");
        }catch(error){ 
       alert("我是補救代碼：" + error);
         //我是補救代碼：ReferenceError: num is not defined  
          }
       alert("我是最後的代碼")
        </script> 
       </head>   
        <body>           
        </body>
        </html>

好玩吧！
上面ajax中出現的get和post不陌生吧！是否是似曾相識，在那見過吧~~~那呢，對了！表單！那接下來咱們就看看ajax中的get與post有什麼區別。

get參數經過url傳遞，post放在請求體（request body）中；
get請求在url傳遞的參數有長度限制，而post沒有；
get比post更不安全，由於參數直接顯示在url地址中，因此不能傳遞敏感數據；
get請求瀏覽器會主動緩存，而post不會；
get請求參數會保存在瀏覽歷史記錄，而post請求不會；
get和post本質上都是tcp鏈接。

<!DOCTYPE html><html lang="en">
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title> 
 <script>           
        window.onload = function(){  
         var aBtns = document.getElementsByTagName("button");                aBtns[0].onclick = function(){  
          var xhr = null; 
           try{ 
            xhr = new XMLHttpRequest();  
             }catch(error){ 
         xhr = new ActiveXObject("Microsoft.XMLHTTP")    
                    }
            var str = "username=tian&age=18&password=123abc";
            xhr.open("get", "code14/1.get.php?" + str, true);
            xhr.send();
            xhr.onreadystatechange = function(){
             if(xhr.readyState == 4){
              if(xhr.status == 200){              
              alert(xhr.responseText);  
              }else{ 
               alert("Error：" + xhr.status); 
                }
              }
           }
        }   
      aBtns[1].onclick = function(){    
        var xhr = null; 
        try{ 
        xhr = new XMLHttpRequest(); 
        }catch(error){
           xhr = new ActiveXObject("Microsoft.XMLHTTP")                    }
          var str = "username=tian&age=18&password=123abc";
         xhr.open("post", "code14/1.post.php", true);
  //設置提交數據格式                    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//post提交的數據是經過send方法進行傳參的，注意post提交的數據不加xhr.send(str);
            xhr.onreadystatechange = function(){
               if(xhr.readyState == 4){ 
                  if(xhr.status == 200){                                
                  alert(xhr.responseText);        
               }else{    
                   alert("Error：" + xhr.status)
                          }      
                      }       
                   }    
                 }   
              }        
         </script>    
         </head>    
         <body>        
         <button>GET請求</button>        
         <button>POST請求</button>    
         </body>
        </html>

** readystatechange事件**
xhr.readyState 值發生變化的時候，會觸發上述的這個事件
0 (初始化)沒有調用open方法的時候
1 (載入)已經調用send方法，發送請求
2 (載入完成)send方法已經發送完畢，接受到了全部的響應
3 (解析)正在解析響應內容
4 (完成)內容解析完成，能夠在客戶端調用了
responseText 響應文本，以字符串的形式返回咱們請求的數據。

**常見的status（狀態碼）：**
200：請求成功
301：網頁被重定向到其餘url
304：文件未被修改，使用緩存資源
404：找不到此網頁（指定的資源）
500：服務器內部錯誤
......
固然想知道更多狀態能夠去本身找！下面提供一個可跳轉的超連接頁面：
[更多狀態碼](https://www.runoob.com/http/http-status-codes.html)

**查詢字符串形式：**
search(查詢字符串)：?name1=value1&name2=value2
querystring(查詢字符串): name1=value1&name2=value2

<!DOCTYPE html><html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title>
 <script>    
      //傳入對象，拼接成querystring
        function querystring(obj){ 
        var str = ''; 
         for(var attr in obj){
          str += attr + "=" + obj[attr] + "&";
            } 
         return str.substring(0, str.length - 1); 
          }
            //username=tian&age=20&sex=男
           alert(querystring({
             username: "tian",
             age: 20,
             sex: "男" 
        }))       
         </script>    
         </head>    
         <body>           
         </body>
        </html>

**最後封裝一個ajax函數，記得收藏哦！**

<!DOCTYPE html><html lang="en">    
<head>        
<meta charset="UTF-8">        
<meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title>       
 <script> 
  /*  
  type 表明 請求方式 
  url  表明 請求url路徑  
  data 表明 發送數據   
   */           
  function $ajax(type, url, objData){              
    var xhr = null;  
      try{ 
       xhr = new XMLHttpRequest(); 
        }catch(error){  
        xhr = new ActiveXObject("Microsoft.XMLHTTP") 
                }   
        if(type == "get" && objData){ 
            url += "?" + querystring(objData);
                   }
                xhr.open(type, url, true);
                if(type == "get"){ 
                 xhr.send();  
                  }else{ 
                 //設置提交數據格式  
      xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); 
           objData ? xhr.send(querystring(objData)) : xhr.send(); 
           }   
           xhr.onreadystatechange = function(){            
           if(xhr.readyState == 4){ 
                 if(xhr.status == 200){            
                 alert(xhr.responseText);
                  }else{  
                   alert("Error：" + xhr.status);  
                       }  
                    }    
                 }        
            }            
         function querystring(obj){ 
          var str = ''; 
           for(var attr in obj){
           str += attr + "=" + obj[attr] + "&";
             } 
             return str.substring(0, str.length - 1);
               }
            window.onload = function(){
             var aBtns = document.getElementsByTagName("button");
             aBtns[0].onclick = function(){ 
                   $ajax("get", "code14/1.get.php", {    
                   username: "小明",
                   age: 40,
                   password: "123abc"  }); 
                   }
                aBtns[1].onclick = function(){ 
                $ajax("post", "code14/1.post.php", {               
                  username: "小花",
                  age: 18,
                  password: "123abc"  });
                    } 
                 }
        </script>  
          </head>    
          <body>        
          <button>GET請求</button>        
          <button>POST請求</button>    
          </body>
         </html>

== 記得必定要用控制檯網絡查看請求數據形態哦！==
最後，但願個人文章能給你帶來微妙的幫助，一塊兒奧利給！！！固然若是你對前端開發的學習有興趣，能夠在B站上找尋碼農雨飛的免費前端學習視頻，代碼免費送。 http://www.bilibili.com/video/av77505416.固然也能夠留言評論加關注與我暢所欲談共同漫步於知識的海洋。。。。 ```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。