1.DOM事件
1.select的onchange事件
當選項框中的內容發生改變時需要出發的事件。
2.Ajax
1.名詞解釋
1.同步
在一個任務進行中，不能開啟其它的任務。
同步訪問：瀏覽器在向服務器發送請求時，瀏覽器只能等待服務器的響應，不能做其它的事情。
出現場合：
1.地址欄輸入網址訪問頁面
2.a標記的默認跳轉
3.submit按鈕的表單提交
2.異步
在一個任務進行中時，可以開啟其它的任務
瀏覽器在向服務器發送請求的時候，不耽誤用戶在網頁中做其他的操作。
出現場合：
1.股票的走勢圖
2.聊天室
3.用戶名驗證
4.建議搜索
2.什麽是Ajax
1.Asynchronous Javascript And Xml
異步的 js 和 Xml
2.本質：使用js提供的異步對象（XMLHttpRequest）,異步的向服務器發送請求，並接收響應回來的數據（數據格式是Xml）。
3.異步請求的步驟
1.創建Ajax異步對象（xhr）
2.綁定事件
3.打開連接
4.發送請求
4.創建異步對象（xhr）
標準創建：var xhr=new XMLHttpRequest();
IE8以下瀏覽器：var xhr=new ActiveXObject("Microsoft.XMLHttp");
如何判斷？
通過window.XMLHttpRequest來判斷瀏覽器是否支持標準創建。如果瀏覽器不支持標準創建，那麽window.XMLHttpRequest的值為null。
練習：
將創建xhr對象的方法封裝到獨立的js文件中。
要求：判斷瀏覽器是否支持標準創建，如果支持返回標準創建的對象，否則返回IE8以下創建的對象。
5.異步對象xhr的常用屬性和方法
1.readyState屬性
作用：用於表示xhr對象的請求狀態
值：
0：請求尚未初始化
1：已經打開到服務器的鏈接，正在發送請求中
2：接收響應頭
3：接收響應主體
4：接收響應數據成功
註意：當readyState的值為4的時候，才表示所有的響應都已經接收完畢。
2.status屬性
作用：表示的是服務器的響應狀態碼
值：200 響應成功
當status的值是200的時候，表示服務器已經正確的處理請求並給出了響應。
3.onreadystatechange-事件
作用：當xhr的readyState屬性值發生改變時，要自動激發的操作。
語法：
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;
console.log(result);
}
}
6.打開連接open()
作用：打開連接（創建請求）
語法：xhr.open(method,url,isAsyn);
method:請求的方法（get/post）
url:請求地址（ex:http://127.0.0.1/login.php）
isAsyn:指定采用同步還是異步發送請求（true:異步，false:同步）
7.send()
作用：發送請求
語法：xhr.send(請求主體);
如果請求方法是get,沒有請求主體send(null)
如果請求方法是post,則send(主體數據)

練習：
1.創建一個response.php,響應輸出一句話“我的AJAX練習”。
2.創建ajax-exercise.html,在網頁中添加一個按鈕和div（id="show"）。
3.單擊按鈕時，異步的向response.php發送請求，並將響應回來的數據以h1的方式顯示在div中。
3.使用get方法傳參給服務端
ex:
user_login.php?uname=dangdang&upwd=123456
在php中：
$_REQUEST["uname"];
$_REQUEST["upwd"];

練習1：
1.創建一個ajax-get.html
添加一個文本框（id="uname"）
添加一個按鈕，單擊按鈕時，將文本框中的數據作為參數，異步的提交給ajax-get.php文件，並且將響應的數據顯示在一個div裏。
2.創建ajax-get.php
接收前端傳遞過來的數據
將數據拼成“歡迎XXX”,再響應給瀏覽器。
練習2：
1.在練習1的基礎上，將網頁另存一份，然後在網頁中添加一個密碼框，將用戶名和密碼同時提交給服務端。
2.將練習1中的php文件另存一份，然後在php文件中同時接受前端傳遞過來的用戶和密碼，然後判斷，如果用戶名=dangdang,密碼=123456，響應“登錄成功”,否則“登錄失敗”。
4.使用post方法提交數據
1.提交的數據需要放在send()主體位置處
ex：
var msg="uname="+userName+"&upwd="+upwd;
xhr.send(msg);
2.設置請求的消息頭
必須在發送請求之前設置消息頭
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

AJAX-DOM事件