码迷,mamicode.com
首页 > Web开发 > 详细

Ajax学习笔记(1)

时间:2015-02-03 00:26:42      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:

技术分享
 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学习笔记(1)

标签:

原文地址:http://www.cnblogs.com/hshuai/p/4268899.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!