AJAX 實(shí)例

一個(gè)簡(jiǎn)單的AJAX實(shí)例

創(chuàng)建一個(gè)簡(jiǎn)單的XMLHttpRequest，從一個(gè)TXT文件中返回?cái)?shù)據(jù)。

用AJAX加載 XML 文件

創(chuàng)建一個(gè)簡(jiǎn)單的XMLHttpRequest，從一個(gè)XML文件中返回?cái)?shù)據(jù)。

用AJAX進(jìn)行一次 HEAD 請(qǐng)求

檢索資源（文件）的頭信息。

用AJAX進(jìn)行一次指定的 HEAD 請(qǐng)求

檢索資源（文件）的指定頭信息。

用AJAX從ASP 文件返回?cái)?shù)據(jù)

當(dāng)用戶在文本框內(nèi)鍵入字符時(shí)網(wǎng)頁(yè)如何與Web服務(wù)器進(jìn)行通信

用AJAX從數(shù)據(jù)庫(kù)返回?cái)?shù)據(jù)

用AJAX網(wǎng)頁(yè)如何獲取數(shù)據(jù)庫(kù)中的信息

用AJAX從XML 文件返回?cái)?shù)據(jù)

創(chuàng)建一個(gè)XMLHttpRequest從XML文件中檢索數(shù)據(jù)并顯示在一個(gè)HTML表格中。

用callback函數(shù)的AJAX實(shí)例

用一個(gè)callback函數(shù)創(chuàng)建一個(gè)XMLHttpRequest，并從一個(gè)TXT文件中檢索數(shù)據(jù)。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在所有主流的網(wǎng)站，基本上都用到了ajax技術(shù)，通過(guò)異步請(qǐng)求數(shù)據(jù)已經(jīng)是一個(gè)很普及的實(shí)現(xiàn)方式。市面上主流的web前端框架也都有自己封裝的ajax，而且都是大同小異的。也就是說(shuō)，Ajax這個(gè)輪子已經(jīng)是多的不能再多了，那為什么我們還要自己封裝一個(gè)Ajax呢？

想要了解一個(gè)技術(shù)或者某個(gè)功能的實(shí)現(xiàn)原理，只有動(dòng)手實(shí)踐才能真正的了解。就如我在csdn上第一篇博客的博文描述。探索技術(shù)的路上本應(yīng)該自己造輪子，即使市面上有再多的選擇，自己動(dòng)手嘗試也是必要的，第一次嘗試必然會(huì)問(wèn)題眾多，但你不覺(jué)得解決他是一件很有成就感的事情嗎，這樣才能帶給你更大的進(jìn)步和更深刻的領(lǐng)悟。

廢話不說(shuō)，先來(lái)寫(xiě)一個(gè)最基礎(chǔ)的ajax：

[javascript] view plain copy

1. function ajax(a){
2. var ajax = new XMLHttpRequest();
3. ajax.onreadystatechange = function(){
4. if (ajax.readyState == 4 && ajax.status == 200) {
5. a.success(JSON.stringify(ajax.responseText))
6. }
7. }
8. ajax.open(a.method, a.url,true)
9. ajax.send(a.data)
10. }
12. ajax({
13. method:'get',
14. url:'http://127.0.0.1:8081/test',
15. success:function(res){
16. console.log(res)
17. }
18. })

一個(gè)ajax出爐了，通過(guò)調(diào)用、填寫(xiě)參數(shù)即可請(qǐng)求到服務(wù)器。先來(lái)分析一下這個(gè)ajax的結(jié)構(gòu)，可以看得出來(lái)，其實(shí)很簡(jiǎn)單，只是new了一個(gè)XMLHttpRequest對(duì)象，然后通過(guò)onreadystatechange方法來(lái)處理返回值，現(xiàn)在我們只是做了一個(gè)判斷，當(dāng)請(qǐng)求成功時(shí)就調(diào)用success方法，如果請(qǐng)求失敗，我們還沒(méi)有寫(xiě)上去，后面我們慢慢完善這個(gè)ajax的邏輯。

然后調(diào)用ajax的open方法，open方法里有三個(gè)參數(shù)，第一個(gè)是請(qǐng)求方式（如：get或post），第二個(gè)是請(qǐng)求的url地址，第三個(gè)是一個(gè)bool值，是否要異步請(qǐng)求。

最后使用send方法帶上參數(shù)發(fā)送請(qǐng)求即可。

這是，我的服務(wù)器已經(jīng)收到一個(gè)請(qǐng)求，但他報(bào)了404錯(cuò)誤，也就是找不到對(duì)應(yīng)的頁(yè)面或路由，這時(shí)success方法也不會(huì)被調(diào)用執(zhí)行。

