Ajax異步

時間  2019-11-13
標籤 ajax 異步 欄目 Ajax 简体版
原文   原文鏈接
同步和異步
  在生活中同步是一塊兒作不一樣的事情，異步爲按順序作事。
    在JavaScript語言中，同步和異步的概念恰好相反。
    這JavaScript中同步就是：你不執行完上面的代碼，那麼下面的代碼你就別執行；一步一步執行，這就是同步。
    異步就是能夠一塊兒執行的代碼；
 
ajax簡介
 
ajax是先後端數據交互的重要手段
 
Ajax 全稱爲：「Asynchronous JavaScript and XML」（異步 JavaScript 和 XML），它並非 JavaScript 的一種單一技術，而是利用了一系列交互式網頁應用相關的技術所造成的結合體。使用Ajax，咱們能夠無刷新狀態更新頁面，而且實現異步提交，提高了用戶體驗。
 
Ajax 這個概念是由 JesseJamesGarrett 在 2005 年發明的。它自己不是單一技術，是一串技術的集合，主要有：
 
    1.JavaScript，經過用戶或其餘與瀏覽器相關事件捕獲交互行爲
 
    2.XMLHttpRequest 對象，經過這個對象能夠在不中斷其它瀏覽器任務的狀況下向服務器發送請求；
 
    3.服務器上的文件，以 XML、HTML 或 JSON 格式保存文本數據；
 
    4.其它 JavaScript，解釋來自服務器的數據（好比 PHP 從 MySQL 獲取的數據）並將其呈現到頁面上。
 
 
因爲 Ajax 包含衆多特性，優點與不足也很是明顯。優點主要如下幾點：
    1.不須要插件支持（通常瀏覽器且默認開啓 JavaScript 便可）；
    2.用戶體驗極佳（不刷新頁面便可獲取可更新的數據）；
    3.提高 Web 程序的性能（在傳遞數據方面作到按需發送，沒必要總體提交）；
    4.減輕服務器和帶寬的負擔（將服務器的一些操做轉移到客戶端）；
 
而 Ajax 的不足由如下幾點：
    1.不一樣版本的瀏覽器對 XMLHttpRequest 對象支持度不足(好比 IE5 以前)；
    2.前進、後退的功能被破壞（由於 Ajax 永遠在當前頁，不會記錄先後頁面）；
    3.搜索引擎的支持度不夠（由於搜索引擎爬蟲還不能理解 JS 引發變化數據的內容）；
Ajax的使用
  經過下面一些代碼來介紹ajax的使用
  需求：獲取後臺PHP代碼中數據並彈出。
   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>

    // ajax的工做流程
    // 打電話
    // 1.有電話
    // 有介質
    var xhr = new XMLHttpRequest();
    // 2.手機的撥號鍵盤
    // 在xhr身上找到發送方法
    // xhr.open("get","data/data.php",true)
    xhr.open("get","http://localhost/ajax/data/data.php",true);
    // 3.監聽手機的狀態
    // 監聽xhr對象的狀態
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            // console.log("請求成功")
            console.log(xhr.responseText)
        }
    }
    // 4.能夠說話了
    // 開始發送信息
    xhr.send()
</script>
</html>

 

上面的代碼中，咱們經過ajax技術實現了獲取後臺PHP數據並彈出的效果。
 總體的實現步驟以下：php

  • 實例化XMLHttpRequest()對象
  • 調用open()方法讀取指定文件
  • 發送請求
  • 綁定readystatechange事件，設置事件處理函數。
下面咱們就來逐一的將上面的代碼進行拆解講解。
 1.  建立請求對象； 
var xhr =  new XMLHttpRequest();

2.設置請求參數；html

 xhr.open('get','01.txt',true);
  第一個參數：post||get
    POST和GET的區別：
    1.POST主要用來發送數據，GET主要用來接受數據；
    2.PSOT發送數據的安全性較好，而GET較差；
    3.POST發送數據不限制大小，而GET大小受限2~100k。
    何時用GET和POST：在數據獲取時用GET方式，在操做數據時應使用POST方式。
 
    第二個參數：要請求的url
 
    第三個參數：接受一個布爾值，決定請求的方式
    爲true時，服務器請求是異步進行的，也就是腳本執行send() 方法後不等待服務器的執行結果，而是繼續執行腳本代碼；
    爲false時，服務器請求是同步進行的，也就是腳本執行send() 方法後等待服務器的執行結果的返回，若在等待過程當中超時，則再也不等待，繼續執行後面的腳本代碼
3.觀察狀態 
xhr.onreadystatechange = function(){
           if(xhr.readyState == 4 && xhr.status ==200){
               console.log(xhr.responseText);
           }
       }

4.發送數據ajax

xhr.send(null);
狀態詳解
xhr.readyState
    0 －（未初始化）尚未調用send()方法
    1 －（載入）已調用send()方法，正在發送請求
    2 －（載入完成）send()方法執行完成，已經接收到所有響應內容
    3 －（交互）正在解析響應內容
    4 －（完成）響應內容解析完成，能夠在客戶端調用了
 
