Ajax基础

Ajax的概念是： 异步的JavaScript and XML；

主要是这四个方法

<script type="text/javascript">

       

        var xmlHttp;

        //创建XMLHTTPRequest对象

        function createXML(){

            //这里是为了适应不同的浏览器

            if(window.XMLHTTPRequest){

               //使用本地XMLHTTPRequest

               xmlHttp = new XMLHTTPRequest();

            }else if(window.ActiveXObject){

               //使用微软XMLHTTPRequest

               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

            }

        }  

 

        function validate(){

            createXML();

            //拿到表单中的文档框

            var un = document.getElementById("un");

            //请求的url地址

            var url = "validate.jsp?un="+un.value;

            //初始化XMLHTTPRequest对象,即调用open()

            //确定访问的方式是get还是post

            //确定访问的地址

            //true，表示异步发送

            xmlHttp.open("get",url,true);

           

            //当XMLHTTPRequest对象得状态发生改变时，调用callback

            // 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

            // 1 (初始化) 对象已建立，尚未调用send方法

            // 2 (发送数据) send方法已调用，但是当前的状态及http头未知

            // 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过

                   responseBody和responseText获取部分数据会出现错误，

            // 4 (完成) 数据接收完毕,此时可以通过responseXML和responseText获

             取完整的回应数据

            xmlHttp.onreadystatechange=callback;

            //XMLHTTPRequest对象正式发送请求

            xmlHttp.send(null);

        }

 

        function callback(){

       

           //为4的时候，证明已经收到了所有服务器端给的东西

           if(xmlHttp.readyState==4){

             //证明页面访问正确

             if(xmlHttp.status==200){

               

                var msg = document.getElementById("msg");        msg.innerHTML="<fontcolor='red'>"+xmlHttp.responseText+"</font>"

             }

           }

        }

        注意：xmlHttp.responseText可以拿到服务端的文本信息

    </script>

   

 

    //解析xml文件

        function parseXML(){

            //拿到xml文件所有的元素

        var xmlc = xmlHttp.responseXML.documentElement;

        //拿到城市的下拉列表

        var ct = document.getElementById("city");

        //拿到所有的city节点

        var cities = xmlc.getElementsByTagName("city"); 

        //一开始让城市的下拉列表的option为0

        ct.options.length=0;

        //遍历所有的city节点

        for(var i=0;i<cities.length;i++){ 

          //city节点下面id节点的值

          var id = cities[i].childNodes[0].childNodes[0].nodeValue;

          //city节点下面name节点的值

          var name = cities[i].childNodes[1].childNodes[0].nodeValue;

          //new一个Option

          var o = new Option(name,id);    

          //添加到下拉列表中

          ct.add(o);   }   }

注意：xmlHttp.responseXML可以拿到服务端的xml文件信息