Ajax技术

一、XMLHttpRequest对象

　　它是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP）连接一个服务器。

　　初始化：var http_request = new ActiveXObject("Msxml2.XMLHTTP");或者var http_request = new ActiveXObject(Microsoft.XMLHTTP");

　　　　　　var http_request = new XMLHttpRequest();

　　1、XMLHTTPRequest对象的常用方法

　　　　① open( method , URL , asyncFlag )

　　　　　　method：get或者post

　　　　　　URL：请求地址，可以是绝对地址或者相对地址，并且可以查询字符串

　　　　　　asyncFlag：可选参数，用于指定请求参数，异步请求为true，同步请求为false，默认为true

　　　　② sen( content )

　　　　　　content：用于指定发送的数据，可以使DOM对象的实例、输入流或者字符串，也可以是什么都不填

　　　　③ setRequestHeader( label , value )

　　　　　　label：用于指定HTTP头

　　　　　　value：用于为指定的HTTP头设置值

　　　　④ abort()

　　　　　　用于停止当前异步请求

　　　　⑤ getRequestHeader( headerLabel )

　　　　　　headerLabel：用于指定HTTP头，包括server、Content-Type和Date等

　　　　⑥ getResponseHeaders()

　　　　　　　用于以字符串形式返回完整的HTTP头信息。

　　2、XMLHttpRequest对象的常用属性

属性	描述
onreadystatechange	每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。有以下5个取值： 0=未初始化 1=正在加载 2=已加载 3=交互中 4=完成
responseText	服务器的响应，表示为字符串
responseXML	服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
status	返回服务器的HTTP状态码，如： 200=“成功” 202=”请求被接受，但尚未成功“ 400=“错误的请求” 404=“文件未找到” 500=“内部服务器错误”
statusText	返回HTTP状态码对应的文本，如OK或者Not Found（未找到）等

二、传统Ajax工作流程

　　1、发送请求

　　　　①初始化XMLHttpRequest对象

if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
    xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
}

　　　　②为XMLHTTPRequest对象指定一个回调函数，用于对返回结果进行处理

xmlhttp.onreadystatechange = function(){getResult(param)};//调用回调函数

　　　　③创建个与服务器的连接

xmlhttp.open("GET",url,true)

xmlhttp.open("POST",url,true)

//url可以是一个JSP页面的URL地址，也可以是Servlet的映射地址

　　　　④向服务器发送请求

//向服务器发送GET请求
xmlhttp.send();

//向服务器发送POST请求
//无参数：
xmlhttp.send();
//有参数：
var param = "user="+form1.user.value+"&pwd="+form1.pwd.value;//组合参数
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//在发送POST请求前，需要设置正确的请求头
xmlhttp.send(param);

　　2、处理服务器响应

　　　　①处理字符串响应

