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

    }

  }

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。