Ajax入门小例子

大牛文章: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 对象的时候,有一个判断.

  var xmlhttp;

             if (window.XMLHttpRequest) {

                 xmlhttp = new XMLHttpRequest();                        //创建XMLHttpRequest对象

             } else {

                 xmlhttp = ActiveXObject('Microsoft.XMLHTTP');          //支持IE5,IE6

             }

写了一个基础的小例子，附有注释：

前台&js部分(Ajax):

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title></title>

     <script type="text/javascript">

         function show(str) {

             var xmlhttp;

             if (window.XMLHttpRequest) {

                 xmlhttp = new XMLHttpRequest();                        //创建XMLHttpRequest对象

             } else {

                 xmlhttp = ActiveXObject('Microsoft.XMLHTTP');          //支持IE5,IE6

             }

             if (str.length == 0) {

                 document.getElementById("lbl1").innerHTML = '';

                 return;

             }

             xmlhttp.onreadystatechange = function () {

                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //状态值在上述文章中有详细介绍

                     var res = xmlhttp.responseText;

                     document.getElementById("lbl1").innerHTML = res;

                 }

             }

             xmlhttp.open("post", "WebForm2.aspx", true);               //open方法

             xmlhttp.send();                                            //send方法

         }

     </script>

 </head>

 <body>

     <form id="form1" runat="server">

     <div>

       姓名:<input type="text" id="name1"  onkeydown="show(this.value)"/><br/><br/>

       <label id="lbl1"></label>

     </div>

     </form>

 </body>

 </html>

后台服务器端:

 protected void Page_Load(object sender, EventArgs e)

         {

             string name=Request.QueryString["name"].ToString();

             if (name.Contains("h"))

             {

                 Response.Write("hhhhh");

             }

             else if(name.Contains("a"))

             {

                 Response.Write("aaaaaa");

             }

             else if (name.Contains("b"))

             {

                 Response.Write("bbbbbbb");

             }

             else if (name.Contains("c"))

             {

                 Response.Write("cccccccc");

             }

             else if (name.Contains("d"))

             {

                 Response.Write("dddddd");

             }

             else

             {

                 Response.Write("false");

             }

         }

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

效果图:

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

巴特西

Ajax入门小例子

最新文章

热门文章