没有了解ajax的时候，觉得很神秘，了解了之后，不就那么回事么（说笑）
今天我们不用任何框架，来实现一个简单的留言本,已经在Firefox和IE下测试正常
ajax就是“Asynchronous JavaScript and XML”的全称，即异步的javascript和xml,和我高中球队名字一样
用ajax之前我们首先要创建XMLHttpRequest对象，这是实现ajax的关键对象
js代码如下：
//创建一个xmlhttp对象
function createXmlHttp()
{
var xmlHttp;
// 检测MSXMLHTTP版本，为了兼容IE各个版本
var activeKey = new Array("MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP");
if(window.ActiveXObject)
{
for(var i=0;i<activeKey.length;i++)
{
try
{
xmlHttp = new ActiveXObject(activeKey[i]);
if(xmlHttp!=null)
return xmlHttp;
}
catch(error)
{
throw new Error("您的浏览器版本过低，请更新浏览器");
}
}
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
接着就是获取留言列表
//获取留言列表
function getList()
{
var url = "Server.aspx?action=getList";
var xmlhttp = createXmlHttp();
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
$("guestbook").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
最后就是处理用户提交留言的
//提交留言
function PostComment()
{
var uname = $("uname");
var ucontent = $("ucontent");
if(uname.value=="")
{
alert("请输入昵称");
return false;
}
if(ucontent.value=="")
{
alert("请输入内容");
return false;
}
var url = "Server.aspx?action=postComment&uname="+ encodeURI(uname.value)+ "&ucontent=" + encodeURI(ucontent.value)
var xmlhttp2 = createXmlHttp();
xmlhttp2.open("GET",url,true);
xmlhttp2.send(null);
uname.value = "";
ucontent.value = "";
alert("留言成功");
getList();
}
代码很简单就不解释了，其中Server.aspx是用来接收前台的请求，然后response回应，前台和后台的接收和回应都是靠XMLHttpRequest这个对象完成的,这只是个简单的例子，我们还可以增加其自动分页的功能等，但基本的结构是如此。
-------------
实例二：带Flag 标识
function send_request(flag)
{
//创建XMLHttpRequest
http_request=false;
if (window.XMLHttpRequest)
{//非IE浏览器
http_request=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{//IE
try
{
http_request=new ActiveXObject("Msxml2.XMLHTTP");//较新版本IE
}catch(e)
{
try
{
http_request=new ActiveXObject("Microsoft.XMLHTTP");//旧版本IE
}catch(e){}
}
}
else
{
window.alert ("不能创建 XMLHttpRequest 对象，无法应用Ajax");
return false;
}
if(flag=="addAdmin")
{
//指定回调函数
http_request.onreadyStateChange=addAdmin; //指定事件的处理方法
//创建http请求
http_request.open("get","Handler.ashx?flag=addAdmin&userName="+document.getElementById ("txtUserName").value,true);
}
else if(flag=="updateTitle")
{
//指定回调函数
http_request.onreadyStateChange=updateTitle;
i=document.getElementById ("ddlVoteTitle").selectedIndex;
id=document.form1.ddlVoteTitle.options[i].value;
//创建http请求
http_request.open("get","Handler.ashx?flag=updateTitle&id="+id,true);
}
//发送上面创建的http请求
http_request.send(null);
function addAdmin()
{
if(http_request.readyState==4)//发送成功
if(http_request.status==200)//交易成功
{
//正式处理信息
if(http_request.responseText=="该用户已经存在")
{
//隐藏提交按钮
document.getElementById ("Button1").style .display ="none";
}
else
{
document.getElementById ("Button1").style .display ="";
}
document.getElementById ("lblShow").innerText=http_request.responseText;
}
}
}
function updateTitle()
{
if(http_request.readyState==4)//发送成功
{
if(http_request.status==200)//交易成功
{
document.getElementById ("lblTitle").innerText=http_request.responseText;
}
}
点击下载源码
