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.如何更新页面元素的值.
      
      这只是一个引子,也是给自己一个学习和思考的空间,后面会将自己学习过程中的点滴记录下来与大家分享,以期有大的收获.也是监督自己学习的好方法.