Ajax学习--笔记001
研究了一晚上，终于捣腾出点成果。学着别人做了个异步加法计算
代码如下
Default.aspx
Code<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxExample001._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Ajax Example 001</title>
<script src="XNAjax.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function doAjax() {
var xmlHttp = createXmlHttpRequest();
displayWait();
if (xmlHttp != undefined) {
var url = "getDateTime.aspx";
var data = "Text1=" + document.forms[0].Text1.value + "&Text2=" + document.forms[0].Text2.value;
displayWait();
sendDataByPOST(xmlHttp,url,data,true,displayGetData);
}
}
function displayGetData(data) {
document.getElementById("distxt").innerHTML = data;
}
function displayWait() {
document.getElementById("distxt").innerHTML = "计算中
";}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
A=<input type="text" name="Text1" id="Text1"/>
<br/>
B=<input type="text" name="Text2" id="Text2"/>
<br/>
C=A+B=<span id="distxt"></span><br/>
<input id="Button1" type="button" onclick="doAjax()" value="button" /></div>
</form>
</body>
</html>
XNAjax.js
Code//创建XmlHttpRequest对象
function createXmlHttpRequest() {
var xmlHttp;
var errmsg;
try {
xmlHttp = new XMLHttpRequest();
} catch(e) {
errmsg = e.message;
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
for (var i = 0; i < XmlHttpVersions.length && !xmlHttp; i++) {
try {
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
} catch(e) {
errmsg += "\n" + e.message;
}
}
}
//返回已经创建的对象，或显示错误信息
if (!xmlHttp) {
alert("Error:Can't Creat XMLHttpRequest.\nMessage:" + errmsg);
} else {
return xmlHttp;
}
}
//状态改变时执行回调函数
function readyStateChange(xmlhttp,callfunction) {
//请求状态为4表示成功
if (xmlhttp.readyState == 4) {
//http状态200表示OK
if (xmlhttp.status==200) {
callfunction(xmlhttp.responseText); //所有状态成功，执行此函数，回调数据
//http返回状态失败
} else {
alert("数据处理错:服务端状态" + xmlhttp.statusText);
}
}
}
//提交数据
//@xmlhttp:XMLHttpRequest
//@url:Post URL
//@data:Post Data
//@isasyn:Is Asynchronous[True:Asynchronous False:Synchronization]
//@callfunction:Call back function
//@waitfunction:Wait Function
function sendDataByPOST(xmlhttp,url,data,issyn,callfunction) {
xmlhttp.open('POST',url,issyn);
xmlhttp.setrequestheader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {readyStateChange(xmlhttp,callfunction);};
if (typeof(data) == 'undefined') {
xmlhttp.send();
} else {
xmlhttp.send(data);
}
}
GetDateTime.aspx.cs
Codepublic partial class GetDateTime : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//for (long i = 0; i < 5000000; i++) { }
System.Threading.Thread.Sleep(3000);
string p1 = Page.Request["Text1"];
string p2 = Page.Request["Text2"];
Page.Response.Clear();
Page.Response.Write(int.Parse(p1) + int.Parse(p2));
Page.Response.Flush();
Page.Response.End();
}
}
