AJAX-DOM事件

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");