天天看点

Ajax技术 - (Asynchronous JavaScript + XML)

一、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(){
        //请求出错处理
    }
});