风之相随'S BLOG - AJAX XML

ajax无刷新投票，IE下正常调用

sf223cn@yahoo.com.cn(admin) — Sun,08 Feb 2009 13:20:15 +0800

自己写的ajax无刷新投票，IE下正常调用~~

投票页面

程序代码

调查投票

vote.asp的内容

程序代码

'连接你自己的数据库，最好根据自己的数据库重新写下面的代码~~
<%
dim n
n=""
if request.querystring("vote")<>"" or request.querystring("vote")>0 then
sql="update vote set count=count+1 where vote='vote"&request.querystring("vote")&"'"
conn.execute sql
end if
set rs=server.createobject("adodb.recordset")
sql="select * from vote"
rs.open sql,conn,1,1
do while not rs.eof
n=n&" "&rs(1)
rs.movenext
loop
response.write trim(n)
%>

一段重用很高的ajax代码

sf223cn@yahoo.com.cn(admin) — Sun,08 Feb 2009 13:17:58 +0800

一段重用很高的ajax代码，可以套用

程序代码

        client.html

使用Ajax进行用户名有效性验证

sf223cn@yahoo.com.cn(admin) — Sun,08 Feb 2009 13:15:43 +0800

用户名有效性验证，是会员注册必须的步骤，下面一步步介绍如何使用Ajax进行有效性验证

一、用户请求页
新建一个页面reg.html,如下代码

程序代码

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" >

Ajax范例---用户名有效性验证

Ajax范例---用户名有效性验证

输入用户名:

二、Javascript发送请求代码
新建文件custom.js(Javascript代码) 代码如下

程序代码

/*
Ajax范例
By Anlige
zhanghuiguoanlige@126.com
*/
//自定义函数,获取标签对象
    function $(id){
        return document.getElementById(id);
    }
//创建组件
    function createObject(){
        var Request=null;
        if (window.ActiveXObject) {
            Request= new ActiveXObject("Microsoft.XMLHTTP");
        }else if (window.XMLHttpRequest) {
            Request= new XMLHttpRequest();
            if (Request.overrideMimeType) {//设置MiME 类别
                Request.overrideMimeType("text/xml");
            }
        }
        return Request;
    }

    function test(){
        var username=$("username").value; //获取表单值
        if(username==""){alert("请输入用户名");return false};
        $("result").innerText="验证中...";

        //创建一个组件
        var myRequest=createObject();

  //直接附加到url后面的数据总是以get方式提交,地址里面的rnd参数仅仅是为了防止缓存(有人习惯用日期来防止缓存)
        var url="test.asp?rnd=" + Math.random();


        //要post方式提交的数据,作为send方法的参数
        var data="username=" + username;

        //调用open方法: 使用POST方式提交;  提交到url;  true代表启用异步.
        myRequest.open("Post",url,true);

        //Post方式提交必须加这句,并且要在调用post方法后才能加,否则会提示"未知错误"
        myRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        //设置响应函数
        myRequest.onreadystatechange =function(){
            if(myRequest.readyState==4){   //如果为说明数据发送成功,并返回
                if(myRequest.status==200){  //如果为,说明正常状态;404为未找到页面;500为服务器错误
                    var msg=myRequest.responseText;
                    if(msg=="no"){
                        $("result").innerText="本用户名未被使用,您可以注册！";
                    }else{
                        $("result").innerText="本用户名已被占用,请选择其他用户名！";
                    }
                }
            }
        };

        //调用send方法发送数据
        myRequest.send(data);
    }

三、后台验证代码
新建文件test.asp(后台验证代码),本文件编码为utf-8(用记事本打开--另存为utf-8格式--覆盖原文件即可)

程序代码

<%@ LANGUAGE="VBScript"%>
<%
response.charset="utf-8"   '字符编码为utf-8
dim names,username,isHas
names="admin|anlige|admin888"   '模拟一个数据库
names=split(names,"|")
username=request.form("username")  '因为Ajax是post的数据，这里用form集合
isHas="no"
for i=0 to ubound(names)
    if names(i)=username then
        isHas="yes"
        exit for
    end if
next
response.write isHas  '输出验证结果
%>

这样，模拟用户注册过程中的"用户名有效性验证"就完成了；
测试方法:浏览器中打开reg.html,输入一个用户名进行验证,如果输入 admin,anlige,admin888三个中的任何一个都会提示已经被注册。改实例修改test.asp后完全可以移植到原用户验证系统

用AJAX编写用户注册时的应用实例