HTTP 狀態碼 xhr.status
    1**：請求收到，繼續處理
    2**：操做成功收到，分析、接受
    3**：完成此請求必須進一步處理
    4**：請求包含一個錯誤語法或不能完成
    5**：服務器執行一個徹底有效請求失敗
    
    100——客戶必須繼續發出請求
    101——客戶要求服務器根據請求轉換HTTP協議版本
 
    200——交易成功
    201——提示知道新文件的URL     
    202——接受和處理、但處理未完成
    203——返回信息不肯定或不完整
    204——請求收到，但返回信息爲空
    205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件
    206——服務器已經完成了部分用戶的GET請求
 
    300——請求的資源可在多處獲得
    301——刪除請求數據
    302——在其餘地址發現了請求數據
    303——建議客戶訪問其餘URL或訪問方式
    304——客戶端已經執行了GET，但文件未變化
    305——請求的資源必須從服務器指定的地址獲得
    306——前一版本HTTP中使用的代碼，現行版本中再也不使用
    307——申明請求的資源臨時性刪除
 
    400——錯誤請求，如語法錯誤
    401——請求受權失敗
    402——保留有效ChargeTo頭響應
    403——請求不容許
    404——沒有發現文件、查詢或URl
    405——用戶在Request-Line字段定義的方法不容許
    406——根據用戶發送的Accept拖，請求資源不可訪問
    407——相似401，用戶必須首先在代理服務器上獲得受權
    408——客戶端沒有在用戶指定的餓時間內完成請求
    409——對當前資源狀態，請求不能完成
    410——服務器上再也不有此資源且無進一步的參考地址
    411——服務器拒絕用戶定義的Content-Length屬性請求
    412——一個或多個請求頭字段在當前請求中錯誤
    413——請求的資源大於服務器容許的大小
    414——請求的資源URL長於服務器容許的長度
    415——請求資源不支持請求項目格式
    416——請求中包含Range請求頭字段，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭字段
    417——服務器不知足請求Expect頭字段指定的指望值，若是是代理服務器，多是下一級服務器不能知足請求
 
    500——服務器產生內部錯誤
    501——服務器不支持請求的函數
    502——服務器暫時不可用，有時是爲了防止發生系統過載
    503——服務器過載或暫停維修
 
    504——關口過載，服務器使用另外一個關口或服務來響應用戶，等待時間設定值較長
    505——服務器不支持或拒絕支請求頭中指定的HTTP版本
    Ajax兼容問題 
ajax = new XMLHttpRequest();
ajax = new ActiveXObject("Microsoft.XMLHTTP");     //IE5

Ajax get方法的封裝後端

get方式傳輸是在url地址以？和& 進行拼接。瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>

    document.onclick = function(){
        var url = "http://localhost/ajax/data/data.php";

        ajaxGet(url,function(res){
            console.log(res);
        },{
            user:"jjj",
            pass:"12312321"
        });
    }

    function ajaxGet(url,cb,data){
        // data是對象
        // 1.解析要發送的數據
        data = data||{};
        var str = "";
        for(var i in data){
            str += `${i}=${data[i]}&`;
        }
        // 欺騙瀏覽器緩存
        // 在url後拼接時間戳
        var d = new Date();
        url = url + "?" + str + "__qft="+d.getTime();
        // 3.準備ajax的過程
        var xhr = new XMLHttpRequest();
        xhr.open("get",url,true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                cb(xhr.responseText)
            }
        }
        xhr.send();
    }

 後臺PHP代碼
緩存

<?php
    $u = @$_GET["user"];
    $p = @$_GET["pass"];
    echo "hello php---".$u."----".$p;

?>

 

這就是實現了一個ajax get方式的先後端交互數據了安全

 

Ajax post方法的封裝服務器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>

    document.onclick = function(){
        var url = "http://localhost/ajax/data/post.php";
        ajaxPost(url,function(res){
            console.log(res)
        },{
            a:10,
            b:20
        })
    }

    // get和post的不一樣:
    function ajaxPost(url,callback,data){
        data = data || {};
        var str = "";
        for(var i in data){
            str += `${i}=${data[i]}&`;
        }
        var d = new Date();
        // 2-1.發送數據的位置，再也不是url
        url = url + "?__qft=" + d.getTime();

        var xhr = new XMLHttpRequest();
        // 1.open的參數
        xhr.open("POST",url,true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                callback(xhr.responseText);
            }
        }
        // 3.send會原模原樣的發送本身接受的數據，因此須要在發送以前設置發送數據的格式：表單格式
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        // 2-2.而是send
        xhr.send(str);
    }

    // get方式：
    //     數據必須在url上拼接
    //     只要在url上拼接數據，那麼必然是get

    // post方式：
    //     數據在send中發送，格式與get一致

</script>
</html>

後臺PHP代碼app

<?php
    $a = @$_POST["a"];
    $b = @$_POST["b"];
    echo "這是接收到的post的數據：".$a."---".$b;

?>

這就是實現了一個ajax post方式的先後端交互數據了。異步

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程