Ajax學習筆記

一、XMLHttpRequest（XHR）對象創建

var request;
if(window.XMLHttpRequest){
    request = new XMLHttpRequest();
}else{
    request = new ActiveXObiect("Microsoft.XMLHTTP");
}

二、Ajax-HTTP請求

1、一個完整的HTTP請求過程的七個步驟
（1）建立TCP連接
（2）Web瀏覽器向Web服務器發送請求命令
（3）Web瀏覽器發送請求頭信息
（4）Web服務器應答
（5）Web服務器發送應答頭信息
（6）Web服務器向Web瀏覽器發送數據
（7）Web服務器關閉TCP連接

2、HTTP請求的四個組成部分
（1）HTTP請求的方法或動作，比如是GET或者POST請求
（2）正在請求的URL，即請求的地址
（3）請求頭，包括客戶端環境信息，身份驗證信息等
（4）請求體，即請求正文，包括客戶提供的查詢字符串信息，表單信息等等

3、HTTP響應的三個組成部分
（1）一個數字和一個文字組成的響應碼，用來顯示成功或失敗
（2）響應頭，例如服務器類型，日期時間，內容類型和長度等
（3）響應體，即響應正文

4、GET & POST
（1）GET請求

一般用於信息獲取
使用URL傳遞參數
對所發送信息的數量也有限制，一般爲2000個字符
數據對任何人可見

（2）POST請求

一般用於修改服務器上的資源
對所發送信息的數量無限制

三、XMLHttpRequest發送請求

1、open(method, url, async);

method:請求的方法：get|post
url：請求文檔的絕對路徑/相對路徑
async：是否異步請求：true(default)|false

2、send(string); //把請求發送到服務器

使用get請求時，參數填寫在url中，所以send()的參數可以不填寫；
使用post請求時，參數一定要填寫。
應用實例：

request.open('get', 'get.php', true);
request.send();

request.open('post', 'post.php', true);
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send('name=Lily&age=18');
/*setRequestHeader()必須寫在open()和send()之間*/

四、XMLHttpRequest取得響應

responseText：獲得字符串形式的響應數據
responseXML：獲得XML形式的響應數據
status和statusText：以數字和文本形式返回HTTP狀態碼
getAllResponseHeader()：獲取所有的響應報頭
getResponseHeader()：查詢響應中某個字段的值
readyState屬性：
0：請求未初始化，open還沒有調用
1：服務器連接已經建立，open已經調用了
2：請求已接收，即接收到頭信息了
3：請求處理中，即接收到響應主體了
4：請求已完成，且響應已就緒，也就是響應完成了

var request = newXMLHttpRequest();
request.open('get', 'get.php', true);
request.send();

request.onreadystatechange = function(){
    if(request.readyState === 4 && request.status === 200){
        //做一些事情 request.responseText
    }
};

五、原生Ajax應用實例

1、service.php

<?php
//設置頁面內容是html編碼格式是utf-8
header("Content-Type: text/plain;charset=utf-8");
//header("Content-Type: application/json;charset=utf-8");
//header("Content-Type: text/xml;charset=utf-8");
//header("Content-Type: text/html;charset=utf-8");
//header("Content-Type: application/javascript;charset=utf-8");

//定義一個多維數組，包含員工的信息，每條員工信息爲一個數組
$staff = array
(
    array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"),
    array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發工程師"),
    array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產品經理")
);

//判斷如果是get請求，則進行搜索；如果是POST請求，則進行新建
//$_SERVER是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用global關鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
    create();
}

//通過員工編號搜索員工
function search(){
    //檢查是否有員工編號的參數
    //isset檢測變量是否設置；empty判斷值爲否爲空
    //超全局變量 $_GET 和 $_POST 用於收集表單數據
    if (!isset($_GET["number"]) || empty($_GET["number"])) {
        echo "參數錯誤";
        return;
    }
    //函數之外聲明的變量擁有 Global 作用域，只能在函數以外進行訪問。
    //global 關鍵詞用於訪問函數內的全局變量
    global $staff;
    //獲取number參數
    $number = $_GET["number"];
    $result = "沒有找到員工。";

    //遍歷$staff多維數組，查找key值爲number的員工是否存在，如果存在，則修改返回結果
    foreach ($staff as $value) {
        if ($value["number"] == $number) {
            $result = "找到員工：員工編號：" . $value["number"] . "，員工姓名：" . $value["name"] .
                "，員工性別：" . $value["sex"] . "，員工職位：" . $value["job"];
            break;
        }
    }
    echo $result;
}