sf223cn@yahoo.com.cn(admin) — Wed,03 Dec 2008 22:04:51 +0800

我所举的这个例子是一个企业用户注册时的一个应用，当用户注册时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。

如果我们用AJAX技术来实现以上的操作则不必等待服务器返回信息，用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进行。当服务器信息返回的时候，会自动在面页相应位置显示返回信息，不必刷新页面，相当于局部刷新的效果。下面我们来看代码吧。

HTML页面的完整代码如下：

程序代码

<%@page language="java" contentType="text/html;charset=GBK"%>

　　用JavaScript来创建XmlHttpRequest 类向服务器发送一个HTTP请求后，接下来要决定当收到服务器的响应后，需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示:Xmlhttp_request.onreadystatechange =FunctionName;

　　FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后。

　　我们调用request.open()-它用服务器打开套接字频道，使用一个HTTP动词(GET或POST)作为第一个参数并且以数据提供者的URL作为第二个参数。request.open()的最后一个参数被设置为true-它指示该请求的异步特性。注意，该请求还没有被提交。随着对request.send()的调用，开始提交-这可以为POST提供任何必要的有效载荷。在使用异步请求时，我们必须使用request.onreadystatechanged属性来分配请求的回调函数。(如果请求是同步的话，我们应该能够在调用request.send之后立即处理结果，但是我们也有可能阻断用户，直到该请求完成为止。)

　　再看看数据提供者的URL，url = "/chkUserAndCom"，servlet如下：

程序代码

/**//*
* Created on 2005-12-31
*
* TODO To change the template for this generated file go to
* Window - Preferences - Java - Code Style - Code Templates
*/
package com.event;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.beans.EBaseInfo;

