小秋的家

home

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  1 Posts :: 91 Stories :: 17 Comments :: 0 Trackbacks

     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对象向服务器端发送请求的基本流程可以分为5步:
                  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就绪状态
                       共有5种就绪状态:
                        0:请求未初始化(还没有调用XMLHttpRequest对象的open方法)
                        1:请求已经建立,但是还没有发送(还没有调用send方法)
                        2:请求已发送,正在处理中
                        3:请求在处理中。通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成 
                        4:响应已完成,可以获取并且使用服务器的响应了                        

posted on 2008-08-27 13:21 棋剑小秋 阅读(204) 评论(0)  编辑  收藏 所属分类: AJAX

只有注册用户登录后才能发表评论。


网站导航: