现在ajax的应用相当广泛了，最简单的有微软的asp.net ajax、jquerry等等，使用这些第三方无法了解ajax的原理。
想了解ajax的实现方法，必须自已动手写，下面是个人的总结：
1.前台页面代码list.html：
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script language="javascript" type="text/javascript">
CreateXmlHttp = function()
{
var xmlhttp;
try{
xmlhttp=new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
xmlhttp=new XMLHttpRequest();
}catch(e){}
}
}
// alert(xmlhttp);
return xmlhttp;
}
GetXmlData = function(uri,json)
{
var xmlhttp=CreateXmlHttp();
var base=this;
//定义XMlHttpRequest对象的事件处理程序
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
base.xmlhttp = xmlhttp;
if(xmlhttp.status==200)
{
base.onsuccess();
}
else
{
base.onfailure();
}
}
}
//创建一个连接
xmlhttp.open("post",uri,true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//发送请求
xmlhttp.send(json);
this.onsuccess=function(){};
this.onfailure=function(){};
}
GetUserValue = function()
{
var ObjGetData=new GetXmlData("ajax.aspx",null);
ObjGetData.onsuccess=function()
{
$("user1").innerHTML = this.xmlhttp.responseText;
$("message2").innerHTML = $("Select1").options[$("Select1").selectedIndex].value
}
}
$ = function(obj)
{
return document.getElementById(obj);
}
</script>
<a href="javascript:GetUserValue();">aa</a>
<input type="hidden" id="username" value="antyi" /><br />
<div id="user1">message</div>
<div id="message2">message2</div>
<select multiple id="Select1">
<option value="antyi">antyi</option>
<option value="gdou">gdou</option>
<option value="longtek">longtek</option>
</select>
</BODY>
</HTML>
添加ajax.aspx页面，在ajax.aspx.cs页面的Page_Load方法修改为：
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("hello ajax!");
}
浏览，点击aa链接，即可看到效果(此代码已在IE和Opera浏览器测试通过)。
想了解ajax的实现方法，必须自已动手写，下面是个人的总结：
1.前台页面代码list.html：
Code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script language="javascript" type="text/javascript">
CreateXmlHttp = function()
{
var xmlhttp;
try{
xmlhttp=new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
xmlhttp=new XMLHttpRequest();
}catch(e){}
}
}
// alert(xmlhttp);
return xmlhttp;
}
GetXmlData = function(uri,json)
{
var xmlhttp=CreateXmlHttp();
var base=this;
//定义XMlHttpRequest对象的事件处理程序
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
base.xmlhttp = xmlhttp;
if(xmlhttp.status==200)
{
base.onsuccess();
}
else
{
base.onfailure();
}
}
}
//创建一个连接
xmlhttp.open("post",uri,true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//发送请求
xmlhttp.send(json);
this.onsuccess=function(){};
this.onfailure=function(){};
}
GetUserValue = function()
{
var ObjGetData=new GetXmlData("ajax.aspx",null);
ObjGetData.onsuccess=function()
{
$("user1").innerHTML = this.xmlhttp.responseText;
$("message2").innerHTML = $("Select1").options[$("Select1").selectedIndex].value
}
}
$ = function(obj)
{
return document.getElementById(obj);
}
</script>
<a href="javascript:GetUserValue();">aa</a>
<input type="hidden" id="username" value="antyi" /><br />
<div id="user1">message</div>
<div id="message2">message2</div>
<select multiple id="Select1">
<option value="antyi">antyi</option>
<option value="gdou">gdou</option>
<option value="longtek">longtek</option>
</select>
</BODY>
</HTML>
添加ajax.aspx页面，在ajax.aspx.cs页面的Page_Load方法修改为：
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("hello ajax!");
}
浏览，点击aa链接，即可看到效果(此代码已在IE和Opera浏览器测试通过)。