/** *//**
* @author Alpha 2005-12-31
*
* ＜P＞Ajax 演示---企业注册时检查企业用户名和企业名称＜/P＞
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
public class CheckUserAndComNm {
private String msgStr = "";
protected void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException
{

　EComBaseInfo info=new EComBaseInfo();
　String oprate=request.getParameter("oprate")).trim();
　String userName=request.getParameter("userName");
　String passWord=request.getParameter("password");
　String comName=request.getParameter("comName");

　try
　{
　　if(oprate.equals("chkUser"))
　　{
　　　response.setContentType("text/html;charset=GB2312");
　　　if(userName.length()＜5||userName.length()＞20)
　　　{
　　　　msgStr = "对不起,用户名必须为字母、数字或下划线，长度为5-20个字符!";
　　　}
　　　else
　　　{
　　　　boolean bTmp=info.findUser(userName); //找查数据库中有无该用户名
　　　　if(bTmp)
　　　　　msgStr ="对不起,此用户名已经存在,请更换用户名注册!";
　　　　else
　　　　　msgStr ="";
　　　}
　　　response.getWriter().write(msgStr);
　　}
　　else if(oprate.equals("chkCom"))
　　{
　　　response.setContentType("text/html;charset=GB2312");
　　　if(comName.length()＜6||comName.length()＞100)
　　　{
　　　　msgStr = "对不起,公司名称长度为6-100个字符(不包括字符内的空格)!";
　　　}
　　　else
　　　{
　　　　boolean bTmp=info.findCom(comName); //找查数据库中有无该企业名
　　　　if(bTmp)
　　　　　msgStr ="对不起,此企业名称已经存在,请更换企业名称注册!";
　　　　else
　　　　　msgStr ="";
　　　}
　　　response.getWriter().write(msgStr);
　　
　　}
　}
　catch(Exception ex)
　{
　}
　finally
　{
　　request.setAttribute("url",url);
　}
}

protected void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException
{
　doGet(request,response);
}
}

AJAX技术小结

1. AJAX(Asynchronous JavaScript and Xml)是一个结合了Java技术、Xml、以及JavaScript的编程技术，可以让你构建基于Java技术的Web应用，并打破了使用页面重载的惯例。

2. AJAX，异步JavaScript与Xml，是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用AJAX，你可以创建接近本地桌面应用的，直接的、高可用的、更丰富的、更动态的Web用户接口界面。

3. 对于Mozilla.Netscape﹑Safari、Firefox等浏览器，创建XmlHttpRequest 方法如下：

Xmlhttp_request = new XmlHttpRequest();

4. IE等创建XmlHttpRequest 方法如下：

Xmlhttp = new ActiveXObject("MsXml2.XmlHTTP")　或　Xmlhttp = new ActiveXObject("Microsoft.XmlHTTP");

5. Xmlhttp_request.open('GET', URL, true); Xmlhttp_request.send(null);

6. open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。按照HTTP规范，该参数要大写;否则，某些浏览器(如Firefox)可能无法处理请求。第二个参数是请求页面的URL。第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。

AJAX技术运用的好的话，给我们的网页增添了许多友好的效果，给用户还来更好的感觉。AJAX是个好东西。

readyState的五种状态详解

sf223cn@yahoo.com.cn(admin) — Wed,03 Dec 2008 22:00:50 +0800

在《Pragmatic Ajax A Web 2.0 Primer 》中对readyStae状态的介绍，摘译如下：

0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.

0 －（未初始化）还没有调用send()方法
1 －（载入）已调用send()方法，正在发送请求
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
3 －（交互）正在解析响应内容
4 －（完成）响应内容解析完成，可以在客户端调用了
对于readyState的这五种状态，其他书中大都语焉不详。像《Foundations of Ajax》中，只在书中的表2-2简单地列举了状态的“名称”－－The state of the request. The five possible values are 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, and 4 = complete。而《Ajax in Action》中好像根本就没有提到这5种状态的细节。

《Professional Ajax》中虽不尽人意，但还是有可取之处：

There are five possible values for readyState:
0 (Uninitialized): The object has been created but the open() method hasn’t been called.
1 (Loading): The open() method has been called but the request hasn’t been sent.
2 (Loaded): The request has been sent.
3 (Interactive). A partial response has been received.
4 (Complete): All data has been received and the connection has been closed.
readyState有五种可能的值：

0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法。
1 (载入)：已经调用open() 方法，但尚未发送请求。
2 (载入完成)：请求已经发送完成。
3 (交互)：可以接收到部分响应数据。
4 (完成)：已经接收到了全部数据，并且连接已经关闭。

在《Understanding AJAX: Using JavaScript to Create Rich Internet Applications》中，则用下表进行了说明：

readyState Status Code
Status of the XMLHttpRequest Object

(0) UNINITIALIZED  未初始化
The object has been created but not initialized. (The open method has not been called.)
（XMLHttpRequest）对象已经创建，但尚未初始化（还没有调用open方法）。

(1) LOADING  载入
The object has been created, but the send method has not been called.
（XMLHttpRequest）对象已经创建，但尚未调用send方法。

(2) LOADED  载入完成
The send method has been called, but the status and headers are not yet available.
已经调用send方法，（HTTP响应）状态及头部还不可用。

(3) INTERACTIVE  交互
Some data has been received. Calling the responseBody and responseText properties at this state to obtain partial results will return an error, because status and response headers are not fully available.
已经接收部分数据。但若在此时调用responseBody和responseText属性获取部分结果将会产生错误，因为状态和响应头部还不完全可用。

(4) COMPLETED  完成
All the data has been received, and the complete data is available in the responseBody and responseText properties.
已经接收到了全部数据，并且在responseBody和responseText属性中可以提取到完整的数据。
根据以上几本书中的关于readyState五种状态的介绍，我认为还是《Pragmatic Ajax A Web 2.0 Primer 》比较到位，因为它提到了对接收到的数据的解析问题，其他书中都没有提到这一点，而这一点正是“(3)交互”阶段作为一个必要的转换过程存在于“(2)载入完成”到“(4)完成”之间的理由，也就是其任务是什么。归结起来，我觉得比较理想的解释方法应该以“状态：任务（目标）+过程+表现（或特征）”表达模式来对这几个状态进行定义比较准确，而且让人容易理解。

总结如下：

readyState 状态    状态说明

(0)未初始化
此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。

(1)载入
此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。

(2)载入完成
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。

(3)交互
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。

(4)完成
此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

概而括之，整个XMLHttpRequest对象的生命周期应该包含如下阶段：

创建－初始化请求－发送请求－接收数据－解析数据－完成

在具体应用中，明确了readyState的五个状态（XMLHttpRequest对象的生命周期各个阶段）的含义，就可以消除对Ajax核心的神秘感（语焉不详的背后要么是故弄玄虚，制造神秘感；要么就是“以其昏昏，使人昭昭”），迅速把握其实质，对减少学习中的挫折感和增强自信心都极其有益。

比如，通过如下示例：

程序代码

//声明数组
var states ＝ ["正在初始化……",
      "正在初始化请求……成功！
正在发送请求……",
      "成功！
正在接收数据……",
      "完成！
正在解析数据……",
      "完成！
"];

//回调函数内部代码片段
if (xmlHttp.readyState==4)
{
   var span = document.createElement(“span”);
   span.innerHTML = states[xmlHttp.readyState];
   document.body.appendChild(span);

   if (xmlHttp.status == 200)
   {
     var xmldoc = xmlHttp.responseXML;
     //其他代码
   }
    //别忘记销毁，防止内存泄漏
    xmlHttp = null;
}
else
{
   var span = document.createElement(“span”);
   span.innerHTML = states[xmlHttp.readyState];
   document.body.appendChild(span);
}

结果如下：
正在初始化请求……成功！
正在发送请求……成功！
正在接收数据……完成！
正在解析数据……完成！
我们很容易明白XMLHttpRequest对象在各个阶段都在做什么。因此，也就很容易对Ajax的核心部分有一个真正简单明了的理解。
附：
Example 1

readyState 返回XMLHTTP请求的当前状态
语法 lValue = oXMLHttpRequest.readyState;

程序代码

var XmlHttp;
XmlHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");

function send() {
   XmlHttp.onreadystatechange = doHttpReadyStateChange;
   XmlHttp.open("GET", "http://localhost/sample.xml", true);
   XmlHttp.send();
}

function doHttpReadyStateChange() {
   if (XmlHttp.readyState == 4) {
      alert("Done");
   }
}

备注变量，此属性只读，状态用长度为4的整型表示.定义如下：

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

Example 2

下面这个范例说明如何在运行时以 VBScript 代码读取 RDS.DataControl 对象的 ReadyState 属性。ReadyState 为只读属性。
要测试该范例，请剪切该代码并粘贴到标准 HTML 文档的标记之间，然后将其命名为“ADCapi9.asp”，ASP 脚本将标识服务器。

程序代码

RDS API Code Examples

RDS.DataControl ReadyState property

   ID=ADC>

   http://<%=Request.ServerVariables("SERVER_NAME")%>">

ASP+AJAX做类似google的搜索提示

sf223cn@yahoo.com.cn(admin) — Wed,03 Dec 2008 21:56:19 +0800

主要要文件有:

Index.html 实现功能,一个文本框,输入内容并实现提示

search.asp 查询功能,让文本框输入的内容在数据库中查询,然后返回给客户端

conn.asp 数据库连接功能,实现与数据库相连 xmlhttp.js AJAX 核心部分,用来把客户端的数据传给服务端,再把服务端的数据返还给客户端.

style.css 样式文件,主要是对google提示框查询到的内容进行样式化处理

先看第一个文件style.css

程序代码

@charset "utf-8";
/* CSS Document */

