在所有主流的網站，基本上都用到了ajax技術，通過異步請求數據已經是一個很普及的實現方式。市面上主流的web前端框架也都有自己封裝的ajax，而且都是大同小異的。也就是說，Ajax這個輪子已經是多的不能再多了，那為什么我們還要自己封裝一個Ajax呢？

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

廢話不說，先來寫一個最基礎的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. })

一個ajax出爐了，通過調用、填寫參數即可請求到服務器。先來分析一下這個ajax的結構，可以看得出來，其實很簡單，只是new了一個XMLHttpRequest對象，然后通過onreadystatechange方法來處理返回值，現在我們只是做了一個判斷，當請求成功時就調用success方法，如果請求失敗，我們還沒有寫上去，后面我們慢慢完善這個ajax的邏輯。

然后調用ajax的open方法，open方法里有三個參數，第一個是請求方式（如：get或post），第二個是請求的url地址，第三個是一個bool值，是否要異步請求。

最后使用send方法帶上參數發送請求即可。

這是，我的服務器已經收到一個請求，但他報了404錯誤，也就是找不到對應的頁面或路由，這時success方法也不會被調用執行。

那我們再來完善一下這個新生的ajax。我們只需要在onreadystatechange方法里增加一個條件，當請求不成功時調用自身的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請求的時候加上error方法，當ajax請求失敗的時候執行我們想要執行的操作。現在我們拋除跨域請求的問題，當你發送post請求時，你會發現后臺接收不到傳過來的參數，調用如下：

[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. })

后端打印一下傳過來的參數，為空。

出現這個問題的原因主要是請求頭沒有聲明，這時候我們需要初始化聲明一下請求頭，那我們加入一行代碼：

[javascript] view plain copy

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

設置Conten-type為application/x-www-form-urlencoded，現在后端應該是已經可以收到參數了。那我們現在的ajax調用時實在太繁瑣，有些東西我們不想填的我們應該給他設置一個默認值，不然就會報錯。

比如error方法、method、還有是否異步的bool值等等。那我們再加入一些默認值，現在的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請求失敗');
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. }

現在的ajax還存在一個問題，在post請求的時候，如果我們要傳參，是需要通過字符串傳參的。那這種的書寫規則并不是很友好的：

[javascript] view plain copy

1. a=1&b=2

而一般框架的傳參都是通過json的格式來輸入的，我們也不能偏離大眾習慣搞獨立，當然我們也要保留字符串的傳參方式，只是要擴展功能。

那我們需要加一個控制格式的參數，我們這里用dataType這個參數來控制傳參格式，默認是字符串格式傳參好了，可以選擇json格式進行傳參即可。如果是json格式傳參，我們需要把json轉化成字符串類型，代碼如下：

[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也就可以通過json格式進行傳參了。現在的ajax完整代碼和調用方式如下：

[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請求失敗');
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. //調用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. })

現在這個Ajax基本上已經可以滿足業務上的所以需求，不過還有一點沒有實現，我們的Ajax不能設置請求頭？！為了一些特殊需求的情況下，我們還是要把這一功能加上的：

[javascript] view plain copy

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

現在的完整代碼入下：

[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請求失敗');
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完整示例代碼

紹

Ajax的底層是如何實現，這里只研究了post和get的實現方式。這里的代碼比較簡單，主要是編寫JavaScript模仿Ajax異步實現請求數據，加深對Ajax的理解，有需要的會注釋上。歡迎一起交流.

內容

jsp表單

<form action="" method="post" onsubmit="return checkDB()">

name:<input id="name" name="name" type="text">

<br/>

password:<input id="pass" name="pass" type="text">

<br/>

<br/>

<input type="submit" onclick="check()" value="submit">

<br/>

<p style="visibility: hidden" id="putError">用戶名或密碼錯誤</p>

<br/>

</form>

解釋函數的作用：check()檢查用戶名或密碼是否為空（即是否未輸入數據），checkDB()通過JavaScript原生態Ajax和后端進行校驗，用戶名和密碼是否正確。

JavaScript實現

<script type="text/javascript">

var Ajax={

get:function (url,fun) {

var obj = new XMLHttpRequest();

obj.open('GET', url, true);

obj.onreadystatechange = function () {

if(obj.status==200 && obj.readyState==4) {

fun.call(this, obj.responseText)

}

};

obj.send(null);

},

post : function (url,data,fun) {

var obj = new XMLHttpRequest();

obj.open('POST', url, true);

obj.onreadystatechange = function() {

if(obj.status==200 || obj.readyState==4) {

fun.call(this, obj.responseText)

}

};

obj.send(data);

}

};

</script>

<script type="text/javascript">

function check() {

var name = document.getElementById("name").value;

var pass = document.getElementById("pass").value;

alert(name);

if(name == ""|| name==null || pass==null || pass == ""){

alert("用戶名或密碼沒有輸入！");

return false;

}

}

function checkDB(){

var name = document.getElementById("name").value;

var pass = document.getElementById("pass").value;

var data = {"name": name, "pass": pass};

Ajax.post('demo',data,putError);

}

function putError(data) {

if(data=="error"){

document.getElementById("putError").style.visibility = "visible";

return false;

}

}

</script>

請求的demo會被MyServlet類攔截。這里var Ajax定義為一個數組，這個數組是一個鍵值對，鍵是get post 而值是一個函數，這個函數先一步，對數據進行校驗。

Servlet實現

public class MyServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

User user = new User("xiaoming", "666");

String name = request.getParameter("name");

String pass = request.getParameter("pass");

if (user.getName().equals(name) && user.getPass().equals(pass)){

response.getWriter().write("succ");

}

else{

response.getWriter().write("error");

}

}

}