大牛文章:http://www.cnblogs.com/guduoduo/p/3681296.html ---Ajax基础学习
http://www.cnblogs.com/Garden-blog/archive/2011/03/11/1981778.html ---Ajax完整教程
Ajax:Asynchronous JavaScript and XML.异步的JavaScript和xml.
在后台与服务器进行少量数据交换,使网页实现异步更新.(和服务器还是有交互的)
XMLHttpRequest 对象----Ajax的核心对象.这是一个JavaScript对象,相当于表单和服务器之间的桥梁。
为了支持所有浏览器,包括IE5和IE6,在创建XMLHttpRequest 对象的时候,有一个判断.
1 var xmlhttp; 2 if (window.XMLHttpRequest) { 3 xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象 4 } else { 5 xmlhttp = ActiveXObject('Microsoft.XMLHTTP'); //支持IE5,IE6 6 }
写了一个基础的小例子，附有注释：
前台&js部分(Ajax):
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 <script type="text/javascript"> 5 function show(str) { 6 var xmlhttp; 7 if (window.XMLHttpRequest) { 8 xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象 9 } else { 10 xmlhttp = ActiveXObject('Microsoft.XMLHTTP'); //支持IE5,IE6 11 } 12 if (str.length == 0) { 13 document.getElementById("lbl1").innerHTML = ''; 14 return; 15 } 16 xmlhttp.onreadystatechange = function () { 17 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //状态值在上述文章中有详细介绍 18 var res = xmlhttp.responseText; 19 document.getElementById("lbl1").innerHTML = res; 20 21 } 22 } 23 xmlhttp.open("post", "WebForm2.aspx", true); //open方法 24 xmlhttp.send(); //send方法 25 } 26 27 </script> 28 </head> 29 <body> 30 <form id="form1" runat="server"> 31 <div> 32 姓名:<input type="text" id="name1" onkeydown="show(this.value)"/><br/><br/> 33 <label id="lbl1"></label> 34 </div> 35 </form> 36 </body> 37 </html>
后台服务器端:
1 protected void Page_Load(object sender, EventArgs e) 2 { 3 string name=Request.QueryString["name"].ToString(); 4 if (name.Contains("h")) 5 { 6 Response.Write("hhhhh"); 7 } 8 else if(name.Contains("a")) 9 { 10 Response.Write("aaaaaa"); 11 } 12 else if (name.Contains("b")) 13 { 14 Response.Write("bbbbbbb"); 15 } 16 else if (name.Contains("c")) 17 { 18 Response.Write("cccccccc"); 19 } 20 else if (name.Contains("d")) 21 { 22 Response.Write("dddddd"); 23 } 24 else 25 { 26 Response.Write("false"); 27 } 28 }
注意,该页面的前台应该删去除了page指令以外的代码,这样在获得ResponseText的时候才会得到真正的值.
效果图:
值得记住的就是,Ajax中最重要的就是XMLHttpRequest 对象