上篇博客较为详细的介绍了一下XMLHttpRequest的属性、方法和事件句柄,这篇博客来介绍一下Ajax的五步使用法。为了直观,用一个简单的例子说明:AjaxClient用于提交用户名,AjaxServer用于判断用户名是否使用,并返回提示。
AjaxClient.html:
<html>
<head>
<title>ajaxClient</title>
<script type="text/javascript">
var xmlhttp;
function submit()
{
if(window.XMLHttpRequest)
{
//IE7 above,firefox,chrome^^
xmlhttp=new XMLHttpRequest();
//为了兼容部分Mozillar浏览器,当来自服务器响应开头不是xml,导致的无法响应问题
if(xmlhttp.overrideMimeType)
{
xmlhttp.overrideMimeType('text/xml');
}
}
else if(window.ActiveXObject)
{
//IE5\IE6
xmlhttp=new activeXObject("Microsoft.XMLHTTP");
}
if(xmlhttp==null||xmlhttp==undefined)
{
alert("con't create XMLHttpRequest Object");
}
var userName = document.getElementById('testText').value;
//注册回调函数
xmlhttp.onreadystatechange = callback;
//发送信息
xmlhttp.open('GET','AjaxServer.aspx?name='+userName,true);
xmlhttp.send(null);
}
function callback()
{
//判断交互是否完成,是否正确返回
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
//获取服务器返回信息
var message = xmlhttp.responseText;
//得到提示信息div
var testDiv=document.getElementById('test');
testDiv.innerHTML=message;
}
}
</script>
</head>
<body>
<!--用户名输入框-->
<input type="text" name="wenben" value="" id="testText" />
<input type="button" name="ceshi" value="submit" οnclick="submit();" />
<!--用于显示提示信息-->
<div id="test"></div>
</body>
</html>
AjaxServer.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
string getName = Request["name"].ToString ().Trim();
if (getName == "lida")
{
Response.Write(getName+" 不可用,该用户名已经被使用");
}
else
{
Response.Write("可用,该用户名尚未被使用");
}
}
如果采用POST方式,则需要更改open()和send()方法,并设置请求头部信息:
//POST方式
//需要制定RequstHeader
//将请求参数写入到send中
xmlhttp.open('POST', 'AjaxServer', true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send('name='+userName);
测试结果:
第一步:创建XMLHttpRequest,就像以前博客中所说一样,不能采用浏览器检测,要使用能力检测。创建XMLHttpRequest基本是两种,一种是IE5/IE5.5/IE6使用的activeXObject;一种是其它浏览器使用的XMLHttpRequest()。创建一个全局的xmlhttp变量用来存放XMLHttpRequest对象。
第二步:注册回调函数,注意的是仅仅是将回调函数的地址传给onreadystatechange,而不是返回值,所以不能带执行括号。
第三步:设置与服务器交互的方式、地址、参数等信息。
第四步:向服务器发送请求,启动与服务器的交互。
第五步:创建回调函数,让回调函数接收服务端返回的数据,然后更新页面。
如果仅仅是展示一下Ajax服务器与浏览器页面的交互过程,这个示例就够了,但需要掌握的不仅仅是交互的过程,其中涉及到的很多的细节问题,还需要随着学习的深入继续补充。
以前也使用过浏览器自带的调试功能,通过今天调试,发现自带的开发者工具功能还是挺强大的,不但可以调试js,还可以查看源文件、请求和响应等具体内容,附图一张: