文章目录
  1. 1. 二、前端准备
  2. 2. 三、服务端

##一、介绍
本文介绍利用原生态Javascript打造Ajax的全过程。

达到的效果是:点击页面上的按钮,通过传统的Javascript的Ajax方式从服务端取回一个”Hello Ajax!”的字符串显示在页面上。

如图所示:

二、前端准备

  1. 页面上的HTML元素

    1
    2
    <input type="button" value="Ajax提交" onclick="Ajax();" />
    <div id="resText"></div>
  2. Javascript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/*
* 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,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
}
}
}
}
文章目录
  1. 1. 二、前端准备
  2. 2. 三、服务端