Ajax入门小例子

最新推荐文章于 2024-04-24 09:22:16 发布

weixin_30426065

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量57

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/hshuai/p/3682819.html

版权

大牛文章: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>

View Code

后台服务器端:

 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         }

View Code

注意,该页面的前台应该删去除了page指令以外的代码,这样在获得ResponseText的时候才会得到真正的值.

效果图:

值得记住的就是,Ajax中最重要的就是XMLHttpRequest 对象

转载于:https://www.cnblogs.com/hshuai/p/3682819.html

weixin_30426065

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax入门小例子

大牛文章:http://www.cnblogs.com/guduoduo/p/3681296.html ---Ajax基础学习http://www.cnblogs.com/Garden-blog/archive/2011/03/11/1981778.html ---Ajax完整教程...
复制链接

扫一扫