XMLHttpRequest - 原始AJAX初步
我们知道，传统的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>
<!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!");
}
}
}
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;
}
}
}
}
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;
}
}
}
}
至此，整个逻辑就已经全部完成了！
技术改变世界
