Ajax学习笔记(1) 

 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>
View Code
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 }
View Code

 

效果图：

posted on 2015-02-02 22:44  水语者9  阅读(200)  评论(0)  编辑  收藏  举报