AJAX 異步交互基本總結

時間  2019-12-13
標籤 ajax 異步 交互 基本 總結 欄目 Ajax 简体版
原文   原文鏈接

AJAX (Asynchronous JavaScript and Xml)javascript

直譯中文 - javascript和XML的異步php

同步與異步的區別:
　　同步交互
　　　　執行速度相對比較慢
　　　　響應的是完整的HTML頁面
　　異步交互
　　　　執行速度相對比較快
　　　　響應的是部分數據java

Ajax 的核心對象：
　　XMLHttpRequest 對象
建立 XMLHttpReuqest 對象node

 1     function getXhr(){
 2         // 聲明XMLHttpRequest對象
 3         var xhr = null;
 4         // 根據瀏覽器的不一樣狀況進行建立
 5         if(window.XMLHttpRequest){
 6             // 表示除IE外的其餘瀏覽器
 7             xhr = new XMLHttpRequest();
 8         }else{
 9             // 表示IE瀏覽器
10             xhr = new ActiveXObject('Microsoft.XMLHttp');
11         }
12         return xhr;
13     }
14     // 建立核心對象
15     var xhr = getXhr();

Ajax 核心對象
　　屬性：　　　　json

　　　　* readyState
　　　　　　* 0 - (服務器端)還沒有初始化
　　　　　　* 1 - (服務器端)正在接收
　　　　　　* 2 - (服務器端)接收完畢
　　　　　　* 3 - (服務器端)正在響應
　　　　　　* 4 - (服務器端)響應完畢
　　　　* status
　　　　　　* 200 - 請求成功
　　　　　　* 404 - 網頁找不到(請求路徑不正確)
　　　　　　* 500 - 服務器端錯誤數組

　　方法：
　　　　* open(method,url)方法
　　　　　　* 做用 - 與服務器端創建鏈接
　　　　　　* 參數
　　　　　　　　* method - 設置請求類型(GET或POST)
　　　　　　　　* url - 設置請求地址
　　　　* send()方法
　　　　　　* 做用 - 向服務器端發送請求參數瀏覽器

　　事件：
　　　　* onreadystatechange事件
　　　　　　* 做用 - 監聽服務器端的通訊狀態改變服務器

實現Ajax的異步交互步驟
　　1. 建立XMLHttpRequest核心對象
　　　　固定寫法 - 獨立編寫
　　2. 與服務器端創建鏈接
　　　　使用XMLHttpRequest對象的open(method,url)方法
　　　　　　* method - 設置當前請求的類型
　　　　　　* url - 設置當前請求的地址
　　3. 向服務器端發送請求
　　　　使用XMLHttpRequest對象的send(請求參數)方法
　　　　　　* 請求參數的格式 - key=value
　　4. 接收服務器端的響應數據
　　　　* 使用XMLHttpRequest對象的onreadystatechange事件,監聽服務器端的通訊狀態
　　　　* 使用XMLHttpRequest對象的readyState屬性,判斷服務器端的當前狀態(0-4)
　　　　* 使用XMLHttpRequest對象的status屬性,判斷服務器端的狀態碼(200)
　　　　* 使用XMLHttpRequest對象的responseText屬性,接收服務器端的響應數據app

