利用xmlHttp实现一个简单的Ajax无刷新
最近在研究无刷新方面的技术，今天偶然遇到一个网友，和他讨论了一下。
下面是利用xmlHttp实现一个简单的Ajax：
以下是CodeNameClient.apsx的html的source：
<%@ Page language="c#" Codebehind="CodeNameClient.aspx.cs" AutoEventWireup="false" Inherits="CodeName.CodeNameClient" codePage="932"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link type="text/css" rel="stylesheet" href="StyleSheet.css">
<script language="JavaScript">
<!--
function Test(objSrc,objDes)
{
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var data = xmlHttp.responseText;
document.getElementById(objDes).value = data;
}
}
}
xmlHttp.open("GET","CodeNameServer.aspx?testid=" + objSrc.value);
xmlHttp.send(null);
}
-->
</script>
</HEAD>
<body ms_positioning="GridLayout">
<form id="FromCodeName" method="post" runat="server">
<table id="Table1" height="100%" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td nowrap align="right" width="20%">改变文本内容：
</td>
<td nowrap align="left" width="20%"><asp:textbox id="TextBoxJCode1" runat="server" height="25px"></asp:textbox></td>
<td nowrap align="left" width="15%">服务器端返回：</td>
<td nowrap align="left" width="45%"><asp:textbox id="TextBoxJName1" runat="server" height="25px" width="296px"></asp:textbox></td>
</tr>
</table>
</form>
</body>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link type="text/css" rel="stylesheet" href="StyleSheet.css">
<script language="JavaScript">
<!--
function Test(objSrc,objDes)
{
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var data = xmlHttp.responseText;
document.getElementById(objDes).value = data;
}
}
}
xmlHttp.open("GET","CodeNameServer.aspx?testid=" + objSrc.value);
xmlHttp.send(null);
}
-->
</script>
</HEAD>
<body ms_positioning="GridLayout">
<form id="FromCodeName" method="post" runat="server">
<table id="Table1" height="100%" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td nowrap align="right" width="20%">改变文本内容：
</td>
<td nowrap align="left" width="20%"><asp:textbox id="TextBoxJCode1" runat="server" height="25px"></asp:textbox></td>
<td nowrap align="left" width="15%">服务器端返回：</td>
<td nowrap align="left" width="45%"><asp:textbox id="TextBoxJName1" runat="server" height="25px" width="296px"></asp:textbox></td>
</tr>
</table>
</form>
</body>
</HTML>
该aspx页面中的js中的Test()实现一个递归的用xmlHttp读取指定的url的Response信息，并把读取的值赋给TextBoxJName1。
以下是CodeNameClient.apsx.cs：
using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Drawing;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;namespace CodeName
{
public class CodeNameClient : System.Web.UI.Page
{ protected System.Web.UI.WebControls.TextBox TextBoxJCode1; protected System.Web.UI.WebControls.TextBox TextBoxJName1; private void Page_Load(object sender, System.EventArgs e) { TextBoxJCode1.Attributes.Add("onchange","Test(this,'TextBoxJName1');");
}
}
}
CodeNameServer:（必须是一个空白的文件的aspx，不能有任何的html标签）
以下是CodeNameServer.aspx：(只有这一行)
<%@ Page language="c#" Codebehind="CodeNameServer.aspx.cs" AutoEventWireup="false" Inherits="CodeName.CodeNameServer" %>
以下是CodeNameServer.aspx.cs:
using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Drawing;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;namespace CodeName{ public class CodeNameServer : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { string testid = ""; if (Request.QueryString.Keys.Count > 0 && Request.QueryString["testid"].Length > 0) { testid = Request.QueryString["testid"]; } Response.Write("要返回去的结果："+testid ); } }}
CodeNameServer实现获取客户端xmlHttp打开的CodeNameServer.aspx?testid=XXX中的testid的值，并Response输出，并立即被CodeNameClient中的xmlHttp读取。
右边的运行结果是不是正确？TextBoxJName1的值是不是等于“要返回去的结果：”TextBoxJCode1的值？
本文是和csdn网友一起讨论。
