ASP.NET AJAX学习笔记(2) -- XMLHttpRequest
XMLHttpRequest对象是当今AJAX和Web 2.0应用程序的技术基础。虽然ASP.NET Ajax和其它的Ajax的框架都在简化XMLHttpRequest的操作，但是掌握XMLHttpRequest对象对今后的学习是很有帮助的。
XMLHttpRequest最早是微软在IE5中以ActiveX形式推出的，之后各个公司也在其产品中加入了XMLHttpRequest对象。微软也认识到它的重要性，于是在IE7中内置了XMLHttpRequest对象。因此XMLHttpRequest对象就有两种声明方式：
var xmlRequest = new XMLHttpRequest(); // IE7 & Mozilla
var xmlRequest = new ActiveXObject("Microsoft.XMLHTTP"); // IE6 , IE5
下面是XMLHttpRequest对象的属性，事件和方法：
void open(string method, string url,[bool async],[string user],[string pswd]);
创建一个新的HTTP请求
method：Post 或 Get
url：请求的网页地址
async：是否异步调用 默认值：true
user & pswd：用户名和密码，用于请求要求验证的网站
void setRequestHeader(string header, string value);
单独指定请求的头部
void send(string data);
发送Http请求到指定的服务器
data：发送的数据，有两种形式：纯文本和XML
string getAllResponseHeaders(); 和 string getResponseHeader(string header);
获取所有/指定的响应的头部
void abort();
终止指定的Http请求
unsigned short readyState;
目前的Http请求的状态。0：未初始化(就是还没调用open())；1：以初始化(已调用open()，但还未调用send())；2：数据发送中(已调用send())；3：数据接收中；4：数据接收完毕
function onreadystatechange;
有点像C#的代理，就是指定XMLHttpRequest的readyState改变之后调用的函数
string responseText;
以纯文本形式接收的服务器响应
Document responseXML; 以XML形式接收的服务器响应
unsigned short status; 和 string statusText;
服务器返回的Http状态和状态文本，就是404:Not Found，502:Bad Gateway，200:OK之类的。
下面看两个简单的例子：
-
利用XMLHttpRequest读取服务器端的时间在页面的Form中加入如下代码：
<div>
Get DateTime now synchronously.<br />
<hr />
<br />
<input id="button1" type="button" value="Get DateTime" onclick="GetDateTime()"/>
<br/>
<span id="DateTimeNow"></span>
</div>
完成后的页面如下：
之后在Head中加入如下js代码：
<script language="javascript" type="text/javascript">
function GetDateTime() {
var xmlRequest, e;
try {
xmlRequest = new XMLHttpRequest(); //IE7 & Mozilla
}
catch (e) {
try {
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5
}
catch (e) {
}
}
xmlRequest.open("Post", "default2.aspx?callback=true", false); //指定要请求的方式和页面
xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlRequest.send(null); //不发送任何数据到服务器端
var label = document.getElementById("DateTimeNow");
label.innerHTML = xmlRequest.responseText; //获取服务器响应 跟新页面上的时间
}
</script>
在后台的Page_Load事件中加入如下代码：
bool isCallback = String.Equals(Page.Request.QueryString["callback"], "true", StringComparison.OrdinalIgnoreCase); //判断是否是回调
if (isCallback)
{
Response.Write("DateTime Now : " + DateTime.Now.ToString());
Response.Flush(); //发送响应
Response.End();
}
执行的情况：
可以看到当我们点击按钮的时候，页面从服务器端得到了当前的时间，但是并没有刷新整个页面。
2.异步读取服务器端的时间
新建一个页面，在Form中加入如下代码：
<div>
Get DateTime now asynchronously.<br />
<hr />
<br />
<input id="button1" type="button" value="Get DateTime" onclick="GetDateTime()" />
<br />
<span id="DateTimeNow"></span>
</div>
之后在Head中加入如下js代码：
<script language="javascript" type="text/javascript">
var xmlRequest;
function GetDateTime() {
var e;
try {
xmlRequest = new XMLHttpRequest(); // IE7 & Mozilla
}
catch (e) {
try {
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP"); // IE6 , IE5
}
catch (e) {
}
}
xmlRequest.open("Post", "default2.aspx?callback=true", true); // true表示异步回调
xmlRequest.onreadystatechange = CallbackComplete; // 当readyState改变的时候，调用CallbackComplete函数
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlRequest.send(null);
}
function CallbackComplete() {
if (xmlRequest.readyState == 4) {
// 4 表示接收完毕 跟新页面时间
var label = document.getElementById("DateTimeNow");
label.innerHTML = xmlRequest.responseText;
}
}
</script>
在后台的Page_Load事件中的代码同上一个例子。
页面运行效果：