　　示例：異步

 1     // 實現Ajax的異步交互的步驟
 2     
 3     var btn = document.getElementById("btn");
 4     btn.onclick = function(){
 5         /*
 6          * 1. 實現Ajax主要依靠XMLHttpRequest對象
 7          *   * 建立XMLHttpRequest對象
 8          */
 9         var xhr = getXhr();
10         /*
11          * 2. 與服務器端創建鏈接
12          *   * open(method,url,async)方法
13          *     * method - 設置當前的請求類型(GET或POST)
14          *     * url - 設置當前的請求地址
15          *     * async - 設置是否異步(Boolean類型)
16          *       * 默認值爲true,表示異步
17          *       * 官方認爲使用XMLHttpRequest對象就是爲了實現異步交互的
18          */
19         xhr.open("get","01.php?user=zhangwuji");
20         /*
21          * 3. 客戶端向服務器端發送請求
22          *   * send(請求參數)方法
23          *     * 請求參數的格式 - key=value
24          *   * 若是請求類型爲GET方式的話
25          *     * send()方法是不能向服務器端發送請求數據的
26          *   * 注意
27          *     * send()方法是不能被省略的
28          *       * GET請求類型 - send(NULL);
29          */
30         xhr.send(null);
31         /*
32          * 4. 客戶端接收服務器端的響應
33          *   * 使用onreadystatechange事件
34          *     * 監聽服務器的通訊狀態
35          *   * readyState屬性
36          *     * 獲得服務器端當前通訊狀態
37          *     * 備選項
38          *       * 0 還沒有初始化
39          *       * 1 正在接收
40          *       * 2 接收完成
41          *       * 3 正在響應
42          *       * 4 響應完成
43          *   * status - 狀態碼
44          *     * 200 OK
45          *   * responseText屬性
46          *     * 接收服務器端的數據(HTML格式)
47          */
48         xhr.onreadystatechange = function(){
49             // 保證服務器端響應的數據發送完畢
50             if(xhr.readyState == 4){
51                 // 保證此次請求必須是成功的
52                 if(xhr.status == 200){
53                     // 接收服務器端的數據
54                     var data = xhr.responseText;
55                     // 測試
56                     console.log(data);
57                 }
58             }
59         }
60     }
61 
62     
63     // 定義建立XMLHttpRequest對象的函數
64     function getXhr(){
65         // 聲明XMLHttpRequest對象
66         var xhr = null;
67         // 根據不一樣瀏覽器建立
68         if(window.XMLHttpRequest){
69             // 其餘瀏覽器
70             xhr = new XMLHttpRequest();
71         }else{
72             // IE瀏覽器(8及以前)
73             xhr = new ActiveXObject("Microsoft.XMLHttp");
74         }
75         // 返回XMLHttpRequest對象
76         return xhr;
77     }
View Code

 

<?php
    // 用於處理客戶端的Ajax異步請求
    // 1. 接收客戶端發送的請求數據
    $user = $_GET['user'];
    // 2. 向客戶端進行響應
    echo $user.' get request succesful.';
?>
View Code

 

GET 與 POST 的區別：
　　GET請求類型
　　　　* send()方法不起做用,可是不能被省略
　　　　　　xhr.send(null);
　　　　* 請求參數 - 添加到URL?key=value
　　POST請求類型
　　　　* send()方法起做用
　　　　* 在send()方法被調用前,使用setRequestHeader()方法設置請求頭信息
　　　　　　xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

實現Ajax的六步是什麼?(不標準)
　　1. 建立XMLHttpRequest對象
　　2. 創建鏈接
　　3. 發送請求
　　4. 註冊監聽 - onreadystatechange事件
　　5. 獲取服務器端的通訊狀態 - readyState
　　6. 獲取服務器端的狀態碼

 

XML 解析

XML 語法
　　聲明：
　　　　<?xml version="1.0" encoding="UTF-8" ?>
　　定義元素：
　　　　* 根元素
　　　　　　* 必須是起始標籤
　　　　　　* 只能定義一個
　　　　* 定義元素
　　　　　　* 元素名能夠自定義
　　　　　　* 分類
　　　　　　　　* 起始標籤或單標籤
　　定義屬性

DOM 解析 XML
　　建立 XML 解析器：

 1         function parseXML(xml){
 2             // 聲明解析XML後的DOM對象
 3             var xmlDoc = null;
 4             // 根據不一樣的瀏覽器
 5             if(window.DOMParser){
 6                 // 其餘瀏覽器
 7                 var parser = new DOMParser();
 8                 xmlDoc = parser.parseFromString(xml,"application/xml");
 9             }else{
10                 // IE瀏覽器
11                 xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
12                 xmlDoc.async = false;
13                 xmlDoc.loadXML(xml);
14             }
15             return xmlDoc;
16         }

　　　　解析 XML 與解析 HTML 一致

　　　　　　* 不多使用ById和ByName兩個方法
　　　　* 注意
　　　　　　* 瀏覽器不容許讀取外部的XML文件
　　　　　　* 瀏覽器解析符合XML格式的字符串

Ajax中的XML格式
　　* 請求的數據格式 - XML
　　　　* 客戶端如何構建符合XML格式的數據
　　　　　　* 構建的數據類型 - 字符串(string)類型
　　　　　　* 字符串的內容符合XML格式的語法要求
　　　　* 服務器端如何接收符合XML格式的數據
　　　　　　* 接收客戶端的請求數據 - 字符串(string)類型
　　　　　　* PHP集成了DOM的相關內容
　　　　　　　　* DOMDocument類
　　　　　　　　* DOMElement類
　　　　　　　　* DOMNode類