body
{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}

#search_suggest
{
position:absolute;
background:#FFFFFF;
text-align:left;
border:1px #000000 solid;
}

.suggest_link_over
{
background-color:#e8f2fe;
padding:2px 6px;
}
.suggest_link
{
padding:2px 6px;
background-color:#FFFFFF;
}
.none
{
display:none;
}

第二个文件: xmlhttp.js

程序代码

// JavaScript Documentrt
var xmlHttp = createXmlHttpRequest();
function createXmlHttpRequest()
{
var xmlhttp = null;
try
{
xmlhttp = XMLHttpRequest();
}
catch(e1)
{
try
{
xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(e2)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e3)
{
xmlhttp = false;
alert("创建失败!");
}
}
}
return xmlhttp;
}

function change_key()
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
var str = document.getElementById("txt_key").value;

xmlHttp.open("get","search.asp?key=" + str ,true);
xmlHttp.onreadystatechange = handSearchRequest;
xmlHttp.send(null);
}
}

function handSearchRequest()
{
if (xmlHttp.readyState == 4)
{
var div = document.getElementById("search_suggest");
div.innerHTML = "";
var str = xmlHttp.responseText.split("|");

for (var i=0; i{
var suggest = ’

suggest += ’onmouseout="javascript：suggestOut(this);" ’;
suggest += ’onclick="javascript：setSearch(this.innerHTML);" ’;
suggest += ’class="suggest_link">’ + str[i] + ’

’;
div.innerHTML += suggest;
}
}
}

function setSearch(div_value)
{
document.getElementById("txt_key").value = div_value;
document.getElementById("search_suggest").className = ’none’;
}
function suggestOver(div_value)
{
div_value.className = ’suggest_link_over’;
}

function suggestOut(div_value)
{
div_value.className = ’suggest_link’;
}

第三个文件:conn.asp

程序代码

<%
set conn = Server.CreateObject("Adodb.Connection")
connStr = "Provider=SQLOLEDB;Server=.\SQLEXPRESS;UID=sa;PWD=sa;Initial catalog=test;"
conn.ConnectionString = connStr
conn.open
%>

第四个文件:search.asp

程序代码

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<%key = request.QueryString("key")

if (key <> "") then
key = replace(key,"\","")
key = replace(key,"’","")
key = replace(key,"or","")
sel_sql = "select [key] from [key] where [key] like ’" & key & "%’"
dim keyword
keyword = ""

set rs = conn.execute (sel_sql)
do while not rs.eof
keyword = keyword & rs(0) & "|"
rs.movenext
loop

response.Write(keyword)
end if
%>

最后一个结果文件:index.html

程序代码

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

google提示

AJAX POST的使用实例(PHP)

sf223cn@yahoo.com.cn(admin) — Wed,03 Dec 2008 21:45:13 +0800

AJAX POST的使用实例 @ 2008-12-3 晚上调试成功
ajax.html

程序代码

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

兼容多浏览器的AJAX入门实例（超详细注释）

要替换的内容

ajax_show.php

程序代码

$content = isset($_POST['name']) ? $_POST['name'] : '';
echo $content;
?>

Ajax表单验证用户名是否存在

sf223cn@yahoo.com.cn(admin) — Wed,03 Dec 2008 21:25:22 +0800

做一个表单验证里面最简单的例子，检查用户名是否存在，使用Ajax完成表单验证的正常步骤应该是：

客户端收集表单信息。
使用XMLHttpRequest对象提交到服务器。
服务器完成验证的逻辑，返回结果信息。
浏览器端根据服务器返回的信息对用户做出一定的提示。
不过由于我的空间不支持任何服务器段语言，所以把本应在服务器的逻辑搬到了浏览器，由JavaScript来做，服务器只负责提供一个用户名的列表。最后的效果如下，试着输入test，cainiao8这些用户名，都会显示已注册。

JavaScript代码分析
首先，当文档载入完毕的时候，给表格设置change事件的响应函数ajaxValidate，代码如下：

程序代码

addEventSimple(window,'load',function(){
var test = document.getElementById('username');
addEventSimple(test,'change',ajaxValidate);
}

这样，当用户名文本框内的值改变之后，就会调用ajaxValidate函数，其代码如下：

程序代码

function ajaxValidate(){
    var options = {
        url:'ajax/ajaxUsernames.xml',
        listener:callback,
        method:'GET'
    }
    var request = createRequest(options);
    request.send(null);
}

它会使用之前介绍的createRequest函数初始化一个XMLHttpRequest对象，并且将它发送到服务器，请求ajaxUsernames.xml文件。

最后就是callback函数了：

程序代码

callback函数在已经存在的用户名搜索当前用户输入的名字，判断是否已经存在。

建一个XMLHttpRequest对象池

sf223cn@yahoo.com.cn(admin) — Mon,01 Dec 2008 14:21:49 +0800

在ajax应用中，通常一个页面要同时发送多个请求，如果只有一个XMLHttpRequest对象，前面的请求还未完成，后面的就会把前面的覆盖掉，如果每次都创建一个新的XMLHttpRequest对象，也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池，如果池里有空闲的对象，则使用此对象，否则将创建一个新的对象。

下面是我最近写的一个简单的类：

程序代码

/**
* XMLHttpRequest Object Pool
*
* @author    legend
* @link      http://www.ugia.cn/?p=85
* @Copyright www.ugia.cn
*/

var XMLHttp = {
    _objPool: [],

    _getInstance: function ()
    {
        for (var i = 0; i < this._objPool.length; i ++)
        {
            if (this._objPool[i].readyState == 0 || this._objPool[i].readyState == 4)
            {
                return this._objPool[i];
            }
        }

        // IE5中不支持push方法
        this._objPool[this._objPool.length] = this._createObj();

        return this._objPool[this._objPool.length - 1];
    },

    _createObj: function ()
    {
        if (window.XMLHttpRequest)
        {
            var objXMLHttp = new XMLHttpRequest();

        }
        else
        {
            var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
            for(var n = 0; n < MSXML.length; n ++)
            {
                try
                {
                    var objXMLHttp = new ActiveXObject(MSXML[n]);
                    break;
                }
                catch(e)
                {
                }
            }
         }

        // mozilla某些版本没有readyState属性
        if (objXMLHttp.readyState == null)
        {
            objXMLHttp.readyState = 0;

            objXMLHttp.addEventListener("load", function ()
                {
                    objXMLHttp.readyState = 4;

                    if (typeof objXMLHttp.onreadystatechange == "function")
                    {
                        objXMLHttp.onreadystatechange();
                    }
                },  false);
        }

        return objXMLHttp;
    },

    // 发送请求(方法[post,get], 地址, 数据, 回调函数)
    sendReq: function (method, url, data, callback)
    {
        var objXMLHttp = this._getInstance();

        with(objXMLHttp)
        {
            try
            {
                // 加随机数防止缓存
                if (url.indexOf("?") > 0)
                {
                    url += "&randnum=" + Math.random();
                }
                else
                {
                    url += "?randnum=" + Math.random();
                }

                open(method, url, true);

                // 设定请求编码方式
                setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                send(data);
                onreadystatechange = function ()
                {
                    if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304))
                    {
                        callback(objXMLHttp);
                    }
                }
            }
            catch(e)
            {
                alert(e);
            }
        }
    }
};

示例：

程序代码

Ajax+PHP简单基础入门教程

sf223cn@yahoo.com.cn(admin) — Thu,27 Nov 2008 16:30:38 +0800

Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。对于Ajax，最核心的一个对象是XMLHttpRequest，所有的ajax操作都离不开对这个对象的操作。

首先我们来了解怎么在javascript中创建这个对象：

程序代码

var xmlHttp = new XMLHttpRequest();

这行简单的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中，创建了 XMLHttpRequest 对象。但是对于市场占有率达到70%的IE来说，这种方法是不行的，而不同的IE版本还有不同的创建方法，所以我们需要在IE下面使用下面两种创建对象的办法：

程序代码

try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//针对较新的浏览器
} catch (err) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//针对较老的浏览器
} catch (err2) {
xmlHttp = false;
}
}

