Ajax底層原理
當下盛行的Ajax
現在Ajax框架數不勝數，Ajax的功能也太龐大的以至於它連它的父輩JavaScript都帶動起來了，記得我最初接觸web的時候Javascript還沒到達有現在的高度，如今隨著客戶提醒越來越重要，很多軟體開發並不僅僅停留在功能實現的要求上，而是更注重互動、分享和互動（這也是web2.0的目標）。其實這也是完全正確的，畢竟那種僅僅賦予功能的東西我們不能滿足了，例如你買東西還想要挑好看的呢，何況軟體開發呢。回到正題，Ajax框架我還是贊成使用的，畢竟自己來實現效率太慢了，像目前優秀的JavaScript框架jQuery就不得不令人讚賞，而且它也是越來越受歡迎，連微軟都在Asp
Ajax的工作
Ajax直覺認識：我們傳送一個請求，但是這個請求比較特殊它是非同步的，也就是說客戶端是不會感覺到的。在傳送這個請求的時候我們綁定了一個事件，這個事件會監控我們傳送請求的狀態，並且每次狀態改變都會觸發，所以我們就可以根據不同的狀態讓他執行不同的操作。請求到達伺服器端的後伺服器端根據相應的請求返回對應的資訊，這個返回資訊我們可以取得並且是非同步得到，不會引起客戶端重新整理。既然在上面已經綁定了監控狀態變化的事件，我們就可以在那裡首先做好在得到返回資訊要做的處理（當然如果失敗也會有相應的狀態我們也會做出相應的處理），我們在處理中得到返回資訊通過javascript在客戶端做相應操作即可。
Ajax核心—-----XMLHttpRequest
上面我們大概感受了一下Ajax的過程，我們發現傳送非同步請求才是核心，事實上它就是XMLHttpRequest，整個Ajax之所以能完成非同步請求完全是因為這個對應可以傳送非同步請求的緣故。而且我們又發現上面那個事件就是整個處理過程的核心，可以根據不同狀態執行不同操作，其實它就是XMLHttpRequest的方法onreadystatechange，它在每次狀態發生改變時都會觸發。那麼是誰取得的返回資訊呢？它就是XMLHttpRequest的另一個方法responseText（當然還有responseXML）。(⊙o⊙)哦，我們還沒有說傳送給誰以及執行傳送操作，這兩個就是XMLHttpRequest的open和send方法。Y(^o^)Y，其他的當然還有了，我們直接列出來吧：
XMLHttpRequest物件屬性
readyState：請求狀態，開始請求時值為0直到請求完成這個值增長到4
responseText：目前為止接收到的響應體,readyState<3此屬性為空字串，=3為當前響應體，=4則為完整響應體
responseXML：伺服器端相應，解析為xml並作為Document物件返回
status：伺服器端返回的狀態碼，=200成功，=404表示“Not Found”
statusText：用名稱表示的伺服器端返回狀態，對於“OK”為200，“Not Found”為400
方法
setRequestHeader()：向一個開啟但是未發生的請求設定頭資訊
open()：初始化請求引數但是不傳送
send()：傳送Http請求
abort()：取消當前相應
getAllResponseHeaders()：把http相應頭作為未解析的字串返回
getResponseHeader()：返回http相應頭的值
事件控制代碼
onreadystatechange：每次readyState改變時呼叫該事件控制代碼，但是當readyState=3有可能呼叫多次
程式碼實現
ajax.js檔案程式碼，也是我們說的主要內容，是一個javascript檔案，所有的Ajax操作都在這裡：
//與伺服器通訊
function talktoServer(url) {
var req = newXMLHTTPRequst();
var callbackHandler = getReadyStateHandler(req);
req.onreadystatechange = callbackHandler;
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var testmsg = document.getElementById("testmsg");
var msg_value = testmsg.value;
req.send("msg="+msg_value);
}
//建立XMLHTTP物件
function newXMLHTTPRequst() {
var xmlreq = false;
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXobject) {
try{
xmlreq=new ActiveXObject("Msxm12.XMLHTTP");
} catch (e1) {
try {
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
}
}
}
return xmlreq;
}
//伺服器回撥函式
function getReadyStateHandler(req) {
return function() {
if (req.readyState == 4) {
if (req.status == 200) {
var msg_display = document.getElementById("msg_display");
msg_display.innerHTML = req.responseText;
} else {
var hellomsg = document.getElementById("hellomsg");
hellomsg.innerHTML = "ERROR" + req.status;
}
}
}
}
其他相關的程式碼也貼出來吧，這樣才能正確執行
使用ajax.js程式碼的頁面程式碼，也就是Default.aspx前臺程式碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="myFirst._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<mce:script type="text/javascript" src="js/ajax.js" mce_src="js/ajax.js"></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="testmsg" type="text" value="helloworld" />
<input id="Button1" type="button" value="button" onclick="talktoServer('Ajax.aspx')" />
<div id="msg_display" style="height:50px;">
</div>
在此提醒大家，他對應的非同步請求頁一定不能有form標籤，否之就只有將顯示資訊的div放到此頁的form外了
，原因很簡單：返回資訊中有form，在此也顯示的時候就造成了form巢狀，不允許！！！
</div>
</form>
</body>
</html>
Ajax.aspx的後臺程式碼，也就是處理XMLHttpRequest請求的頁面後臺程式碼（其對應的前臺需要去掉form標籤）：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace myFirst
{
public partial class Ajax : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string str = "伺服器ajax.aspx得到了您輸入的資訊" + Request["msg"] + "<br/>您的ip地址是：";
str += Request.UserHostAddress;
str += "<br/>當前伺服器時間：";
str += DateTime.Now.ToLocalTime();
Response.Write(str);
}
}
}
從程式碼我們看出：首先我們建立一個 XMLHttpRequest 物件（由於瀏覽器不同需要 相應判斷處理），設定相應的請求資訊（通過open來做，例如請求地址等 設定 ）；然後我們繫結 onreadystatechange 事件，在這個事件中我們根 據伺服器返回狀態的不同來做出不同處理，這其中主要是請求成功後接收相應的返回值來通過 javascript 對客戶端做出相應操作（我 們只是使顯示有關資訊）；最後我們傳送這個請 求（通過send方法）。
總結
通過上面說 明和程式碼實現我們發現事實上整個 Ajax 的無重新整理功能就是利用 XMLHttpRequest 的非同步請求來完成的。關鍵 就是我們瞭解XMLHttpRequest的相關成員資訊。當然，我們上面說實際開發中如果在手動寫這些程式碼就太不划算了，我們可以選擇合適的框架來進行 Ajax開發。OK，就到這裡吧！