這個是AJAX基礎，雖然現(xiàn)在都直接用jQuery AJAX了，但是我還是勸你再看看這個，畢竟...我一開始找到這個了，都寫出來了不看就可惜呀...

XHR基礎

首先創(chuàng)建XMLHttpRequest對象

//ajex的基礎是XMLHttpRequest();所以需要先創(chuàng)建一個XMLHttpRequest對象
var iable=new XMLHttpRequest();

// IE5 IE6等老版本使用 ActiveX 對象
var iable=new ActiveXObject("Microsoft.XMLHTTP");

//為了應對所有的現(xiàn)代瀏覽器，包括 IE5 和 IE6，需要檢查瀏覽器是否支持 XMLHttpRequest 對象。如果不支持，則創(chuàng)建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

請求

/**
 * @Param GET or POST
 * @Param url
 * @param asyn(boolean)
 *
 * 它還有個構造方法是5個參數(shù)
 * 最后兩個參數(shù)username和password
 */
xmlhttp.open("GET","http://192.168.4.87:8080/login",true);
xmlhttp.send();

響應

• responseText
• responseXML

//看名字就知道,下面是獲取text
xmlhttp.responseText;
//需要顯示的話直接顯示出來就行了
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

//看名字就知道,下面是獲取xml，然而XML需要解析
xmlhttp.responseXML;

//首先獲取到返回的xml信息
xmlDoc=xmlhttp.responseXML;
    txt="";
    //獲取books.xml的title
    x=xmlDoc.getElementsByTagName("title");
    //遍歷出xml所有的title信息
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
      //現(xiàn)在就可以顯示出來了
    document.getElementById("myDiv").innerHTML=txt;
    }

<!--這是一個books.xml-->
<bookstore>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>

onreadystatechange 事件

一般情況下，你可以把它理解為callback，以前只知道web是單線程，自從有了ajax，也就有了異步，不得不說是一個巨大的進步。

附錄

<!--XMLHttpRequest狀態(tài)-->
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

<!--請求狀態(tài)-->
200: "OK"
404: 未找到頁面

<!--響應就緒狀態(tài)需要-->
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    <!--請求成功之后執(zhí)行的代碼-->
    ...
    }
  }

jQuery中的AJAX

//首先引入jQuery
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

//然后直接調用吧
$.ajax({
    cache: true,
    url: "http://192.168.4.87:8080/login2",
    type:"POST",
    //要提交的數(shù)據(jù)
    data:{username:$("#user").val(), password:$("#pass").val()},
    //請求失敗
    error: function(request) {
    alert("Connection error");
        },
    //請求成功
    success: function(data) {
            
        window.location.href = 'index.html';
      }
  
});