//創建員工
function create(){
    //判斷信息是否填寫完全
    if (!isset($_POST["name"]) || empty($_POST["name"])
        || !isset($_POST["number"]) || empty($_POST["number"])
        || !isset($_POST["sex"]) || empty($_POST["sex"])
        || !isset($_POST["job"]) || empty($_POST["job"])) {
        echo "參數錯誤，員工信息填寫不全";
        return;
    }
    //TODO: 獲取POST表單數據並保存到數據庫

    //提示保存成功
    echo "員工：" . $_POST["name"] . " 信息保存成功！";
}

2、demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        *{
            font-size: 20px;
            line-height: 1.8;
        }
    </style>
</head>
<body>

    <h1>員工查詢</h1>
    <label>請輸入員工編號：</label>
    <input type="text" id="keyword"/><br>
    <button id="search">查詢</button>

    <p id="searchResult"></p>

    <h1>員工新建</h1>
    <label>請輸入員工姓名：</label>
    <input type="text" id="staffName"/><br>

    <label>請輸入員工編號：</label>
    <input type="text" id="staffNumber"/><br>

    <label>請輸入員工性別：</label>
    <select id="staffSex">
        <option value="男">男</option>
        <option value="女">女</option>
    </select><br>

    <label>請輸入員工職位：</label>
    <input type="text" id="staffJob"/><br>

    <button id="save">保存</button><br>

    <p id="createResult"></p>

    <script>
        document.getElementById("search").onclick = function () {
//            發送Ajax請求並處理
            var request = new XMLHttpRequest();
            request.open("GET","service.php?number=" + document.getElementById("keyword").value);
            request.send();
            request.onreadystatechange = function () {
                if(request.readyState === 4){
                    if(request.status === 200){
                        document.getElementById("searchResult").innerHTML = request.responseText;
                    }else{
                        alert("發生錯誤" + request.status);
                    }
                }
            }
        };

        document.getElementById("save").onclick = function() {
            var request = new XMLHttpRequest();
            request.open("POST", "service.php");
            var data = "name=" + document.getElementById("staffName").value
                + "&number=" + document.getElementById("staffNumber").value
                + "&sex=" + document.getElementById("staffSex").value
                + "&job=" + document.getElementById("staffJob").value;
            request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            request.send(data);
            request.onreadystatechange = function() {
                if (request.readyState===4) {
                    if (request.status===200) {
                        document.getElementById("createResult").innerHTML = request.responseText;
                    } else {
                        alert("發生錯誤：" + request.status);
                    }
                }
            }
        };
    </script>
</body>
</html>

六、Ajax-JSON

json在js中的解析

eval(‘(’ + jsondata + ‘)’)；
eval()不會看json中的字符串是否合法，而且json字符串中的一些方法會直接被執行，因此不安全，不推薦。
JSON.parse(jsondata);

七、用jQuery實現Ajax(重點)

jQuery.ajax([settings]);

type：GET(default)|POST
url：發送請求的地址
data：是一個對象，連同請求發送到服務器的數據
dataType：預期服務器返回的數據類型，一般設置爲“json”
success：是一個方法，請求成功後的回調函數。傳入返回後的數據，以及包含成功代碼的字符串
error：是一個方法，請求失敗時調用此函數。傳入XMLHttpRequest對象。

JS文件：

    $(function () {
        $("#search").click(function () {
            $.ajax({
                type:"GET",
                url:"service.php?number=" + $("#keyword").val(), 
                dataType:"json",
                success:function (data) {
                    if(data.success){
                        $("#searchResult").html(data.msg);
                    }else{
                        $("#searchResult").html("出現錯誤" + data.msg);
                    }
                },
                error:function (jqXHR) {
                    alert("發生錯誤：" + jqXHR.status);
                }
            });
        });

        $("#save").click(function () {
            $.ajax({
                type:"POST",
                url:"service.php",
                dataType:"json",
                data:{
                   name:$("#staffName").val(),
                   number:$("#staffNumber").val(),
                   sex:$("#staffSex").val(),
                   job:$("#staffJob").val()
                },
                success:function (data) {
                    if(data.success){
                        $("#createResult").html(data.msg);
                    }else{
                        $("#createResult").html("出現錯誤" + data.msg);
                    }
                },
                error:function (jqXHR) {
                    alert("發生錯誤：" + jqXHR.status);
                }
            });
        });

    });

一、XMLHttpRequest（XHR）對象創建

二、Ajax-HTTP請求

三、XMLHttpRequest發送請求

四、XMLHttpRequest取得響應

五、原生Ajax應用實例

六、Ajax-JSON

七、用jQuery實現Ajax(重點)

CSS3 3d特效學習筆記

angularJS監聽路由變化改變頁面內容

【項目心得】在微信網頁上的點擊按鈕複製功能

Ajax學習筆記

【轉載】微信小程序教程系列

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結