ajax基础

一、什么是Ajax

AJAX即“Asynchronous Javascript And XML”（异步 JavaScript和XML），
AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
它是一套综合了多项技术的浏览器端网页开发技术。
这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

二、Ajax原理

运用HTML和css来实现页面,表达信息

通过浏览器的XmlHttpRequest(Ajax引擎)对象

来向服务器(发送异步请求)并(接收服务器)的响应数据，

然后用javascript来操作DOM，实现动态局部刷新。

三、Ajax实现过程

通常是

第一步:Javascript监听浏览器网页事件(点击,提交,更改等)

第二步:由javascript创建Ajax引擎对象

第三步:通过Ajax引擎对象发出请求

第四步:Ajax引擎等待并且接受服务器的响应内容

第五步:javascript再从 *Ajax引擎对象* 中获取响应内容,
      并且通过dom改变网页界面显示效果

1.创建Ajax引擎对象

就是XMLHtttpRequest对象,所有现代浏览器均支持XMLHttpRequest对象

(IE5 和 IE6 使用 ActiveXObject)它同时也是一个Javascript对象.
Ajax引擎(XMLHttpRequest)

兼容处理

var xhr = null;
if (window.XMLHttpRequest) {
    //所有现代浏览器(IE7+.Firefox.Chrome.Safari以及opera)
    xhr = new XMLHttpRequest;
}else{
    //老版本的Internet Explorer使用ActiveX对象
    xhr = new ActiveXObject("Microsoft.XMLHttp");
}

2.配置请求对象的信息

xhr.open('GET/POST','url地址',['是否异步']);

注意：如果使用post请求,就一定要设置请求头

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;     charset=gb2312");

3.发送请求

xhr.send([post请求参数字符串]);
发送请求分为两种情况:
1.监控用户的事件(onclick,onchange等),通过ajax发送请求
2.监控浏览器的事件(onload),通过ajax发送请求.

4.监听Ajax引擎对象的改变(是否正确做出了响应)

xmlHttpRequest.onreadystatechange = function(){
    if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) {
            //xmlHttpRequest.responseText
            //xmlHttpRequest.responseText
    }
}

4.1 - 详解onreadystatechange

onreadystatechange属性是一个方法,
监控到响应内容的返回,
根据响应内容使用javascript改变当前页面的部分html代码,从而达到不刷新改变局部html代码.
当Ajax引擎的状态发生改变时都会执行onreadystatechange属性对应的方法

>>其他方法：
    abort:取消当前请求

    getAllResponseHeaders:获取响应的所有http头

    getResponseHeader:从响应信息中获取指定的http头

    open(方式get/post，url地址，同步异步):
    创建一个新的http请求，打开请求，并指定此请求的方法、URL以及验证信息(用户名/密码)

    send():发送请求到http服务器并接收回应

    setRequestHeader:单独指定请求的某个http头，header()设置http头协议信息

>>其他属性：
    onreadystatechange:指定当readyState属性改变时的事件处理句柄。

    readyState:返回当前请求的状态，ajax行进过程中不同状态

    responseBody:将回应信息正文以unsigned byte数组形式返回.

    responseStream:以Ado Stream对象的形式返回响应信息。

    responseText:将响应信息作为字符串返回.只读

    responseXML:将响应信息格式化为Xml Document对象并返回，只读

    status:返回当前请求的http状态码. 200 ok 304 缓存；
             404 not found; 403 没有权限 501 服务器级别错误
    statusText:返回当前请求的响应行状态文本， ok not found forbidden

4.2 - 详解Ajax引擎的状态属性 readyState(0 1 2 3 4)

*0.请求未初始化
*1.服务器连接已建立
*2.请求已接收
*3.请求处理中
*4.请求已完成,并且响应已就绪

当Ajax引擎的状态属性为readyState为4时,说明服务器的响应已经发送给Ajax请求了.

但是响应的状态吗为200时:说明响应的内容是正确的,这时才会根据相应内容对当前页面的html处理

总结：

基本示例：
var xhr = new XMLHttpRequest;
xhr.open('GET/POST','url地址',['是否异步']);
xhr.send([post请求参数字符串]);
xhr.onreadystatechange = function(){
    if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) {
            //做一些事情
            //xhr.responseText
    }
}