入門到實操：AJAX：前後臺數據交互搬運工

AJAX Asynchronous JavaScript and XML‘’數據傳輸格式‘’ （異步JavaScript和XML數據傳輸格式）

AJAX的優勢
：節省用戶操作，時間，提高用戶體驗，減少數據請求傳輸獲取數據

這裏提到的同步和異步，是和現實生活中截然不同的：

**同步：**阻塞，當前程序運行，必須等前一個程序運行完畢以後，才能運行

**異步：**非阻塞，當前程序運行，和前面程序的運行沒有任何關係。（所以我們常用異步處理）

數據傳輸的兩種格式

1.XML （大型門戶網站，網易，新浪等）

優點：
1.種類豐富
2.傳輸量非常大
缺點：
1.解析麻煩
2.不太適合輕量級數據（數據比較多）

2.JSON (95%移動端應用使用的json，常用於移動端)

優點：
1.輕量級數據
2.解析輕鬆
解析：1.JSON.pare()
2.JSON.stringify()
缺點：（相對概念）
1.數據種類比較少
2.傳輸數據量比較小
JSON的使用方法如下：
比如我們要去買一個傢俱，我們選好傢俱後需要在運輸過程中將其拆卸運輸，運送到家後再進行組裝

所以JSON中提供JSON.stringify（） JSON.parse() 將原函數中的數據轉化爲字符串進行傳輸傳輸到了後再轉換爲數據的結構

        宜家（買）        運輸        我家
        裝好的           拆掉         裝好

	前端                                運輸                後端
數據結構（數組，對象）     字符串            數據結構
                    XML/JSON                XML/JSON 
              JSON.stringify（）      JSON.parse()

JSON.stringify（）數據結構轉換爲字符串
JSON.parse() 字符串 =》數據結構

注意在服務器PHP端中也有兩個轉換方法

json_encode() 將數據結構轉換成字符串

json_decode() 將字符串轉換成對應的數據結構

ajax下載數據語法步驟（get方法）

1.創建ajax對象

var xhr =new XMLHttpRequest();

XMLHttpRequest IE8一下不兼容
IE8以下聲明ajax的方法是

ActiveXObject("Microsoft.XMLHTTP");

所以我們需要寫成兼容模式

var xhr =null;   //兼容模式
                try{
                    xhr = new XMLHttpRequest();
                }catch(error){
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }

2.調用open（默認get方法）

xhr.open("get","1.txt",true);

第一個參數：請求方式 get post
第二個參數： url
第三個參數：是否異步
true：異步
false 同步

3.調用send 發送

xhr.send();

4.等待數據響應

xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        alert(xhr.responseText);
                    }
                }

這裏需要注意一個函數：
responseText ：返回以文本形式存放
responseXML : 返回XML形式的內容
xhr.readyState 發生錯誤的時候調用（請求狀態）
0 (初始化)調用open方法之前
1 （載入）已調動send（）方法，正在發送請求
2 （載入完成）send方法完成，已收到全部響應
3 （解析）正在解析響應內容
4 （完成）響應內容解析完成，可以在客戶端調用了

HTTP 狀態碼 ajax.status
AJAX 狀態碼說明：ajax.status == 200 表明HTTP狀態正常
404代表錯誤等等，這裏大家可以自己查一下。

對AJAX有了基本的認識，那麼如何利用AJAX實現數據的收集，下載呢

form向服務器上傳數據

1.GET方法
get方法：是直接將數據拼接在url後面進行提交。通過？進行拼接，查詢字符串

HTML標籤如下：
action ： 點擊sumbit以後跳轉到的url

metgod : 表單的提交數據的方式

<form action="1.get.php" method="get">
     <input type="text" name='username' placeholder="用戶名">
     <input type="text" name="age" placeholder="年齡">
     <input type="password" name="password" placeholder="請輸入你的密碼">
    <input type="submit">
</form>

PHP服務器設置如下：

<?php
    header('content-type:text/html;charset="utf-8"');
    error_reporting(0);
    //系統或者應用程序出錯時彈出的，錯誤報告，編程人員根據這個報告的內容可以判斷是那一段代碼出錯

    /* 
        $_GET (全局的關聯數組)  存放通過get提交 提交的所有數據

     */
    $username= $_GET['username'];
    $age = $_GET['age'];
    $password = $_GET['password'];

    echo "你的名字：{$username},你的年齡是{$age},密碼：{$password}";
    ?>

執行結束後網頁爲：
http://localhost/php/1.get.php?username=raoyangjun&age=22&password=123456
get方法
優點：
簡單，直接在url中修改就可以重新提交
缺點：
1.不安全
2.地址欄中的數據最大2kb
3.沒法實現上傳

POST方法：
post的提交方法：post提交通過瀏覽器內部進行提交
action ：點擊sumbit以後跳轉到的url
metgod : 表單的提交數據的方式

HTML:注意：使用post方法form標籤屬性應添加enctype=“application/x-www-form-urlencoded”