即使这样，我们也无法预料有些浏览器可能无法创建这个对象，所以在创建不成功的情况下，我们还要加上一句：

程序代码

if (!xmlHttp){
alert("无法创建 XMLHttpRequest 对象！");
}

结合起来就是：

程序代码

然后，让我们建立一个函数getInfo()，打开异步请求：

程序代码

function getInfo() {
var num = document.getElementById("num").value;//获得表单的数据
var url = "/ajax/1.php?n=" + escape(num);
xmlHttp.open("GET", url, true);//这里的true代表是异步请求
}

一旦用 open() 配置好之后，就可以发送请求了。虽然可以使用 send() 发送数据，但也能通过 URL 本身发送数据。事实上，在大部分GET 请求中，用 URL 发送数据要容易得多，所以这里用null作为send()的参数就可以了。url地址里面的php文件是被请求来处理所需要数据的php文件，就像我们平时用PHP的时候一样，后面的参数可以加多个，并用&分隔开来。
xmlHttp.send(null);

在发送了数据之后，我们需要用回调方法来获得服务器的状态，所以就用到了onreadystatechange 属性。
xmlHttp.onreadystatechange = updatePage;

此语句已经要放在send()语句前面，这样才会有效，后面的updatePage是处理返回信息的一个函数。完整的getInfo()如下：

