ajax入门指南（一）

 

1．AJAX兼容IE和Firefox两大浏览器，出现了AJAX开发框架．
     2．AJAX开发关键技术：XMLHttpRequest对象，JavaScript编程技术，DOM（文档对象模型），CSS（层叠样式表），和XSLT（可扩展样式表转换）
           XMLHttpRequest对象是实现Ajax应用的核心；
           JavaScript是Ajax应用在客户端使用的脚本语言；
           通过JavaScript和DOM的配合才能实现页面的动态更新；
           CSS主要用于控制页面元素的显示样式；
           XSLT可以将XML文档转换为任何形式的文档，在Ajax应用中使用XSLT可以实现数据和页面显示的完全分离；
     3．XMLHttpRequest对象：
　　　3.1 发送请求
                  使用XMLHttpRequest对象向服务器端发送请求的基本流程可以分为５步：
                  3.1.1   从Web表单中获取需要的数据；
                  3.1.2   建立要连接的URL；
                  3.1.3   打开到服务器的连接；
                  3.1.4   设置服务器在完成后要运行的函数；
                  3.1.5   发送请求；
                  function callServer(){
                        //表单中获取必要的数据
                        var city = document.getElementById("city").value;
                        var state = document.getElementById("state").value;
                        //只有在数据不为空时才发出请求
                        if((city == null) (city == "")) return;
                        if((state == null) (state == "")) return;
                        //请求的URL
                        var url = "getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
                        //联系服务器，打开连接
                        xmlHttp.open("GET",url,true);//"true"代表该请求是异步的
                        //设置请求完成时的响应函数,注意这里是请求完成时，并不是响应完成时
                        xmlHttp.onreadystatechange = updatePage;
                        //发送请求,因为已经在请求URL中添加了要发送给服务器的数据(city和state)，所以请求中 无需再发送其他数据.
                        xmlHttp.send(null);
                    }

             3.2 ．处理HTTP响应
                        200：一切正常  
                        401：未经授权
                        403：禁止
                        404：没找到
                        function updatePage(){
                            //readState == 4，表示请求成功完成
                            if(xmlHttp.readyState == 4){
                                if(xmlHttp.status == 200){
                                    var response = xmlHttp.responseText;//HTTP请求返回的文本内容
                                    document.getElementById("zipCode").value = response;
                                }else if(request.status == 404){
                                        //HTTP状态码为404，无法找到资源
                                        alert("404 Not Found");
                                }else if(request.status == 403){
                                        //HTTP状态码为403，资源不可用
                                        alert("403 Forbidden");
                                }else if(request.status == 401){
                                        //HTTP状态码为401，未经授权
                                        alert("401 Unauthorized");
                                }
                            }
                        }

              3.3．HTTP就绪状态
                       共有５种就绪状态：
                        0：请求未初始化（还没有调用XMLHttpRequest对象的open方法）

                        1：请求已经建立，但是还没有发送（还没有调用send方法）
                        2：请求已发送，正在处理中
                        3：请求在处理中。通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成
                        4：响应已完成，可以获取并且使用服务器的响应了