我們知道，傳統的Web應用是request - response形式的，即浏覽器向伺服器發送請求，伺服器進行處理，然後再對浏覽器響應。
這種形式最大的缺點就是：用戶端需要等伺服器處理完之後，向它響應才能看到結果，在此期間，使用者隻能等待。
如果在網速很差的網絡環境中，這是很很難忍受的。是以，AJAX技術應運而生。
AJAX允許用戶端和伺服器能進行異步的互動。
談及AJAX，有個對象我們不得不提，那就是XMLHttpRequest，我們簡稱它為XHR。
該對象用來發起一個異步的請求。
在最老式的AJAX程式中，我們最标準的做法便是：通過JavaScript的XHR對象來發起一個異步的請求。
那麼，傳統的AJAX應用需要怎麼做呢？
我的總結是5步法，如下：
1）建立XMLHttpRequest對象
2）注冊回調函數
3）設定連接配接資訊
4）發送資料
5）在回調函數中處理資料
下面我們來舉個實際的例子，驗證名字。
邏輯：名字不能為空，如果是david，則報存在，其餘正确。
首先，我們建立一個aspx頁面，如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="simpleAjax.aspx.cs" Inherits="BlogNet.AJAXDemo.simpleAjax" %>
<!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>AJAX的簡單例子</title>
<script type="text/javascript" src="../JS/simpleAjax.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
Please input user name to verify: <br/>
<input type="text" id="userName" />
<input type="button" value="Verify" onclick="verify()"/>
<div id="result"></div>
</div>
</form>
</body>
</html>
然後，我們定制我們自己的處理AJAX邏輯的js檔案，simpleAjax.js,如下：
var xhr = null;
var READY_STATE_UNINTIALIZED = 0;
var READY_STATE_LOADING = 1;
var READY_STATE_LOADED = 2;
var READY_STATE_INTERACTIVE = 3;
var READY_STATE_COMPLETE = 4;
function getXmlHttpRequest() {
var req = null;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
//Correct some browser's bugs
if (req.overrideMimeType) {
req.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//IE 5.5 & IE6
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try {
req = new ActiveXObject(activexName[i]);
break;
} catch(e) {
}
}
return req;
}
function verify() {
// *** 1. Create XMLHttpRequest Object ***
xhr = getXmlHttpRequest();
if (!xhr) {
alert("Creating XMLHttpRequest Object Failed!!");
return;
} else {
//alert(xmlhttp.readyState);
// *** 2. Register Callback Function ***
xhr.onreadystatechange = callback;
// *** 3. Set Connection Information ************
// *** 1st param: http request type: get/post
// *** 2nd param: url
// *** 3rd param: true - asynchronoous
// **********************************************
var userName = document.getElementById("userName").value;
var url = "simpleServer.ashx?name=" + userName;
xhr.open("GET",url,true);
// *** 4. Send Data ***
xhr.send(null);
//Callback Function
function callback() {
// *** 5. Receive Response Data ***
if (xhr.readyState == READY_STATE_COMPLETE) {
//Judge Successful
if (xhr.status == 200) {
//Get Data Back From Server
var responseText = xhr.responseText;
//Show Data On Page
var divNode = document.getElementById("result");
divNode.innerHTML = responseText;
} else {
alert("AJAX Error!");
接下來，便是服務端處理邏輯，以前ASP時候便是寫在asp檔案中，但是在ASP.NET中，如果你使用了aspx檔案，
界面預設的HTML的UI會幹擾我們的傳回資料，導緻結果不正确。是以，我們需要的是一個沒有UI的服務端處理，
在ASP.NET中唯有HttpHandler才能勝任，其實學過J2EE的朋友一定知道，HttpHandler相當于J2EE中的Servlet。
下面我們建立一個ashx檔案用以處理請求邏輯，如下：
using System;
using System.Web;
namespace BlogNet.AJAXDemo
{
public class simpleServer : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string name = context.Request["name"].ToString();
if (name == "")
{
context.Response.Write("姓名不能為空!");
else if (name == "david")
context.Response.Write("該姓名已存在!");
else
context.Response.Write("恭喜:合法使用者.");
public bool IsReusable
get
return false;
至此，整個邏輯就已經全部完成了！
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)