程序代码

我们还需要在html里面来触发这个函数：

程序代码

下面我们需要来编写updatePage()这个函数：

程序代码

function updatePage(){
if (xmlhttp.readyState == 4) {
var response = xmlhttp.responseText;
document.getElementById("city").value = response;
}
}

上面这段代码里面的readyState是服务器返回的一个状态，4这个状态表示请求已经发送，并处理完毕。responseText是获得服务器返回的信息，然后通过javascript赋给ID为city的表单。

到此，一个简单的Ajax程序就完成了，完整的javascript代码如下：

程序代码

这里还缺一个php文件，由于处理的方式不一样，写法也不一样，而且这不是Ajax的主要部分，所以这里就不放代码了。只要记住php是输出并返回所需要的数据就可以了。

这教程,对初学者挺适合.

*	用户帐号:
*	企业名称:
*	用户密码:
*	确认密码:

风之相随'S BLOG - AJAX XML

ajax无刷新投票，IE下正常调用

一段重用很高的ajax代码

使用Ajax进行用户名有效性验证

Ajax范例---用户名有效性验证

用AJAX编写用户注册时的应用实例

Ajax 演示程序

readyState的五种状态详解

RDS API Code Examples

RDS.DataControl ReadyState property

ASP+AJAX做类似google的搜索提示

AJAX POST的使用实例(PHP)

Ajax表单验证用户名是否存在

建一个XMLHttpRequest对象池

Ajax+PHP简单基础入门教程