　　* 響應的數據格式 - XML

　　　　* 服務器端如何構建符合XML格式的數據
　　　　　　* 設置服務器端的響應頭"Content-Type"值爲"text/xml"
　　　　　　* 構建符合XML格式數據內容
　　　　　　　　* 手動方式構建字符串(string)內容
　　　　　　　　* DOMDocument對象的方法
　　　　　　　　　　* loadXML(符合XML格式的字符串);
　　　　　　　　　　* saveXML()方法進行響應

　　　　* 客戶端如何接收符合XML格式的數據

　　　　　　* 使用XMLHttpRequest對象的responseXML屬性接收
　　　　　　* 接收回來的就是XML DOM對象(不須要使用XML解析器進行解析)
　　　　　　* 直接使用DOM解析XML DOM對象便可

　　示例：

 1     /*
 2      * 建立DOM解析XML的解析器 - 目前
 3      * * IE瀏覽器
 4      *   new ActiveXObject("Microsoft.XMLDOM");
 5      * * 其餘瀏覽器
 6      *   建立一個DOM的解析器
 7      *   var parser = new DOMParser();
 8      *   使用DOM解析器解析XML文件
 9      *   var xmlDoc = parser.parseFromString(xmlFile,"application/xml");
10      *
11      * 當前報錯:
12      * * 目前主流瀏覽器
13      *   * 不容許讀取本地文件
14      *   * 不容許讀取外部文件
15      */
16     function parseXML(xmlFile){
17         // 建立解析XML後的DOM對象
18         var xmlDoc = null;
19         // 根據不一樣瀏覽器進行解析
20         if(window.DOMParser){
21             // 其餘瀏覽器
22             var parser = new DOMParser();
23             xmlDoc = parser.parseFromString(xmlFile,"application/xml");
24         }else{
25             // IE瀏覽器
26             var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
27             xmlDoc.async = false;
28             xmlDoc.loadXML(xmlFile);
29         }
30         return xmlDoc;
31     }
32     /*
33      * 測試
34      * 使用DOM的XML解析器 - 解析符合XML格式的字符串
35      * <user>
36      *   <name>zhangwuji</name>
37      * </user>
38      */
39     var xmlDoc = parseXML("<user id='u' name='u'><name>zhangwuji</name></user>");
40     //console.log(xmlDoc);
41     /*
42      * DOM解析XML與解析HTML沒有任何區別
43      * * 注意
44      *   * DOM解析XML使用ById或ByName兩個方式
45      *   * 實際開發中只用getElementsByTagName()方法
46      *   * 緣由 - 屬性值在XML格式中都是有效數據
47      */
48     var userEle = xmlDoc.getElementsByName("u")[0];
49     console.log(userEle);
View Code

　　示例：

 1     var btn = document.getElementById("btn");
 2     btn.onclick = function(){
 3         // 實現Ajax的異步交互
 4         var xhr = getXhr();
 5         xhr.open("post","07.php");
 6         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 7         /*
 8          * 如何構建符合XML格式的請求數據
 9          * * 注意
10          *   * 請求數據的格式 - key=value 不能改變的
11          * * 將value值構建成符合XML格式的數據
12          *   * 數據類型 - 字符串(string)
13          *   * 格式符合XML的語法要求
14          * * 編寫注意
15          *   * 定義變量 - 專門構建XML格式的數據
16          *   * 在send()方法進行拼串
17          */
18         var user = "<user><name>zhangwuji</name><pwd>123456</pwd></user>";
19         xhr.send("user="+user);
20         xhr.onreadystatechange = function(){
21             if(xhr.readyState==4&&xhr.status==200){
22                 // 接收服務器端的響應數據
23                 var xmlDoc = xhr.responseXML;
24                 var nameEle = xmlDoc.getElementsByTagName("name")[0];
25                 var txtEle = nameEle.childNodes[0];
26                 console.log(txtEle.nodeValue);
27             }
28         }
29     }
30     function getXhr(){
31         var xhr = null;
32         if(window.XMLHttpRequest){
33             xhr = new XMLHttpRequest();
34         }else{
35             xhr = new ActiveXObject("Microsoft.XMLHttp");
36         }
37         return xhr;
38     }
View Code 
 1 <?php
 2     // 接收客戶端發送的請求數據
 3     $user = $_POST['user'];//符合XML格式要求的string類型
 4     //var_dump($user);
 5     // 建立DOMDocument對象
 6     $doc = new DOMDocument();
 7     // 調用loadXML()方法
 8     $result = $doc->loadXML($user);
 9     //var_dump($doc);
