Ajax 简介[系列]

一、AJAX简介

        ajax即“asynchronous javascript and xml”---异步javascript和xml，是一种创建交互式网页应用的网页开发技术。

        ajax与传统方式比较（同步、异步比较）：

        传统同步方式：Brower提交请求——>wait 服务器处理——>处理完毕回传给客户端Brower，期间客户端brower不能干其他事情，（间断性的卡死情况）。同步某种意义上讲是一种单线性处理，发送方发出数据后，必须等待接收方响应以后，才发送下一个数据包的通信方式。

        异步方式：请求通过事件触发——>服务器处理（期间brower可以处理其他事情）——>处理完毕---->回传客户端。发送方发出数据后，不用等待接收方回发响应，接着发送下一个数据包的通信方式。

       Ajax：可以不用刷新整个页面便可以与服务器通信的一种解决办法。

二、AJAX工作原理

1. Ajax的核心对象是javascript对象XmlHttpRequest。
2. XMLHttpRequest对象

      对于XMLHttpRequest对象的创建实现方法不统一       

•       IE 把XMLHttpRequest对象实现为一个ActiveX对象
•       其他浏览器把XMLHttpRequest对象实现为一个本地Javascript对象。
•       而对于XMLHttpRequest对象在不同的浏览器上的实现时兼容的，所以可以用同样的XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

 

 

/**
 * @author Cooper
 */
function GetXMLHttpRequest (){
    
    var httprequest=null;//初始化XMLHttpRequest对象
    
    if (window.XMLHttpRequest) {
        
        httprequest=new XMLHttpRequest();// 在非IE浏览器中创建XMLHttpRequest对象
        
    }
    else if (window.ActiveXObject){
        
        httprequest=new ActiveXObject("Microsoft.XMLHTTP");//在IE中创建XMLHttpRequest对象
        
    }
    if (!httprequest) {
        
        alert("XMLHttpRequest对象创建失败！");
    };
    return httprequest;
      
}

3.XMLHttpRequest对象的方法

  

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	把 http 请求的所有响应首部作为键 / 值对返回
getResponseHeader("headerLabel")	返回指定首部的串值
open("method","url",async)	method ： 请求的类型； GET 或 POST url ： 文件在服务器上的位置 async ：true （ 异步）或 false （ 同步）
send(content)	向服务器发送请求
setRequestHeader("label", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用 open()

4.XMLHttpRequest对象的属性

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK"   404: 未找到页面
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

5.XMLHttpRequest对象的方法、属性详解

• Open（"method","url",async）

　　  Method:get/post。a、get是从服务器上获取数据，post是向服务器传送数据。                            

  b、 在客户端，Get方式在通过URL提交数据，数据在URL中可以看到；POST方式，数据放置在HTML HEADER内提交。

 

 c、 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

 

                   d、  GET方式提交的数据最多只能有1024字节，而POST则没有此限制。

 

 e、   安全性问题。正如在b中提到，使用 Get 的时候，参数会显示在地址栏上，而 Post 不会。所以，如果这些数据是中文数据而且是非敏感数据，那么使用 get；如果用户输入的数据不是中文字符而且包含敏感数据，那么还是使用 post为好。

 

"发送请求 : 如果是get 请求send( 参数) 参数：必须是null 或者xhr.send();get 请求就不必要设置 xhr.setRequestHeader(header,value)

 

备注：如果xhr.send( 参数); 参数不为空情况下, 会自动转换成post 请求方式 您可以通过request.getMethod(); 方法获取请求的方式

 

发送请求 : 如果是post 请求send( 参数) 参数：参数可以是null 或者xhr.send()|send( 带有参数的)post 请求在传递值的情况下必须       设置xhr.setRequestHeader(header,value)"[参考]

• status

常用状态码及其含义：

404 没找到页面 (not found)

403 禁止访问 (forbidden)

500 内部服务器出错 (internal service error)

200 一切正常 (ok)

304 没有被修改 (not modified)( 服务器返回 304 状态 ， 表示源文件没有被修改 )

6.完整的一个实例  移步http://www.cnblogs.com/yankliu-vip/archive/2012/05/30/2526211.html

 

 

本文版权归本人和博客园共同所用，转载请注明出处。