function getResult(){
    if(xmlhttp.readyState==4&&xmlhttp.status==200){
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
}

　　　　②处理XML响应

function getResult(){
    if(xmlhttp.readyState==4&&xmlhttp.status==200){
        var xmlDoc = xmlhttp.responseXML;
        var message = "";
        for(i=0;i<xmlhttp.getElementsByTagName("board").length;i++){
            var board = xmlDoc.getElementsByTagName("board").item(i);
            message = message+board.getAttribute("name");
            document.getElementsById("msg").innerHTML=message;
        }
    }
}

 三、jQuery实现Ajax

　　1、$.get(url [,data] [,success(data,textStatus,jqXHR)] [,dataType])

　　　　url：请求页面的URL地址

　　　　data：可选参数，发送至服务器的key/value数据。（data参数会自动添加到url中，如果url中的某个参数又通过data参数进行传递，get()方法是不会自动合并相同名称的参数的。）

　　　　success(data,textStatus,jqXHR)：可选参数，用于指定载入成功后执行的回调函数。其中，data用于保存呢返回的数据；testStatus为状态码（可以是timeout、error、notmodified、success或parsererror）；jqXHR为XMLHTTPRequest对象。不过回调函数只有当testStatus的值为success时才会执行,如果需要在出错的时候也执行，那么就需要使用$.ajax()方法实现。

　　　　dataType：可选参数，用于指定返回数据的类型，可以是xml、json、script或者html。默认值为html

$.get("check.jsp",{user:$("#username").val()},function(data){alert(data);});

　　2、$.post(url [,data] [,success(data,textStatus,jqXHR)] [,dataType])

　　　　

　　　　url：请求页面的URL地址

　　　　data：可选参数，发送至服务器的key/value数据。（data参数会自动添加到url中，如果url中的某个参数又通过data参数进行传递，get()方法是不会自动合并相同名称的参数的。）

　　　　success(data,textStatus,jqXHR)：可选参数，用于指定载入成功后执行的回调函数。其中，data用于保存呢返回的数据；testStatus为状态码（可以是timeout、error、notmodified、success或parsererror）；jqXHR为XMLHTTPRequest对象。不过回调函数只有当testStatus的值为success时才会执行,如果需要在出错的时候也执行，那么就需要使用$.ajax()方法实现。

　　　　dataType：可选参数，用于指定返回数据的类型，可以是xml、json、script或者html。默认值为html

$.post("check.jsp",{title:"祝福",content:"祝愿天下有情人不成眷属"},function(data){alert(data);});

　　3、JSON数据

　　　　①对象（名称/值）：{"属性1":属性值1，"属性2":属性值2······"属性n":属性值n}

　　　　②数组（值得有序列表）：{"数组名":[对象1,对象2,对象3,······,对象n]}

　　4、$.ajax(url [,settings])

　　　　url：必选参数，用于发送请求的地址（默认为当前页）

　　　　settings：可选参数，用于进行Ajax请求设置，包含许多可选的设置参数，都是以key/value形式体现的。常用的设置参数如表所示

设置参数	说明
type	用于指定请求方式，可以设置为GET或者POST，默认值为GET
data	用于指定发送到服务器的数据，如果数据不是字符串，将自动转换为请求字符串格式。在发送GET请求时，该数据将附加在URL的后面。设置processData参数为false，可以禁止自动转换。 该设置参数的值必须为key/value格式。如果为数组，jQuery将自动为不同值对应同一个名称。
dataType	用于指定服务器返回数据的类型。如果不指定，jQuery将自动根据HTTP包的MIME信息返回responseText或responseXML,并作为回调函数参数传递，可用值如下： text：返回纯文本字符串 xml：返回xml文档，可用jQuery进行处理 html：返回纯文本HTML信息（包含的<script>元素会在插入DOM后执行） script：返回纯文本JavaScript代码。不会自动缓存结果，除非设置了cache参数。 json：返回JSON格式的数据 jsonp：JSONP格式。使用JSONP形式调用函数时，如果存在代码“url？callback=？”，那么jQuery将自动替换“？”为正确的函数名，以执行回调函数
async	设置发送请求的方式，默认是true，为异步请求方式，同步请求方式可以设置成false
beforeSend(jqXHR,Settings)	用于设置一个发送请求前可以修改XMLHttpRequest对象的函数，如添加自定义HTTP头等
complete(jqXHR,textStatus)	用于设置一个请求为完成后的回调函数，无论成功或失败，该函数均被调用
error(jqXHR,textStatus,errorThrown)	用于设置请求失败时调用的函数
success(data,textStatus,jqXHR)	用于设置请求成功时调用的函数
global	用于设置是否触发全局Ajax事件。设置为true时，触发全局Ajax事件；设置为false则不处罚全局Ajax事件。默认值为true
timeout	用于设置请求超时的时间（单位为毫秒）。此设置将覆盖全局设置
cache	用于设置是否从浏览器缓存中加载请求信息，设置为true将会从浏览器缓存中加载请求信息。默认值true，当dataType的值为script何jsonp时值为false
doFilter(data,type)	用于指定将Ajax返回的原始数据进行预处理的函数。提供了data和type两个参数：data是Ajax返回的原始数据，type是调用$.ajax()方法时提供的dataType参数。 函数返回的值将由jQuery进一步处理
contentType	用于设置发送信息数据值服务器内容编码类型，默认值为applciation/x-www-form-urlencoded，该默认值使用大多数应用场合
ifModified	用于设置是否仅在服务器数据改变时获取新数据。使用HTTP包的Last-Modified头信息判断，默认值为false

$.ajax({
    url:"chatServlet",  //设置请求地址
    type:"GET",            //设置请求方式
    dataType:"json",    //设置返回数据的类型
    data:{                //设置传递的数据
        "action":"get",
        "nocache":new Date().getTime(),
    },
    //设置请求成功时执行的回调函数
    success:function(data){
        var message = "";
        var chats = eval(data);
        $.each(chats.function(i){
            message +="<br/>"+chats[i].message;
        };
        $("#content").html(message);
    },
    //设置请求失败时执行的回调函数
    error:function(){
        alert("请求失败！");
    }
});