当前位置:编程学习 > JAVA >>

javascript 进阶篇3 Ajax 、JSON、 Prototype

Ajax
这个词听了不少,但是其实并没有真的接触过,于是在这里稍微了解一下。
Ajax技术的创新之处在于,改善了传统的“请求-等待-响应-刷新-返回数据”模式,在信息返回之前,用户可以继续自己的操作,当前页面不会因为请求而刷新。这样大大的提高了交互性。
Ajax其实并不是一个技术,而是由许多技术组成的。最大的特色之一就是可以异步传输,实现多线程服务。
Ajax的异步传输,依靠的是js中的XMLHttpRequst对象,于是我们从它入手。
XMLHttpRequest是XMLHttp组建的一个抽象对象,用于数据交互。在IE中,XMLHttpRequest作为一个ActiveX控件,在FF Opera中作为一个js的内置对象。
创建XMLHttpRequest对象的封装代码:
<script type="text/javascript">       
              var xmlHttp=false;
              var headType="";
              function createXmlRequest(){
                if(window.ActiveObject){     //  IE
                    try{
                     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                     }catch(e){
                         try{
                             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                         }catch(e){
                             window.alert("create XML Request failed "+e);
                         }
                     }
                }else if(window.XMLHttpRequest){   //  FF
                   xmlHttp=new XMLHttpRequest();
                }
                if(!xmlHttp){
                   window.alert("create XML Request failed");
                }
              }
      </script>

ReadyState属性:
0=未初始化   1=初始化  2=发送数据  3=数据传送中  4=完成
responseText 属性:
1、2=responseText是个空字符串   3=正在接收   4=接收完成
responseXML属性:
执行过send()后,如果返回正确的xml格式数据,可以使用XMLHttpRequest接收返回的数据。responseXML可以把返回信息格式化为XML Document对象,类型为text/xml  如果不包含则返回null。
status属性:
属性send()后,可以属性status接收读取事物状态,只有ReadyState为3、4时可以使用这个属性,否则读取status时将会发生错误。常见的有以下几个:
100=客户必须继续发出请求  200=交易成功  400=错误请求  403=请求不允许  404=没有发现文件,查询或URL  500=服务器内部错误  502=服务器暂不可用  505=服务器不支持或拒绝请求头中指定的HTTP版本。
statusText属性:
send()方法后,通过statusText读取事务状态,statusText返回当前HTTP请求的状态行,只有当readyState为3 4时才可以使用这个属性,否则发生错误。
onreadystatechange事件:
这个事件属性值发生变化时所要执行的操作。
abort()方法:
停止一个XMLHttpRequest对象对HTTP的请求,把该对象恢复到初始状态。
open()方法:
创建一个新的HTTP请求,并指定方法,URL及验证信息等,语法是: xmlHttp.open(method,url,mode,user,psd);
method表示请求方法,有post, get, put等,忽略大小写。url是目的地址,mode是不二类型参数,指定请求是否为异步方式,默认为true。
调用open()方法后,readyState属性设置为1.
send()办法:
xmlHttp.send(content);content是要发送的内容,没有可以忽略。
setRequestHeader()方法:
setRequestHeader(header, value)设定单个HTTP头信息,当readyState为1时,可以在open()后调用此方法,否则将返回一个异常,如果已存在则原来的将覆盖。value用样是一个字符串型数据,表示头名称的值。
getResponseHeader()方法:
通过读取首部信息,可以读取到content-type(内容类型), content-length(内容长度), last-modify(最后一次修改)日期等,根据具体网站不同。
getAllResponseHeaders()方法:
获得全部的首部信息。
 
接下来举个例子,就是获取头信息的:
  View Code
<html>
     <head>
         <title>Ajax test</title>   
          <script type="text/javascript">       
              var xmlHttp=false;
              var headType="";
              function createXmlRequest(){
                if(window.ActiveObject){     //  IE
try{
                     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                     }catch(e){
                         try{
                             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                         }catch(e){
                             window.alert("create XML Request failed "+e);
                         }
                     }
             &nbs

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,