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);

        }

      }

  • 相关阅读:
    ionic localstorage
    angular 中文鏈接
    把jqmobi 變成jQuery 的插件 從此使用jQuery
    jqmobi 的一些設置
    ionic ngcordova map 地圖
    ionic pull to refresh 下拉更新頁面
    json 對象的序列化
    鍵盤彈出,頁面佈局被推上去了.....
    Cordova V3.0.0中config.xml配置文件的iOS Configuration
    android ios 只能輸入數字 不能輸入小數點的 函數 cordova
  • 原文地址:https://www.cnblogs.com/PLComputer/p/3532281.html
Copyright © 2011-2022 走看看