<form action="1.post.php" method="POST" enctype="application/x-www-form-urlencoded">
         <input type="text" name='username' placeholder="用戶名">
         <input type="text" name="age" placeholder="年齡">
         <input type="password" name="password" placeholder="請輸入你的密碼">
        <input type="submit">
  </form>

PHP：

<?php
    header('content-type:text/html;charset="utf-8"');
    error_reporting(0);
    //系統互毆應用程序出錯時彈出的，錯誤報告，編程人員根據這個報告的內容可以判斷是那一段代碼出錯

    /* 
        $_POST (全局的關聯數組)  存放通過POST提交 提交的所有數據

     */
    $username= $_POST['username'];
    $age = $_POST['age'];
    $password = $_POST['password'];

    echo "你的名字：{$username},你的年齡是{$age},密碼：{$password}";
    ?>

執行結束後的url：http://localhost/php/1.post.php
好處：
1.安全
2.理論上沒有上限
3.上傳
缺點：比get複雜（底層）;

2.從服務器下載數據

AJAX_GET 方法：

服務器數據：

$username= $_GET['username'];
$age = $_GET['age'];
$password = $_GET['password'];

echo "你的名字：{$username},你的年齡是{$age},密碼：{$password}";

HTML頁面請求下載

 oBtn.onclick = function(){
                var xhr =null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(error){
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open("get","1.get.php?username=yyy&age=19&password=123abc",true);
                xhr.send();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        //判斷本次下載的狀態碼是多少
                        if(xhr.status==200){
                            alert("下載成功");
                            alert(xhr.responseText);
                        }else{
                            alert("Error"+xhr.status);
                        }
                        
                    }
          }

AJAX_POST 方法

服務器數據：

$username= $_POST['username'];
$age = $_POST['age'];
$password = $_POST['password'];

echo "你的名字：{$username},你的年齡是{$age},密碼：{$password}";

HTML頁面請求下載

oBtn.onclick = function(){
                var xhr =null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(error){
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open("post","1.post.php",true);
                //設置send請求格式
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

                /* 
                    post提交的數據，需要通過send方法進行提交

                    ？name1=value&name2=value2   search
                        name1=value&name2=value2    querystring
                 */
                xhr.send("username=yyy&age=19&password=123abc");
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        //判斷本次下載的狀態碼是多少
                        if(xhr.status==200){
                            alert("下載成功");
                            alert(xhr.responseText);
                        }else{
                            alert("Error"+xhr.status);
                        }
                        
                    }
                }

注意GET 與 POST 方法下載數據的不同語法之處

GET方法中：

open的方法

xhr.open("get","1.get.php?username=yyy&age=19&password=123abc",true);

send的方法

 xhr.send();

POST 方法中

open的方法

xhr.open("post","1.post.php",true);

send方法，需要先設置send請求格式，寫在send方法前

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

send方法

xhr.send("username=yyy&age=19&password=123abc");

ajax框架函數

學習到這裏我們對AJAX的整體都有一定的瞭解了，其實在實際開發中我們常常將AJAX的方法進行函數封裝，使用時只需調用該函數即可：

框架如下：（大家還是要自己分析哦）

框架中的函數：
method get/post
url 1.get.php / 1.post.php
data 數據
success 數據下載成功以後執行的函數
error 數據下載失敗後執行的函數

        function $ajax({method = "get", url ,data,success,error}){
            var xhr =null;
            try{
                xhr = new XMLHttpRequest();
            }catch(error){
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if(data){
                data = querystring(data);
            }
            if(method == 'get' && data){
                url +="?"+data;
            }
            xhr.open(method,url,true);
            if(method == 'get'){
                xhr.send();
            }else{
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
                xhr.send(data);
            }
            
            xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        if(success){
                           /* 
                           如何去處理數據操作不確定
                           使用回調函數:
                            */
                            success(xhr.responseText);
                        }else{
                            if(error){
                            error('Error'+xhr.status);
                            }
                        }
                        
                    }
                }
        }
        function querystring(obj){
             var str = '';
             for(var attr in obj){
                str +=  attr +"="+obj[attr]+"&";
             }
             return str.substring(0,str.length-1);
         }

總結：
前後端交互的流程：
1.通過ajax下載數據
2.分析數據，轉成對應的數據結構
3.處理數據

入門到實操：AJAX：前後臺數據交互搬運工

AJAX Asynchronous JavaScript and XML‘’數據傳輸格式‘’ （異步JavaScript和XML數據傳輸格式）

ajax下載數據語法步驟（get方法）

form向服務器上傳數據

2.從服務器下載數據

注意GET 與 POST 方法下載數據的不同語法之處

ajax框架函數

DAPPER 事務 TRANSACTION

Java中線程的創建方式

一鍵自動化博客發佈工具,chrome和firfox詳細配置

Java線程的同步--線程安全的原因及解決方法

JavaScript中Math對象，日期對象的使用。以及定時器，秒錶，實時更新系統時間實例

CSS選擇器的應用於區分

MySQL數據庫，DOS界面操作語法，常用SQL語句，連接數據庫：八個步驟（天龍八部）

入門到實操：AJAX：前後臺數據交互搬運工

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結