Ajax技术

一、Ajax

Ajax = 异步JavaScript和XML，Ajax是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。可以再网页不重新加载的情况下，对网页的某部分进行更新。

传统网页（不使用Ajax）如果需要更新内容，必须重新加载整个网页。

注意：Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 web 应用程序技术。

二、Ajax所包含的技术

① 使用CSS和XHTML来表示

② 使用DOM模型来交互和动态显示

③ 使用XMLHttpRequest来和服务器进行异步通信

④ 使用JavaScript来绑定和调用

AJAX核心是XMLHTTPRequest对象，不同的浏览器创建XMLHTTPRequest对象方法是有差异的。

IE使用ActiveXObject，而其它的浏览器使用XMLHTTPRequest的JavaScript内建对象；

三、XMLHTTPRequest对象属性

1）onreadystatechange：状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数

2）readySteat：请求的状态(0-1-2-3-4)

0 - （未初始化）还没有调用send()方法

1 - （载入）已调用send()方法，正在发送请求

2 - （载入完成）send()方法执行完成，已接收到全部响应内容

3 - （交互）正在解析响应内容

4 - （完成）响应内容解析完成，可以在客户端调用

3）responseText：服务器的响应，返回数据的文本（内容）

4）responseXML：服务器的响应，返回数据的兼容DOM的XML文档对象，这个对象可以解析为一个DOM对象

5）responseBody：服务器返回的主题（非文本格式）

6）responseStream：服务器返回的数据流

7）status：服务器的HTTP状态码（如：404="文件未找到"、200="成功"，等等）

8）statusText：服务器返回的状态文本信息，HTTP状态码的相应文本（OK或Not Found(未找到) 等等）

四、XMLHttpRequset对象方法

1）abort()：停止当前请求

2）getAllResponseHeaders()：把HTTP请求的所有响应首部作为键/值对返回

3）getResponseHeaders("header")：返回指定首部的串值

4）open(method,url,asyncFlag)：初始化一个请求，建立对服务器的调用；xmlHttp.open("GET","test.jsp",true)

参数 method：设置请求类型(GET或POST)。

参数 url：文件在服务器上的位置。

参数 asyncFlag：是否异步处理请求。

5）send(content)：向服务器发送请求

6）setRequestHeaders("header","value")：把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送('post')方法一定要

五、Ajax使用步骤

① 创建XMLHttpRequest对象

② 设置请求方式

③ 调用回调函数

④ 发送请求

六、XMLHttpRequest写法

//创建XMLHttpRequest对象
var xmlHttp ;
if(window.XMLHttpRequest){ //非IE
    xmlHttp = = new XMLHttpRequest();
}else if(window.ActiveXObject){ //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//设置请求方式
xmlHttpxhr.open('POST', '/hello.json', true)
//发送. psot数据要放在send里面
xmlHttp.send('username=luoshushu&passwore=123') 
xmlHttp.addEventListener('load', function () {
    if((xmlHttp.status >= 200 && xmlHttp.status < 300) || xmlHttp.status === 304){
        var data = xmlHttp.responseText
        console.log(data)
    }else{
        console.log('出错了')
    }
})

七、ajax标准写法

$.ajax({
    url:"http://www.microsoft.com",    //请求的url地址
    dataType:"json",   //返回格式为json
    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
    data:{"id":"value"},    //参数值
    type:"POST",   //请求方式
    beforeSend:function(){
        //请求前的处理
    },
    success:function(req){
        //请求成功时处理
    },
    complete:function(){
        //请求完成的处理
    },
    error:function(){
        //请求出错处理
    }
});