1 <head runat="server"> 2 <title>简单的ajax调用</title> 3 <script type="text/javascript"> 4 function Ajax() { 5 var xmlHttpReq = null; 6 //IE5,IE6是以ActiveXObject引入XMLHttpRequest对象 7 //这个判断是为了兼容上述两个版本的IE浏览器 8 if (window.ActiveXObject) { 9 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 10 } 11 //XMLHttpRequest是window对象的子对象 12 else if (window.XMLHttpRequest) { 13 xmlHttpReq = new XMLHttpRequest(); 14 } 15 16 xmlHttpReq.open("GET", "AjaxServer.aspx", true); 17 //XMLHttpRequest对象的readyState值改变值，会触发onreadystatechange事件 18 xmlHttpReq.onreadystatechange = function () { 19 //请求完成加载：readyState=4 20 //HTTP状态值为200 21 if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) { 22 var resText = document.getElementById("resText"); 23 //responseText是服务器端返回的结果 24 //即AjaxServer.aspx后台返回的结果 25 resText.innerHTML = xmlHttpReq.responseText; 26 } 27 }; 28 //使用GET方法提交，所以可以使用null作为参数调用 29 xmlHttpReq.send(null); 30 } 31 </script> 32 </head> 33 <body> 34 <form id="form1" runat="server"> 35 <input type="button" value="Ajax提交" onclick="Ajax();" /> 36 <div id="resText"> 37 </div> 38 </form> 39 </body>
1 public partial class AjaxServer : System.Web.UI.Page 2 { 3 protected void Page_Load(object sender, EventArgs e) 4 { 5 Response.Write("hello,Ajax!"); 6 } 7 } 8 }
效果图：