那我們?cè)賮?lái)完善一下這個(gè)新生的ajax。我們只需要在onreadystatechange方法里增加一個(gè)條件，當(dāng)請(qǐng)求不成功時(shí)調(diào)用自身的error方法：

[javascript] view plain copy

1. ajax.onreadystatechange = function(){
2. if (ajax.readyState == 4 && ajax.status == 200) {
3. a.success(JSON.stringify(ajax.responseText))
4. }else{
5. a.error(ajax)
6. }
7. }

這樣我們就可以在ajax請(qǐng)求的時(shí)候加上error方法，當(dāng)ajax請(qǐng)求失敗的時(shí)候執(zhí)行我們想要執(zhí)行的操作。現(xiàn)在我們拋除跨域請(qǐng)求的問(wèn)題，當(dāng)你發(fā)送post請(qǐng)求時(shí)，你會(huì)發(fā)現(xiàn)后臺(tái)接收不到傳過(guò)來(lái)的參數(shù)，調(diào)用如下：

[javascript] view plain copy

1. ajax({
2. method:'get',
3. url:'http://localhost:8081/test',
4. data:'a=1',
5. success:function(res){
6. console.log(res)
7. },
8. error:function(res){
9. console.log(res)
10. }
11. })

后端打印一下傳過(guò)來(lái)的參數(shù)，為空。

出現(xiàn)這個(gè)問(wèn)題的原因主要是請(qǐng)求頭沒(méi)有聲明，這時(shí)候我們需要初始化聲明一下請(qǐng)求頭，那我們加入一行代碼：

[javascript] view plain copy

1. ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

設(shè)置Conten-type為application/x-www-form-urlencoded，現(xiàn)在后端應(yīng)該是已經(jīng)可以收到參數(shù)了。那我們現(xiàn)在的ajax調(diào)用時(shí)實(shí)在太繁瑣，有些東西我們不想填的我們應(yīng)該給他設(shè)置一個(gè)默認(rèn)值，不然就會(huì)報(bào)錯(cuò)。

比如error方法、method、還有是否異步的bool值等等。那我們?cè)偌尤胍恍┠J(rèn)值，現(xiàn)在的ajax是這樣的：

[javascript] view plain copy

1. function ajax(a){
2. a.method = a.method || 'get';
3. a.ajax = a.ajax || true;
4. a.error = a.error || function(){
5. console.warn('Ajax請(qǐng)求失敗');
6. };
7. var ajax = new XMLHttpRequest();
8. ajax.onreadystatechange = function(){
9. if (ajax.readyState == 4 && ajax.status == 200) {
10. a.success(JSON.stringify(ajax.responseText))
11. }else{
12. a.error(ajax)
13. }
14. }
15. ajax.open(a.method, a.url,a.ajax)
16. ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
17. ajax.send(a.data)
18. }

現(xiàn)在的ajax還存在一個(gè)問(wèn)題，在post請(qǐng)求的時(shí)候，如果我們要傳參，是需要通過(guò)字符串傳參的。那這種的書(shū)寫(xiě)規(guī)則并不是很友好的：

[javascript] view plain copy

1. a=1&b=2

而一般框架的傳參都是通過(guò)json的格式來(lái)輸入的，我們也不能偏離大眾習(xí)慣搞獨(dú)立，當(dāng)然我們也要保留字符串的傳參方式，只是要擴(kuò)展功能。

那我們需要加一個(gè)控制格式的參數(shù)，我們這里用dataType這個(gè)參數(shù)來(lái)控制傳參格式，默認(rèn)是字符串格式傳參好了，可以選擇json格式進(jìn)行傳參即可。如果是json格式傳參，我們需要把json轉(zhuǎn)化成字符串類(lèi)型，代碼如下：

[javascript] view plain copy

1. a.dataType = a.dataType || 'string';
2. var data = a.data;
3. if (a.dataType == 'json') {
4. var nowData = "";
5. for (var i in data) {
6. nowData += (nowData != ''?'&':'')+i+'='+data[i];
7. }
8. data = nowData;
9. }

這樣，我們的ajax也就可以通過(guò)json格式進(jìn)行傳參了。現(xiàn)在的ajax完整代碼和調(diào)用方式如下：

[javascript] view plain copy

