ajax是一個(gè)老生常談的問(wèn)題，其實(shí)并不復(fù)雜，不過(guò)是因?yàn)槔锨拜呁ㄟ^(guò)這樣的請(qǐng)求方式玩出了很多花樣，迷亂了萌新的眼睛，話不多說(shuō)。
下面是我貼出的用"GET"和“POST”兩種方法
完整的GET請(qǐng)求
var Ajax = new XMLHttpRequest(); //創(chuàng)建ajax
Ajax.open("GET","controller.php?request=data",true)//創(chuàng)建ajax請(qǐng)求方式、地址加數(shù)據(jù)、異步
Ajax.send();//發(fā)起ajax請(qǐng)求
request.onreadystatechange = function () {
if (request.readyState === 4) {//判斷響應(yīng)是否步驟完成
if (request.status === 200) {//判斷狀態(tài)碼是否正常
//響應(yīng)成功,拋出數(shù)據(jù)
} else {
//響應(yīng)失敗,報(bào)錯(cuò)
}
}
};
完整的POST請(qǐng)求
var Ajax = new XMLHttpRequest();//創(chuàng)建ajax
Ajax.open("POST","controller.php",true);//創(chuàng)建ajax請(qǐng)求方式、地址、異步
Ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");//創(chuàng)建信息頭
Ajax.send("name=九歌&job=程序員");//發(fā)起ajax請(qǐng)求和數(shù)據(jù)
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
//響應(yīng)成功,拋出數(shù)據(jù)
} else {
//響應(yīng)失敗,報(bào)錯(cuò)
}
}
};
//注意：
//因?yàn)間et是url傳值，所以不用額外再send()方法中傳值
//因?yàn)閜ost請(qǐng)求的特殊性，必須必須必須寫好寫清楚信息頭
上面兩段代碼是對(duì)ajax基本語(yǔ)法和使用方法，如果你第一次接觸到ajax，可能還是覺(jué)得一頭霧水，那么我現(xiàn)在解釋一下原理，首先ajax是寫在script里，可以理解成通過(guò)XMLHTTPRequest方法來(lái)實(shí)現(xiàn)的一個(gè)異步傳輸，而且我們整個(gè)要學(xué)習(xí)的就是JavaScript里面XMLHTTPRequest的一個(gè)方法。
OK，上面已經(jīng)貼出了XMLHTTPRequest的基本語(yǔ)法和使用規(guī)范，新手我就建議到這里后在上去看三邊代碼并記住方法，成功完成一次簡(jiǎn)單的ajaxGET請(qǐng)求。
已經(jīng)到了實(shí)踐操作環(huán)節(jié)，可能還是覺(jué)得有點(diǎn)無(wú)法動(dòng)手，好，我再貼一個(gè)列子出來(lái)，下面是一個(gè)通過(guò)XMLHTTPRequest方法來(lái)查詢獲取數(shù)據(jù)的一個(gè)小方法
html文件
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">三國(guó)人物錄</a>
</div>
<div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" id="keyword" class="form-control" placeholder="輸入人物編號(hào)">
</div>
</form>
</div>
<button type="submit" id="query" class="btn btn-default">查詢</button>
</div>
</nav>
<span>信息為：<p class="pre-scrollable" class="text-center" id="createResult"></p></span>
<script>
//由點(diǎn)擊query事件觸發(fā)查詢查詢事件
document.getElementById("query").onclick = function()
{
var request = new XMLHttpRequest();
request.open("GET", "ajax.php?number=" + document.getElementById("keyword").value ,true);
request.send();
request.onreadystatechange = function()
{
if (request.readyState === 4)
{
if (request.status === 200)
{
document.getElementById("createResult").innerHTML = request.responseText;
}
else
{
alert("發(fā)生錯(cuò)誤：" + request.status);
}
}
}
}
</script>
</body>
</html>
php文件(不懂PHP語(yǔ)言不要緊，下面的文檔可以直接復(fù)制，另存文件名為ajax.php)
<?php
//設(shè)置頁(yè)面內(nèi)容是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");
//建立多維數(shù)據(jù)，寫入初始化信息
$staff = array
(
array('name' => "曹操","number" => "101","sex" => "男","job" => "魏武帝"),
array('name' => "荀攸","number" => "102","sex" => "男","job" => "軍師"),
array('name' => "張遼","number" => "103","sex" => "男","job" => "將軍"),
);
//根據(jù)請(qǐng)求方式來(lái)判斷是運(yùn)行什么操作，GET是查詢search()，POST獲取報(bào)錯(cuò)。
if ($_SERVER["REQUEST_METHOD"] == "GET")
{
search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST")
{
echo "使用GET方法"；
//報(bào)錯(cuò)
}
//建立srarch方法來(lái)查詢數(shù)組
function search(){
//判斷是否有員工id
//isset檢測(cè)是否設(shè)置id，empty判斷數(shù)據(jù)是否為空
if(!isset($_GET["number"]) || empty($_GET["number"]))
echo "參數(shù)錯(cuò)誤";
return;
//使用global將函數(shù)變量設(shè)置全局變量
global $staff;
$number = $_GET["number"];
$result = "該人物沒(méi)有收錄";
//查詢?nèi)宋镄畔?//使用foreach遍歷多維數(shù)組$staff，通過(guò)查詢key值為number的數(shù)據(jù)，并返回拼接結(jié)果
foreach ($staff as $value) {
if ($value["number"] == $number) {
$result = "找到人物：人物編號(hào)：" . $value["number"] . "，人物姓名：" . $value["name"] .
"，人物性別：" . $value["sex"] . "，人物身份：" . $value["job"];
break;
}
}
echo $result;
}
?>
再PHP文件中建立數(shù)組，省去了搭建數(shù)據(jù)庫(kù)的麻煩，不了解PHP語(yǔ)言的同學(xué)可以直接復(fù)制代碼另存為ajax.php使用，我就不多BBPHP語(yǔ)言了
現(xiàn)在我在理一遍這個(gè)步驟和邏輯，希望你可以馬上動(dòng)手實(shí)踐，
1.建立html文件，并設(shè)置關(guān)鍵buttonid，在script中建立觸發(fā)button條件，接著new XMLHTTPRequest（）方法開始你的ajax請(qǐng)求
2.open方法挨著寫入請(qǐng)求方式、請(qǐng)求地址url后面拼接地址、異步傳輸（默認(rèn)）
3.send方法發(fā)起請(qǐng)求
4.onreadystatechange依次判斷readyState === 4和request.status === 200請(qǐng)求是否成功。
備注：在沒(méi)有PHP文件時(shí)，怎么判斷你的ajax請(qǐng)求是否生效？
打開你的瀏覽器的控制器看看下面這4個(gè)參數(shù)
好，打完收工（ps：文筆不好請(qǐng)見諒，還是歡迎提出問(wèn)題）
