JavaScript Ajax編程 應(yīng)用篇
一、Ajax (Asynchronous JavaScript + XML) 能夠像服務(wù)器請求額外的數(shù)據(jù)而無需卸載頁面，即局部刷新技術(shù)
二、創(chuàng)建一個(gè)XHR對象
function createXHR () {
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") { // < Ie7
if (typeof arguments.callee.activeXString != "string") {
var version = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
i, len;
for ( i = 0, len = version.length; i < len; i++) {
try {
new ActiveXObject(version[i]);
arguments.callee.activeXString = version[i];
break;
} catch (ex) {}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No Support For XHR");
}
}
var xhr = createXHR();
alert(xhr); // [object XMLHttpRequest]
三、用法 注意：本節(jié)的實(shí)例都應(yīng)用于服務(wù)器端
1.調(diào)用open()方法。它接受3 個(gè)參數(shù)：要發(fā)送的請求的類型（"get"、"post"等）、請求的URL 和表示是否異步發(fā)送請求的布爾值。
2.要發(fā)送請求，調(diào)用send（）方法，接受一個(gè)參數(shù)，即要作為請求發(fā)送的主體。如果不需要，則為null
3.返回的數(shù)據(jù)會自動填充到XHR對象的屬性中。
var xhr = createXHR();
// GET方式同步打開example.txt文件
// 同步：javascript代碼會等待服務(wù)器響應(yīng)后執(zhí)行
xhr.open("get", "example.txt", false);
xhr.send(null);
// status代表響應(yīng)的http狀態(tài)
// 200代表ok，304表示緩存
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText); // 返回響應(yīng)的文本，123456
} else {
alert("Request was unsuccessful: " + xhr.status);
}
4.example.text文件內(nèi)容為字符串： 123456
四、前面的使用的同步的方式，當(dāng)然不會存在問題，所有我們要挑戰(zhàn)一個(gè)異步的方法。
var xhr = createXHR();
// xhr.readyState表示請求/響應(yīng)的當(dāng)前狀態(tài)，4代表已經(jīng)接受了全部的響應(yīng)數(shù)據(jù) // 另外只要xhr.readyState的值發(fā)生了改變，那么xhr.onreadystatechange事件就會觸發(fā) xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("get", "example.txt", true); xhr.send(null);
五、每個(gè)HTTP 請求和響應(yīng)都會帶有相應(yīng)的頭部信息
1.默認(rèn)情況下，在發(fā)送XHR 請求的同時(shí)，還會發(fā)送下列頭部信息。
①Accept：瀏覽器能夠處理的內(nèi)容類型。
②Accept-Charset：瀏覽器能夠顯示的字符集。
③Accept-Encoding：瀏覽器能夠處理的壓縮編碼。
④Accept-Language：瀏覽器當(dāng)前設(shè)置的語言。
⑤Connection：瀏覽器與服務(wù)器之間連接的類型。
⑥Cookie：當(dāng)前頁面設(shè)置的任何Cookie。
⑦Host：發(fā)出請求的頁面所在的域。
⑧Referer：發(fā)出請求的頁面的URI。
⑨User-Agent：瀏覽器的用戶代理字符串。
2.使用setRequestHeader()方法可以設(shè)置自定義的請求頭部信息。接受兩個(gè)參數(shù)：頭部字段的名稱和頭部字段的值
var xhr = createXHR();
// xhr.readyState表示請求/響應(yīng)的當(dāng)前狀態(tài)，4代表已經(jīng)接受了全部的響應(yīng)數(shù)據(jù)
// 另外只要xhr.readyState的值發(fā)生了改變，那么xhr.onreadystatechange事件就會觸發(fā)
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("get", "example.txt", true);
// 必須在open()之后調(diào)用
xhr.setRequestHeader("name", "zhang"); // 在example.txt的http中可以看到接受的 "name" : "zhang"
xhr.send(null);
3.獲取請求的頭部信息和相應(yīng)信息，調(diào)用getResponseHeader()方法getAllResponseHeaders()方法
var xhr = createXHR();
// xhr.readyState表示請求/響應(yīng)的當(dāng)前狀態(tài)，4代表已經(jīng)接受了全部的響應(yīng)數(shù)據(jù)
// 另外只要xhr.readyState的值發(fā)生了改變，那么xhr.onreadystatechange事件就會觸發(fā)
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
// 獲取響應(yīng)頭的Content-Type
var connection = xhr.getResponseHeader("Content-Type");
// alert(connection); // text/plain
// 獲取所有的響應(yīng)信息
var all = xhr.getAllResponseHeaders();
alert(all);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("get", "example.txt", true);
xhr.send(null);
六、GET請求，前面我們已經(jīng)討論了GET請求的方法，現(xiàn)在我們來擴(kuò)展一下，為GET請求添加一些參數(shù)
/**
url : 不帶請求的url
name : 請求鍵
value ： 請求值
return ： 帶請求字符串的url
*/
function addURLParam(url, name, value) {
url += (url.indexOf("?") == -1 ? "?" : "&");
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
var xhr = createXHR();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
var url = "example.txt";
url = addURLParam(url, "name", "zhang");
url = addURLParam(url, "age", "23");
// 請求的url變成了：example.txt?name=zhang&age=23
xhr.open("get", url, true);
xhr.send(null);
七、POST請求
1.案例分析：接下來我們共同討論一個(gè)以post方法發(fā)送請求的ajax應(yīng)用，即用戶注冊，根據(jù)你注冊用戶名返回提示。
2.實(shí)現(xiàn)步驟
1) 首先要有一個(gè)注冊的頁面（當(dāng)然，這里很簡陋）ajax.html
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標(biāo)題文檔</title> <style> </style> </head> <body> <form name="myForm" method="post"> 姓名：<input type="text" name="username" /><label id="userLabel">請輸入用戶名</label><br/> 密碼：<input type="password" name="password" /><br/> <input type="submit" value="登錄" /><br/> </form> <script src="EventUtil.js"></script> <script src="serialize.js"></script> <script src="ajax.js"></script> <script src="ajaxDo.js"></script> </body> </html>
2) 接著當(dāng)然是javascript部分
①EventUtil.js，這里只是將事件監(jiān)聽的部分列出來
var EventUtil = {
addEvent : function (element, type, handler) {
if (element.addEventListener)
{
element.addEventListener(type, handler, false);
} else if (element.attachEvent)
{
element.attachEvent("on" + type, handler);
}
}
}
②serialize.js：表單序列化
function serialize(form){
var parts = [], field = null, i, len, j, optLen, option, optValue;
for (i=0, len=form.elements.length; i < len; i++){
field = form.elements[i];
switch(field.type){
case "select-one":
case "select-multiple":
if (field.name.length){
for (j=0, optLen = field.options.length; j < optLen; j++){
option = field.options[j];
if (option.selected){
optValue = "";
if (option.hasAttribute){
optValue = (option.hasAttribute("value") ?
option.value : option.text);
} else {
optValue = (option.attributes["value"].specified ?
option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" +
encodeURIComponent(optValue));
}
}
}
break;
case undefined: //字段集
case "file": //文件輸入
case "submit": //提交按鈕
case "reset": //重置按鈕
case "button": //自定義按鈕
break;
case "radio": //單選按鈕
case "checkbox": //復(fù)選框
if (!field.checked){
break;
}
/* 執(zhí)行默認(rèn)操作*/
default:
//不包含沒有名字的表單字段
if (field.name.length){
parts.push(encodeURIComponent(field.name) + "=" +
encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}
③ajax.js，就是上面的那個(gè)createXHR()函數(shù)，這里就不羅列了。
④ajaxDo.js，核心文件，就是我們操作部分，這個(gè)名字亂寫的。
var form = document.forms[0]; // 獲取表單
var username = form.elements['username']; // 用戶名
var userLabel = document.querySelector("#userLabel"); // 提示標(biāo)簽
EventUtil.addEvent(username, "blur", function() {
var xhr = createXHR();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
var text = xhr.responseText;
// 當(dāng)為true時(shí)，提示綠色字體
// 當(dāng)為false時(shí)，提示為紅色字體
if(text) {
userLabel.style.color = "green";
userLabel.firstChild.data = "恭喜你，用戶名可用";
} else {
userLabel.style.color = "red";
userLabel.firstChild.data = "對不起，該用戶已存在";
}
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
// POST請求
xhr.open("post", "dome.php", true);
// 提交的內(nèi)容類型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 將表單序列化
xhr.send(serialize(form));
});
3.改進(jìn)部分：大家都看見了，剛才在提交表單時(shí)，我們序列化了表單。在XMLHttpRequest 2 級為此定義了FormData 類型，它會自動為我們序列化表單，不需要我們自己寫了。
我們只動部分代碼
// ...此處省略代碼和上面一致
// POST請求
xhr.open("post", "dome.php", true);
// 僅僅這里需要改動，代替之前serialize.js中的函數(shù)
xhr.send(new FormData(form));
八、其他部分（了解，因?yàn)榧嫒菪赃€不夠）
1.超時(shí)設(shè)定
xhr.open("get", "example.txt", true);
xhr.timeout = 1000; //將超時(shí)設(shè)置為1 秒鐘（僅適用于IE8+）
xhr.ontimeout = function(){
alert("Request did not return in a second.");
};
xhr.send(null);
2.overrideMimeType()方法，針對服務(wù)器返回的類型
var xhr = createXHR();
xhr.open("get", "example.txt", true);
xhr.overrideMimeType("text/xml"); // 之前的是text/plain
xhr.send(null);
3.進(jìn)度事件
1.load事件，只要瀏覽器收到服務(wù)器的信息就觸發(fā)
var xhr = createXHR();
xhr.onload = function(){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
};
xhr.open("get", "example.txt", true);
xhr.send(null);
2.progress事件，瀏覽器接收新數(shù)據(jù)期間周期性地觸發(fā)
var xhr = createXHR();
xhr.onprogress = function(event){
var divStatus = document.getElementById("status");
// 計(jì)算從響應(yīng)中已經(jīng)接收到的數(shù)據(jù)的百分比
if (event.lengthComputable){
divStatus.innerHTML = "Received " + event.position + " of " +
event.totalSize +" bytes";
}
};
xhr.open("get", "altevents.php", true);
xhr.send(null);
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
JavaScript中的appendChild()方法示例詳解
這篇文章主要介紹了JavaScript中的appendChild()方法,appendChild()方法是向節(jié)點(diǎn)添加最后一個(gè)子節(jié)點(diǎn),也可以使用此方法從一個(gè)元素向另一個(gè)元素移動元素,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
TypeScript內(nèi)置工具類型快速入門運(yùn)用
TypeScript 中內(nèi)置了很多工具類型，我們無需導(dǎo)入，可以直接使用。 其中的很多都是比較常用的，接下來我們根據(jù)使用范圍來一一介紹，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
JavaScript進(jìn)階之前端文件上傳和下載示例詳解
這篇文章主要為大家介紹了JavaScript進(jìn)階之前端文件上傳和下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
在js讀取文本框或者其它表單數(shù)據(jù)的時(shí)候獲得的值是字符串類型的,例如兩個(gè)文本框a和b,如果獲得a的value值為11,b的value值為9 ,那么a.value要小于b.value,因?yàn)樗麄兌际亲址问降?在網(wǎng)上找了一下js字符串轉(zhuǎn)數(shù)字的文章,這個(gè)比較全2013-03-03
JS實(shí)現(xiàn)利用閉包判斷Dom元素和滾動條的方向示例
這篇文章主要介紹了JS實(shí)現(xiàn)利用閉包判斷Dom元素和滾動條的方向,涉及javascript閉包、事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-08-08
javascript實(shí)現(xiàn)隨機(jī)生成DIV背景色
這篇文章主要介紹了javascript實(shí)現(xiàn)隨機(jī)生成DIV背景色的具體代碼，如何設(shè)置DIV背景色為隨機(jī)色，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了js防止頁面被iframe調(diào)用的方法,可防止頁面被別的網(wǎng)站iframe調(diào)用,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10
JS在Chrome瀏覽器中showModalDialog函數(shù)返回值為undefined的解決方法
這篇文章主要介紹了JS在Chrome瀏覽器中showModalDialog函數(shù)返回值為undefined的解決方法,涉及javascript針對谷歌瀏覽器事件判定相關(guān)操作技巧,需要的朋友可以參考下2016-08-08
JavaScript循環(huán)遍歷的24個(gè)方法,你都知道嗎
這篇文章主要給大家介紹了關(guān)于JavaScript循環(huán)遍歷的24個(gè)方法,文中對每種方法都給出了詳細(xì)的實(shí)例代碼,方便大家理解學(xué)習(xí),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
高性能web開發(fā) 如何加載JS，JS應(yīng)該放在什么位置？
所有瀏覽器在下載JS的時(shí)候，會阻止一切其他活動，比如其他資源的下載，內(nèi)容的呈現(xiàn)等等。至到JS下載、解析、執(zhí)行完畢后才開始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容。2010-05-05