ajax是js中與后端交互的方法
在我們練習的時候雨席，需要先將電腦變成一臺服務器菩咨，使用node或者nginx。后期我們做項目的時候陡厘，會有專用的服務器
js中總體來說分為四步：1抽米、創(chuàng)建變量；2糙置、準備數(shù)據(jù)云茸；3、發(fā)送請求谤饭；4接收數(shù)據(jù)亡容；
最簡單的代碼如下
// ajax 最重要的是1個對象 【XMLHttpRequest 對象】
// 1. 創(chuàng)建對象
var xhr = new XMLHttpRequest();
// 2. 調(diào)用此對象中【 準備】（打開）方法
// 參數(shù)1： 請求數(shù)據(jù)的方式 GET / POST ， put 等
// 參數(shù)2： 請求數(shù)據(jù)的地址
// 參數(shù)3： false 是同步的方式列敲， true 就是異步
xhr.open("GET", "http://localhost:8080/ajax/ajaxtest", false);
// 3. 發(fā)送
xhr.send();
// 4. 獲取數(shù)據(jù)
console.log( xhr.responseText );
new XMLHttpRequest()代表著創(chuàng)建一個ajax對象
open是這個ajax對象中的方法，里面包含三個參數(shù)所意，前兩個參數(shù)需要以字符串的形式上傳
參數(shù)1： 請求數(shù)據(jù)的方式 GET / POST ， put 等
最常用的GET和POST秧耗，其中GET有傳輸快车猬，容量小的特點珠闰，一般用來傳輸小規(guī)模的數(shù)據(jù)伐厌，而POST則相反弧械，傳輸慢羞迷，容量大，數(shù)據(jù)內(nèi)存大的話建議使用POST方法
參數(shù)2： 請求數(shù)據(jù)的地址
http://localhost:8080/ajax/ajaxtest代表這服務器地址，http代表http協(xié)議薇宠，所有服務器都必須基于http協(xié)議來傳輸數(shù)據(jù)，localhost代表本機回梧，也可以使用服務器ip地址，比如192.168.104.101详囤，8080代表服務器端口蚓再，這個端口的號碼是由后端決定的。根據(jù)http協(xié)議问畅，只有同源（協(xié)議、ip地址卵皂、傳輸端口都相同）才能傳輸數(shù)據(jù)，初次之外，要么后端代碼請求數(shù)據(jù)刃泌，要么使用 img、script、link狐援、ifame這四個標簽來請求非同源的數(shù)據(jù)
參數(shù)3： false 是同步的方式， true 就是異步
使用flase同步傳輸?shù)那闆r下，需要等待前一個數(shù)據(jù)傳輸完畢才能傳輸下一個數(shù)據(jù)绘趋，而true異步傳輸則是所有數(shù)據(jù)可以同時傳輸滓走，不存在數(shù)據(jù)排隊的情況绽族，也是異步傳輸來實現(xiàn)局部刷新涛漂。
send()’是用來發(fā)送請求岁诉，open方法中確定請求的地址。目標文件位置后 使用send方法來向服務器發(fā)送請求。
當服務器接收到發(fā)送的請求后距潘， 會自動創(chuàng)建一個數(shù)據(jù)洞翩，我們可以使用xhr.responseText來獲取它，那么如何知道服務器成功接收到我們的請求并且成功返回我們請求的數(shù)據(jù)呢？
xhr.onreadystatechange 是一個方法捆姜，代表著當readystate狀態(tài)發(fā)生改變時星虹，xhr.readyState代表著我們請求數(shù)據(jù)進行的步驟卸亮，當進行到第四步時溶诞，也就是說xhr.readyState == 4時赖歌，說明服務器成功返回了我們的數(shù)據(jù)展父，xhr.status == 200則代表著返回的數(shù)據(jù)是正確的數(shù)據(jù)衡载，也就是服務器是正常的。只有當這兩個數(shù)據(jù)為真時，我們才是正常的接收到了我們請求的數(shù)據(jù)。
當服務器返回我們需要的數(shù)據(jù)時肺魁，它傳輸給我們是以字符串的形式瘾晃，也就是說我們接收到的數(shù)據(jù)是一個字符串胖缤，如果其中的數(shù)據(jù)需要計算或者是一個變量分俯，我們需要把它轉換成js對象形式杏节，代碼如下
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 獲取數(shù)據(jù)嫉鲸√偈鳎【注意】類型是字符串岁钓，因為網(wǎng)絡傳輸?shù)氖亲址? var str = xhr.responseText;
// 字符串轉 js 對象 【一定要記得轉換下】
var obj = JSON.parse(str);
// 更新到頁面上
gx(obj)
}
以上是ajax最基本的請求數(shù)據(jù)的方法。
