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

 

效果图:

你可能感兴趣的:(Ajax)