Ajax基础

一、Ajax概念
Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术，是一串 技术的集合，主要有：

1. JavaScript，通过用户或其他与浏览器相关事件捕获交互行为
2. XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求
3. 服务器上的文件，以 XML、HTML 或 JSON 格式保存文本数据

由于 Ajax 包含众多特性，优势与不足也非常明显。优势主要以下几点：

优点	缺点
1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）	1.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）
2.用户体验极佳（不刷新页面即可获取可更新的数据）	2.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）
3.提升 Web 程序的性能（在传递数据方面做到按需发送，不必整体提交）
4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）

二、Ajax实现步骤
1.创建Ajax对象

//var xhr=new XMLHttpRequest();//现代浏览器
//var xhr=new ActiveXObject("Microsoft.XMLHTTP");//ie6
//兼容写法
var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");

2.确定资源（php,html,txt,json,js等）url，请求方式 get/post。

//get,参数有长度限制,明文传输
//get请求不带参数
 xhr.open("get", "demo.php");
 //get请求带参数
 xhr.open("get", "demo.php?a=1&b=2");

 //post,参数无长度限制放在请求体里，更安全
 xhr.open("post", "demo.php");

3.发送请求

//发送请求
xhr.send();

//post带参数,发送请求
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("a=1&b=2");

4.接收响应数据

//接收响应数据 需要借助一个事件  onreadystatechange
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    var data=xhr.responseText;
                    console.log(data);
                }
            }
        }

xhr.readyState
0	（未初始化）还没有调用send()方法
1	（载入）已调用send()方法，正在发送请求
2	（载入完成）send()方法执行完成，已经接收到全部响应内容
3	（交互）正在解析响应内容
4	（完成）响应内容解析完成，可以在客户端调用了

HTTP状态码xhr.status
101	客户要求服务器根据请求转换HTTP协议版本
200	交易成功
304	客户端已经执行了GET，但文件未变化
306	前一版本HTTP中使用的代码，现行版本中不再使用
400	错误请求，如语法错误
403	请求不允许
404	没有发现文件、查询或URl
405	用户在Request-Line字段定义的方法不允许
500	服务器产生内部错误
503	服务器过载或暂停维修
505	服务器不支持或拒绝支请求头中指定的HTTP版本

三、Ajax的封装

function ajax(url, fn) {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.open("get", url);
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var data = xhr.responseText;
                fn(data);
            }
        }
    }

}