Ajax：Aysnchronous Javascript and xml(非同步JS和XML技術) 1. Ajax是什麼（數據交互） 2. 瀏覽器（客戶端）和伺服器 3. 瀏覽器和伺服器的交互 4. 註釋 5.onreadystatechange 和 onload 6.GET和POST ...
Ajax：Aysnchronous Javascript and xml(非同步JS和XML技術)
1. Ajax是什麼（數據交互）
是指一種創建互動式網頁應用的網頁開發技術
京東 的用戶名驗證
嚴選網站的新品首發，商品原先是8個，點擊之後數量增加
簡書
當瀏覽器滾動的時候，在底部追加新的文章
點擊”閱讀更多“的時候，在底部追加新文章
共同的特點：頁面沒有刷新，但是得到了網站伺服器上最新的數據（新用戶明是否註冊，嚴選商品數量增加，簡書文章數據增加）
上述功能的實現，就得通過AJax來去做
刷新浪微博，訪問新浪頁面
購買商品：訪問jd.com
百度：baidu.com
共同的特點：在url地址欄輸入地址，或者點擊對應的鏈接，跳轉刷新到對應的頁面2. 瀏覽器（客戶端）和伺服器
瀏覽器：谷歌瀏覽器，火狐，IE
訪問頁面
伺服器：就是一臺（多台）電腦，這臺電腦基本上沒有顯示器
提供網頁內容：在伺服器上某個文件夾下，存儲我們寫好的頁面，24小時聯網
伺服器：
阿裡雲伺服器：600-700元一年
淘寶虛擬空間：30-100元不等
新浪SAE：一天1毛
wamp軟體：將自己的電腦模擬成一臺伺服器
wamp：
w：windows操作系統
a：apache（伺服器的一個軟體）
m：mysql
p：php
安裝完成：訪問localhost/127.0.0.1,成功訪問到頁面，就是正確
(C:\Windows\System32\drivers\etc)
開發期間本地測試，wamp就是我們最好的選擇3. 瀏覽器和伺服器的交互
字元串
'hello world'
XML：保存數據（HTML格式化頁面內容輸出）
XML也用戶保存和傳遞數據，但是格式比較麻煩
JSON數據
{“username”:"zhangsan","age":20}
JSON屬性都是雙引號
JSON只代表數據，沒有方法(函數)4. 註釋
1. wamp都裝在 d:wamp下
2. wamp所有的文件全部刪除5.onreadystatechange 和 onload
//get
var xhr = new XMLHttpRequest(); // 創建XML HTTP協議請求
xhr.open('GET','URL地址?參數',true|false) // 配置 true：非同步傳輸 false：同步傳輸，基本上都是true非同步傳輸
xhr.send();發送
xhr.onreadystatechange = functioin(){
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);//接受返回結果
}
}
onreadystatachange：存儲函數，每當readyStata屬性改變時，就會調用該函數。
readyStata：有XMLHttpRequest的狀態（0到4）
0：請求未初始化
1：伺服器連接已建立
2：請求已接收
3：請求處理中
4：請求已完成，響應已就緒
status：200表示"ok",404表示”未找到頁面“
2、當readyStata等於4且狀態為200時，表示響應已就緒
xhr.onload = function(){} // 執行完就載入
//POST
var xhr = new XMLHttpRequest();
xhr.open('POST','url地址',true|false);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send();
xhr.onload = function(){}6.GET和POST
get和post
get：獲取
1.所有的a鏈接都是get請求，如果有參數，參數會顯示在URL地址的後面
baidu.com?username=zhangsan&age=20&sex=nan(不安全)
2. get請求不能傳文件
post：發送
1.設置表單的method為post的時候，表單的值需要傳遞給伺服器，但是不會顯示在URL地址欄(相對安全)
2. 傳送文件
get和post的原生Ajax請求過程沒有本質的不同
get請求，參數直接寫在URL地址欄的後面
post請求
1. 參數必須在send裡面
2. 必須設置setRequestHeader()頭信息
