ajax基础详解

同步请求与异步请求

同步：发送方发送数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

Ajax优缺点

优点：

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。
这使得Web应用程序更为迅捷地响应用户动作，并避免了在网络上发送那些没有改变的html代码信息。
1.减轻服务器负担，按需要获得数据。
2.无刷新更新页面，减少用户的实际和心理的等待时间。
3.更好的用户体验。
4.减轻宽带的负担。
5.主流浏览器支持。

缺点：

1.AJAX的程序必须测试针对各个浏览器的兼容性。
2.AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；需提醒用户
3.对搜索引擎支持不好。

一、什么是Ajax

ajax即“Asynchronous Javascript And XML”（异步ajaxscript与XML）
ajax是一套综合了多项技术的浏览器端网页开发技术。
这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

二、Ajax实现过程

• （1）创建Ajax引擎对象

    function createXHR(){
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{ 
            //兼容IE5, IE6
            xhr = new ActiveXObject();
        }
        return xhr;
    }

• （2）配置请求对象的信息

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

//注意：如果是post请求，记得设置请求头

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

• （3）发送请求

    xhr.send([post请求参数字符串]);

• （4）监听Ajax引擎的改变（是否做出了响应）

    xhr.onreadystatechange = function(){
        if( xhr.readyState == 4 && xhr.status == 200 ){
            //xhr.responseText
            //code...
        }
    }

Ajax的状态属性 readyState(0 1 2 3 4)

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

HTTP状态码

• 100 信息类，表示web浏览器请求，正在进一步处理
• 200 成功，表示用户请求被正确接收正在进一步的处理中 200 OK
• 300 表示请求没有成功,客户端必须采取进一步的动作
• 400 客户端错误,表示客户端提交的请求有错误 例如：404 NOT Found,意味着请求中所引用的文档不存在
• 500 服务器错误 表示服务器不能完成对请求的处理，如500

方法：

• 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