使用XMLHttpRequest实现AJAX
一、介绍
本文介绍利用原生态Javascript打造Ajax的全过程。
达到的效果是:点击页面上的按钮,通过传统的Javascript的Ajax方式从服务端取回一个"Hello Ajax!"的字符串显示在页面上。
如图所示:
二、前端准备
1.页面上的HTML元素
<input type="button" value="Ajax提交" onclick="Ajax();" />
<div id="resText"></div>
2.Javascript代码
/*
* Description:原生态Javascript实现的Ajax
* 效果:点击按钮通过传统Javascript的Ajax方式从服务端取回一个"Hello Ajax!"的字符串显示在页面上
* Author: FrankFan
* Date:2012-8-11
*/
// 声明一个空对象用来装入XMLHttpRequest
var xmlHttpReq = null;
//该函数用来异步获取信息
function Ajax() {
// 给xmlHttpReq对象赋值
if (window.ActiveXObject) { // IE5 IE6是以ActiveXObject的形式引入XMLHttpRequest对象的
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //除IE5 IE6以外的浏览器XMLHttpRequest是window的一个子对象
xmlHttpReq = new XMLHttpRequest(); //实例化一个XMLHttpRequest对象
}
if (!xmlHttpReq) {
alert("创建xmlhttp对象异常!");
return false;
}
//实例化成功后,用open方法初始化XMLHttpRequest对象 xmlHttpReq.open("GET", "Server.ashx", true); //调用open方法并采用异步方式
xmlHttpReq.onreadystatechange = RequestCallBack; // 设置回调函数
xmlHttpReq.send(); //最后才正式发送请求
}
// 请求的回调函数
function RequestCallBack() {
if (xmlHttpReq.readyState == 4) {
if (xmlHttpReq.status == 200) {
document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
}
else {
alert("Ajax服务器返回错误!");
}
}
}
三、服务端
本例是将xmlHttpRequest请求提交到了一般处理文件Server.ashx,代码如下:
namespace AjaxDemo
{
public class Server : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("Hello Ajax!");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
Game Over.
作者:樊勇
出处:http://www.cnblogs.com/fanyong/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
我的联系方式:fanyong@gmail.com
个人独立博客:www.fy98.com