1. function ajax(a){
2. a.method = a.method || 'get';
3. a.ajax = a.ajax || true;
4. a.dataType = a.dataType || 'string';
5. a.error = a.error || function(){
6. console.warn('Ajax請(qǐng)求失敗');
7. };
8. var ajax = new XMLHttpRequest();
9. ajax.onreadystatechange = function(){
10. if (ajax.readyState == 4 && ajax.status == 200) {
11. a.success(JSON.stringify(ajax.responseText))
12. }else{
13. a.error(ajax)
14. }
15. }
16. var data = a.data;
17. if (a.dataType == 'json') {
18. var nowData = "";
19. for (var i in data) {
20. nowData += (nowData != ''?'&':'')+i+'='+data[i];
21. }
22. data = nowData;
23. }
24. ajax.open(a.method, a.url,a.ajax)
25. ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
26. ajax.send(data)
27. }
28. //調(diào)用Ajax示例
29. ajax({
30. method:'post',
31. url:'http://localhost:8081/test',
32. dataType:'json',
33. data:{
34. a:'1',
35. b:'2'
36. },
37. success:function(res){
38. console.log(res)
39. }
40. })

現(xiàn)在這個(gè)Ajax基本上已經(jīng)可以滿足業(yè)務(wù)上的所以需求，不過(guò)還有一點(diǎn)沒(méi)有實(shí)現(xiàn)，我們的Ajax不能設(shè)置請(qǐng)求頭？！為了一些特殊需求的情況下，我們還是要把這一功能加上的：

[javascript] view plain copy

1. if (a.requestHeader) {
2. for (var i in a.requestHeader) {
3. ajax.setRequestHeader(i,a.requestHeader[i])
4. }
5. }

現(xiàn)在的完整代碼入下：

[javascript] view plain copy

1. function ajax(a){
2. a.method = a.method || 'get';
3. a.ajax = a.ajax || true;
4. a.dataType = a.dataType || 'string';
5. a.error = a.error || function(){
6. console.warn('Ajax請(qǐng)求失敗');
7. };
8. var ajax = new XMLHttpRequest();
9. ajax.onreadystatechange = function(){
10. if (ajax.readyState == 4 && ajax.status == 200) {
11. a.success(JSON.parse(ajax.responseText))
12. }else if (ajax.readyState != 4 && ajax.status != 200){
13. a.error(ajax)
14. }
15. }
16. var data = a.data;
17. if (a.dataType == 'json') {
18. var nowData = "";
19. for (var i in data) {
20. nowData += (nowData != ''?'&':'')+i+'='+data[i];
21. }
22. data = nowData;
23. }
24. ajax.open(a.method, a.url,a.ajax)
25. if (a.requestHeader) {
26. for (var i in a.requestHeader) {
27. ajax.setRequestHeader(i,a.requestHeader[i])
28. }
29. }
30. ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
31. ajax.send(data)
32. }

完整示例代碼文件：JavaScript封裝Ajax完整示例代碼

JAX 可用來(lái)與 XML 文件進(jìn)行交互式通信。

AJAX XML 實(shí)例

下面的例子將演示網(wǎng)頁(yè)如何使用 AJAX 來(lái)讀取來(lái)自 XML 文件的信息：

實(shí)例

Get CD info

實(shí)例解析 - loadXMLDoc() 函數(shù)

當(dāng)用戶點(diǎn)擊上面的"獲得 CD 信息"這個(gè)按鈕，就會(huì)執(zhí)行 loadXMLDoc() 函數(shù)。

loadXMLDoc() 函數(shù)創(chuàng)建 XMLHttpRequest 對(duì)象，添加當(dāng)服務(wù)器響應(yīng)就緒時(shí)執(zhí)行的函數(shù)，并將請(qǐng)求發(fā)送到服務(wù)器。

當(dāng)服務(wù)器響應(yīng)就緒時(shí)，會(huì)構(gòu)建一個(gè) HTML 表格，從 XML 文件中提取節(jié)點(diǎn)（元素），最后使用已經(jīng)填充了 XML 數(shù)據(jù)的 HTML 表格來(lái)更新 txtCDInfo 占位符：

function loadXMLDoc(url)

{

var xmlhttp;

var txt,xx,x,i;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";

x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");

for (i=0;i<x.length;i++)

{

txt=txt + "<tr>";

xx=x[i].getElementsByTagName("TITLE");

{

try

{

txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

}

catch (er)

{

txt=txt + "<td>&nbsp;</td>";

}

}

xx=x[i].getElementsByTagName("ARTIST");

{

try

{

txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

}

catch (er)

{

txt=txt + "<td>&nbsp;</td>";

}

}

txt=txt + "</tr>";

}

txt=txt + "</table>";

document.getElementById('txtCDInfo').innerHTML=txt;

}

}

xmlhttp.open("GET",url,true);

xmlhttp.send();

}

AJAX 服務(wù)器頁(yè)面

上面這個(gè)例子中使用的服務(wù)器頁(yè)面實(shí)際上是一個(gè)名為 "cd_catalog.xml" XML 文件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！