10     
11     // 如何構建符合XML格式的數據
12     /* 修改響應頭的Content-Type值爲"text/xml"
13     header('Content-Type:text/xml');
14     echo $user;// 符合XML格式的string類型
15     */
16     
17     header('Content-Type:application/xml');
18     echo $doc->saveXML();
19 ?>
View Code

 

 

JSON (JavaScript Object Notation) 格式
　　JSON 數據格式源於 Javascript (JS原生支持)
　　JSON 的結構

　　　　* Array - 數組
　　　　* Object - 對象
　　　　* 支持的數據類型
　　　　　　* String字符串
　　　　　　* Number數值
　　　　　　* Boolean - true|false
　　　　　　* Object
　　　　　　* Array
　　　　　　* null　　

　　Ajax中的JSON格式
　　　　* 請求格式爲JSON

　　　　　　* 客戶端向服務器端發送請求爲JSON格式的數據
　　　　　　　　* 構建符合JSON格式的字符串
　　　　　　　　* 保證定義字符串時,使用單引號(裏面使用雙引號)
　　　　　　* 服務器端接收JSON格式的數據
　　　　　　　　* 接收客戶端的數據
　　　　　　　　* 使用json_decode()函數進行解析
　　　　　　　　　　json_decode($json,true)　　　

　　　* 響應格式爲JSON
　　　　　　* 服務器端向客戶端發送響應爲JSON格式的數據
　　　　　　　　* 使用json_encode()函數將PHP變量(array)轉換成符合JSON格式的字符串
　　　　　　* 客戶端接收JSON格式的數據
　　　　　　　　* 使用XMLHttpRequest對象的responseText屬性接收
　　　　　　　　　　* 沒有responseJSON屬性
　　　　　　　　　　* 使用eval()函數進行轉換

　　示例：

 1     var btn = document.getElementById("btn");
 2     btn.onclick = function(){
 3         var xhr = getXhr();
 4         xhr.open("post","10.php");
 5         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 6         /*
 7          * 在客戶端如何構建JSON格式
 8          * * 構建符合JSON格式的字符串
 9          */
10         var user = '{"name":"zhangwuji","pwd":"123456"}';
11         xhr.send("user="+user);
12         xhr.onreadystatechange = function(){
13             if(xhr.readyState==4&&xhr.status==200){
14                 var data = xhr.responseText;
15                 /*
16                  * 使用eval()函數進行轉換
17                  * * 使用"()"將其包裹,eval()函數強制將其轉換爲JSON格式(javascript代碼)
18                  * * 不使用"()"將其包裹,eval()函數將其識別爲一個空的代碼塊
19                  */
20                 var json = eval("("+data+")");
21                 console.log(json);
22             }
23         }
24     }
25     function getXhr(){
26         var xhr = null;
27         if(window.XMLHttpRequest){
28             xhr = new XMLHttpRequest();
29         }else{
30             xhr = new ActiveXObject("Microsoft.XMLHttp");
31         }
32         return xhr;
33     }
View Code

 

 1 <?php
 2     // 接收客戶端發送的請求數據
 3     $user = $_POST['user'];
 4     // 就是一個JSON格式的string字符串
 5     //var_dump($user);
 6     
 7     $json_user = json_decode($user,true);
 8 
 9     //var_dump($json_user['name']);
10 
11     $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
12     //var_dump(json_decode($json));
13     
14     // 響應數據符合JSON格式的字符串
15     // 1. 手工方式構建
16     //echo '{"name":"zhouzhiruo","pwd":"123456"}';
17 
18     // 2. 使用json_encode()函數
19     echo json_encode($json_user);
20 ?>
View Code

 

HTML(文本格式)、XML格式及JSON格式的優缺點 　　* HTML格式 　　　　* 優勢 - 簡單 　　　　* 缺點 - 解析複雜 　　* XML格式 　　　　* 優勢 - 易於構建複雜數據 　　　　* 缺點 - 構建、解析複雜 　　* JSON格式 　　　　* 優勢 - 輕量級 　　　　* 缺點 - 可能轉換失敗

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