zoukankan      html  css  js  c++  java
  • ajax ---异步javascript&&xml

      编写应用程序时有两种不同的选择,桌面应用程序和web应用程序。桌面应用程序完全安装在本地计算机上,并在本地运行这些代码,运行速度一般很快。web应用程序运行在某处的web服务器上,要通过浏览器访问。长时间的网络连接等待,等待服务器响应,等待屏幕刷新,等待请求返回和刷新新的页面。

      AJAX中的使用的一个对象XMLHttpRequest对象。

      在一般的web应用程序中,用户填写表单并单击submit按钮,整个表带将发送到服务器,服务器在转发给处理表单的脚本(通常是php或java,也可能是CGI进程或者类似的语言),脚本执行完成后在发送回全新的页面。在服务器的脚本或程序处理和返回新的表单时,用户必须等待,这是屏幕往往没有变化,等到服务器返回数据后在重新绘画屏幕。给用户的感觉就是交换性差,用户得不到立即反馈,通过ajax技术就能改变这种状况。

      AJAX是把javascript技术和xmlhttprequest对象放在web表单和服务器之间,当用户填写表单时,数据发送给一些javascipt代码而不是直接发送给服务器。javascipt代码捕获表单数据并向服务器发送请求,同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说,javascript代码在后台发送请求,用户甚至不知道请求的发出,并且请求时异步发送的,就是说javascript代码和用户不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。然后服务器将数据返回给javascript代码(仍然在web表单中),后者决定如何处理这些数据,它可以迅速跟新表单数据,让用户感觉应用程序时立即完成的,及表单没有提交和刷新,但用户就得到了新数据。javascript代码甚至可以对收到的数据进行某种计算,在发送另一个请求,完全不需要用户操作。这就是ajax技术中的xmlhttprequest的强大之处,它可以根据需要自行与服务器交互,其结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验。

    //支持多种浏览器的方式创建XMLHTTPRequest对象

     /*声明一个XMLHttpRequest 对象*/
    var  xmlHttp =false;
    try{
        xmlHttp= new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e){
            try{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e2){
                    xmlHttp= false;
            }
    }
    if(!xmlHttp&&typeof XMLHttpRequest!='undefined'){
                xmlHttp= new XMLHttpRequest();
    }
    /*
    建立一个变量xmlHttp来引用创建的xmlhttprequest对象
    尝试在ie中创建该对象,有两种方法
    xmlHttp引用一个有效的xmlhttprequest对象
    */

    function  getCustomerInfo(){

        var phone = document.getElementById("phone").value;

        var url ="";

        request.open("get",url,true);//请求连接;

        request.onreadystatechange=updatePage;//服务器响应请求并触发onreadystatechange属性制定回调函数;

        request.send(null);//发送请求;

    }

    处理服务器响应:ajax中回调的应用

    function updatePage(){

        if(request.readyState==4){//检查就绪状态:服务器响应已经完成,可以安全的使用数据了。

            alert("server is done!");

    }

    }

    HTTP响应状态码归5类:

    100-199:表示成功接收请求,要求客户端继续提交下一次请求才能完成整个处理过程

    200-299:表示成功接收请求并已经完成整个处理过程。

    300-399:外完成请求,客户需进一步细化请求。

    400-499:客户端请求有错误。

    一些常见的状态码:

    200(正常):表示一切正常,返回的是正常的请求结果。

    304(未修改):表示客户机缓存的版本是最新的,客户机应该继续使用它。

    401(未授权):表示客户机访问的是一个受口令和密码保护的页面。

    404(找不到):服务器上不存在客户机请求的资源。

    500(内部服务器错误):服务器端的CGI    ASO    JSP等程序发生错误。

    检查http中的状态码:

      function updatePage(){

        if(request.readyType==4){

          if(request.status==200){

            alert("server is done!");

    }else if(request.status==404){//增加错误检查

        alert("request  url does not exist!");

    }else{alert("error:status code is "+request.status);

    }

    }

    }

    读取响应文本,处理服务器返回的数据,返回的数据保存在XMLHttpRequest对象的responseText属性中。

    function updatePage(){

        if(request.readyType==4){

            if(request.status==200){

              var response= request.responseText.spilt("|");//首先得到responseText并使用javaScrip spilt()方法从管道符分开,得到的数组放到response中

              document.getElementById("order").value=response[0];//

              document.getElementById("address").innerHTML=response[1];//

          }else

    alert("status is"+request.status);

        }

      }

  • 相关阅读:
    Eclipse 常用快捷键和使用技巧
    Android Studio 常用快捷键和使用技巧
    Android之省市区三级联动
    Android assets文件夹之位置放置和作用
    Android之SwipeRefreshLayout下拉刷新组件
    Android设计模式之工厂模式
    Android之侧滑菜单DrawerLayout的使用
    Docker技术入门与实战 第二版-学习笔记-8-网络功能network-3-容器访问控制和自定义网桥
    Docker技术入门与实战 第二版-学习笔记-8-网络功能network-2-相应配置
    Docker技术入门与实战 第二版-学习笔记-10-Docker Machine 项目-1-cli
  • 原文地址:https://www.cnblogs.com/PLComputer/p/3532281.html
Copyright © 2011-2022 走看看