zoukankan      html  css  js  c++  java
  • Ajax初探

          学习js已经有一段时间了(当然是指全面学习,以前只是在用到一些特效时才会想起的东东,不过时下正是Ajax当道,所以也借此春风认真研究一下客户端编程技术).
         前几天从一个BLOG上搞到一个AJax的例子程序,其实就是演示XmlHttp对象如何工作与服务器端交互的实例.例子虽小但其实际意义不小,可以从其代码中看到真正的Ajax程序是如何工作的.费话不多说先来看看代码.
         程序由一个静态页面和一个aspx的动态页面组成,
         静态页面中的主要元素是一个文本输入框和一个SPAN块区,下面是javascript代码:

     1     <script language="javascript">
     2        var xmlHttp
     3        function showHint(str) 
     4        {
     5            if (str.length > 0)
     6            {
     7                var url="GetRequest.aspx?name=" + str
     8                if (window.ActiveXObject) 
                          

     9                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    10                }

    11                xmlHttp=GetXmlHttpObject(stateChanged)
    12                xmlHttp.open("POST", url , true)
    13                xmlHttp.send(null)
    14            }

    15            else
    16            {
    17                document.getElementById("txtHint").innerHTML=""
    18            }

    19        }

    20        function stateChanged()
    21     {
    22            if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    23            {
    24                document.getElementById("txtHint").innerHTML=xmlHttp.responseText
    25            }

    26        }

    27        function GetXmlHttpObject(handler)
    28      {
    29            var objXmlHttp=null
    30            if (navigator.userAgent.indexOf("Opera")>=0)
    31            {
    32                alert("This example doesnt work in Opera")
    33                return;
    34            }

    35            if (navigator.userAgent.indexOf("MSIE")>=0)
    36           {
    37                var strName="Msxml2.XMLHTTP"
    38                if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
    39                {
    40                    strName="Microsoft.XMLHTTP"
    41                }

    42                try
    43               {
    44                    objXmlHttp=new ActiveXObject(strName)
    45                    objXmlHttp.onreadystatechange=handler
    46                    return objXmlHttp
    47                }

    48                catch(e)
    49               {
    50                    alert("Error. Scripting for ActiveX might be disabled")
    51                    return
    52                }

    53            }

    54            if (navigator.userAgent.indexOf("Mozilla")>=0)
    55          {
    56                objXmlHttp=new XMLHttpRequest()
    57                objXmlHttp.onload=handler
    58                objXmlHttp.onerror=handler
    59                return objXmlHttp
    60            }

    61        }

    62        </script>

    其中文本框的代码为:<input type="text" id="txt1" onkeyup="showHint(this.value)">也许你已经看到了,其实和服务器编程模型没有什么分别,因为无论是服务器端还是客户端都是以事件为驱动的,所以没有什么分别.唯一不同的可能是其元素操作过程中的语法和属性吧(个人看法),
          JS脚本主要作用是创建一个XMLhttp对象,并在向服务端发送XMLHttp请求时传递了一个参数值,也就是用户输入的字符串,这个功能主要是在函数ShowHing(str)实现的,而函数GetXmlHttpObject封装了由于浏览器原因而形成的XMLhttp对象实例化的差异并给出了事件处理函数——StateChanged,这点有点工厂模型的意思,最终返回一个可以运行在不同浏览器上的XMLhttp对象;函数StateChanged的作用是在XmlHttp对象的状态发生变化后,从服务器端获取值改写客户端结点的值(document.getElementById("txtHint").innerHTML=xmlHttp.responseText),很简单吧.
          最后再说说服务器端代码,很简单就一句

     if (Request.QueryString["name"!= "")
                Response.Write(Request.QueryString [
    "name"].Length);
            
    else
                Response.Write(
    "NULL");

         首先从xmlHttp对象请求中传过来的参数["name"],然后返回该字符串的长度.
         这就是一个简单的ajax程序,程序虽小,但收获不小,我们总结一下应该从这段代码中学到东东:
         1.知道一个ajax程序是如何工作的,程序的执行过程.
         2.如何去创建和维护一个xmlHttp对象
         3.如何才能使客户端与服务器进行协作.
         4.如何更新页面元素的值.
          
          这只是一个引子,也是给自己一个学习和思考的空间,后面会将自己学习过程中的点滴记录下来与大家分享,以期有大的收获.也是监督自己学习的好方法.

  • 相关阅读:
    Max History CodeForces
    Buy a Ticket CodeForces
    AC日记——字符串的展开 openjudge 1.7 35
    AC日记——回文子串 openjudge 1.7 34
    AC日记——判断字符串是否为回文 openjudge 1.7 33
    AC日记——行程长度编码 openjudge 1.7 32
    AC日记——字符串P型编码 openjudge 1.7 31
    AC日记——字符环 openjudge 1.7 30
    AC日记——ISBN号码 openjudge 1.7 29
    AC日记——单词倒排 1.7 28
  • 原文地址:https://www.cnblogs.com/EasonWu/p/1147471.html
Copyright © 2011-2022 走看看