在所有的教程中，不管是網(wǎng)上的資料還是書籍上。都說，想要學(xué)會(huì)ajax，需要提前學(xué)會(huì)html+css+javascript就行了，然后很多前端初學(xué)者們就開始學(xué)，結(jié)果發(fā)現(xiàn)照著例子寫了半天愣是沒啥反應(yīng)，最終果斷放棄~
其實(shí)……你們沒有搭建后臺(tái)環(huán)境啊，親~
1.先搭建一個(gè)后臺(tái)環(huán)境吧？比如php
對(duì)于我們~前端的初學(xué)者來說，哪有這么多精力時(shí)間去精學(xué)PHP啊，對(duì)吧？所以呢，推薦一個(gè)php環(huán)境搭建：phpstudy，只要下一步下一步的安裝就OK了。
我將PHPStudy安裝到了D盤，所以進(jìn)入D盤找到phpstudy文件夾里面的WWW文件夾
WWW文件夾就相當(dāng)于我們電腦上的服務(wù)器了，以后寫的所有東西，全部放到WWW文件夾中。
在我們的WWW文件夾下面創(chuàng)建兩個(gè)文件，index.html和handle.php
讓我們測(cè)試一下，在剛才新建的index.html中隨便寫點(diǎn)代碼。打開瀏覽器，輸入localhost敲擊回車，如果能打開剛才寫的網(wǎng)頁(yè)，那么就說明我們搭建成功
如果失敗，可能是端口沖突，也有可能是phpstudy木有運(yùn)行~自己查一查調(diào)試一下
2.讓我們用PHP寫一個(gè)簡(jiǎn)單的后臺(tái)應(yīng)用吧~
index.html
<body>
<form action="index.html" method="GET">
<label for="name">姓名</label>
<input type="text" id="name" name="name">
<input type="submit" value="提交">
</form>
</body>
不知道你們表單學(xué)的咋樣，所以嘮叨兩句：GET代表我們要使用的傳輸方式，對(duì)應(yīng)的還有POST；
input標(biāo)簽當(dāng)中的id對(duì)應(yīng)的是label標(biāo)簽當(dāng)中的for屬性；
input標(biāo)簽當(dāng)中的name屬性，一會(huì)要對(duì)接PHP使用；
handle.php
<meta charset="utf-8">
<!--其實(shí)我的這個(gè)寫法有點(diǎn)取巧了,先湊合著看-->
<?php
$student=array(
array("name"=>"張三","sex"=>"男","age"=>"20"),
array("name"=>"李麗","sex"=>"女","age"=>"19"),
array("name"=>"王二","sex"=>"男","age"=>"21")
);
$str="沒有找到這個(gè)學(xué)生";
$name=$_GET["name"];
foreach ($student as $value) {
if($value["name"]==$name){
$str=$value["name"].",".$value["index"].",".$value["sex"].",".$value["age"];
break;
};
};
echo $str;
?>
3.換成Ajax的寫法！
index.html
html:
<h1>請(qǐng)輸入姓名：</h1>
<input type="text" id="name">
<button onclick="submit()">提交</button>
<div id="text"></div>
javascript:
function submit(){
var name=document.getElementById('name').value
var text=document.getElementById('text')
var XHR=new XMLHttpRequest();
XHR.open("GET","handle.php?name="+name);
XHRsend();
XHR.onreadystatechange=function(){
text.innerHTML=XHR.responseText
}
注意：
如果有人把源代碼中的 text.innerHTML=XHR.responseText 改成了 alert(XHR.responseTXT),你將會(huì)發(fā)現(xiàn)，命令將會(huì)被執(zhí)行多次。這個(gè)時(shí)候，就要稍微的改一下代碼了：(原因，在文章后面你會(huì)找到)
......
XHR.onreadystatechange=function(){
if(XHR.readyState==4){alert(XHR.responseText)};
}
......
4.例子已經(jīng)成功了，那我們就正式進(jìn)入學(xué)習(xí)吧~
ajax的優(yōu)勢(shì)
在我們的第一個(gè)例子當(dāng)中，是通過submit按鈕提交到php后臺(tái)，然后再進(jìn)行數(shù)據(jù)的處理操作。
這種操作呢，有一個(gè)弊端，就是需要把一整頁(yè)的數(shù)據(jù)同時(shí)提交到后臺(tái)。
舉個(gè)栗子
如果我們?cè)谝粋€(gè)網(wǎng)站進(jìn)行注冊(cè)，填寫完了昵稱，密碼，性別，年齡等信息，提交過去之后，后臺(tái)告訴你昵稱已被使用，OK我們將昵稱，密碼，性別，年齡等，通通重寫，等再次提交過去，又告訴你昵稱依然已被使用。這時(shí)候你起了一個(gè)非常非常LOW的名字，心想，這回不會(huì)再出問題了吧？結(jié)果提交過去之后，后臺(tái)告訴你，你的密碼過短需再次重新填寫信息。恩~放棄了吧！
如果使用ajax技術(shù)呢？我們可以將數(shù)據(jù)逐條的提交到后臺(tái)，也可以隨時(shí)隨地的提交。比如說，你填寫完昵稱，后臺(tái)立馬告訴你昵稱被用，OK，改了就是嘍~。
AJAX的使用
1.創(chuàng)建AJAX
var XHR=new XMLHttpRequest();
2.向服務(wù)器發(fā)送請(qǐng)求
XHR.open("GET","handle.php",true);
XHR.send();
open里面有三個(gè)參數(shù)，分別為數(shù)據(jù)傳輸方式，傳輸文件，是否異步
當(dāng)我們的傳輸方式為POST的時(shí)候，就會(huì)用上send(),如果是GET方式，推薦在send里面寫上參數(shù)null
3.GET vs POST
一句話：get更快，post更強(qiáng)
4.服務(wù)器響應(yīng) —— 你把值傳過去了，咋也得傳回來點(diǎn)什么吧？
| 屬性 | 描述 |
|---|---|
| responseText | 獲得字符串形式的響應(yīng)數(shù)據(jù)。 |
| responseXML | 獲得 XML 形式的響應(yīng)數(shù)據(jù)。 |
XHR.responseText;
XHR.responseXML;
5.響應(yīng)事件——什么時(shí)候才能返回?cái)?shù)據(jù)嘞？
onreadystatechange 事件
兩個(gè)屬性：
readyState
status
每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。
XHR.onreadystatechange=function(){
console.log(XHR.readyState)
console.log(XHR.responseText)
| 屬性 | 描述 |
|---|---|
| readyState | 返回XMLHttpRequest的狀態(tài) 0.請(qǐng)求未初始化 1.服務(wù)器已建立連接 2.請(qǐng)求已接收 3.請(qǐng)求正在處理 4.請(qǐng)求完成，響應(yīng)就緒 |
| status | 200：“ok” 404：出錯(cuò)，未找到頁(yè)面 |
