javascript中的AJAX和如何封装AJAX

一. 什么是AJAX

ajax：异步的javascript和XML。

异步和同步的区别：同步需要等待返回结果才能继续（需要刷新页面），异步不需要等待（即页面不刷新就能获取实时数据）。

二. AJAX中的对象

XMLHTTPRequest对象用于在后台于服务器交换数据
例：var xhr = new XMLHTTPRequest();

如果要兼容IE6，可以做如下处理:

if(XMLHTTPRequest){
    return xhr = new XMLHTTPRequest();
}else{
    return xhr = ActiveXObject('microsoft.XMLHttp');
}

三. XMLHTTPRequest对象的方法；

首先定义一个实例：

var xhr = XMLHTTPRequest();

1.xhr.open();

① method：这个参数表示数据的传输方式，有get和post两种方式；
get方式传输数据是通过地址栏，以明文的形式传输，安全性低；
post方式传输方式是通过send（）方法传输数据，安全性高。

② url：这个参数是需要请求数据的PHP文件的路径，可以是相对路径，也可以是绝对路径。

③ true/false：这个参数表示异步或者 同步加载数据，一般默认是异步（即true）。

1. send（）：在get方式传输数据的时候参数为null；post方式下，参数为需要请求的数据。

四. xhr.onreadystatechange

onreadystatechange是存储函数（或函数名），没当readystate改变时就会调用该函数。

xhr.onreadystatechange = function(){
    if(readyState == 4){
        if(status == 200){
            alert(xhr.responseText/xhr.responseXML);
        }
    }
}

1.上面代码中的readystate是存有XMLHTTPRequest的状态码，从0-4变化：

当 readyState == 0：表示请求未初始化；
当 readyState == 1：表示服务器建立以连接；
当 readyState == 2：表示请求已被服务器接收；
当 readyState == 3：表示服务器正在处理请求中；
当 readyState == 4：表示请求处理已完成，且已经响应请求。
只有当值为4的时候才是正确的。

2.status表示的是服务器返回的状态码：
正确情况下回返回200（即‘OK‘）。
只有readystate==4&&status==200的时候，服务器才算是正确的响应，并且有数据返回。

五. AJAX的工作原理

① 创建ajax引擎，不同浏览器不同引擎；
② 发送HTTP请求；
③ HTTP响应（后台操作）；
④ DOM操作（解析服务器返回的数据，并变现在页面上）。

六. AJAX跨域请求方式

为什么要跨域？因为浏览器有同源策略，不同域名下的数据不跨域拿不到。

一个域名的组成由协议（http、https等），子域名（www…），主域名，端口号，请求资源地址组成，其中任何一项不同都不能获取资源。

那么如何跨域请求数据呢？
1. 代理：由后台写好接口文件，再由前端把接口处理好，如同瀑布流的数据请求。
2. Jsonp：该方法可以解决各种主流浏览器的跨域请求问题。首先在页面中动态创建一个script节点，该节点的src为跨域请求的（文件）路径，在需要请求数据的时候再创建节点拿数据；拿到数据之后对数据进行处理并展现在页面上；拿到的数据有可能是string，xml，json格式，不同的数据处理方式不同，时下流行的是json格式的数据。
3. HTML5中提供了XHR2方法实现跨域，但是兼容性不好，需要IE10+才能使用，所以只做了解。

七. AJAX的优点

1.页面无刷新的动态数据交换；
2.局部刷新页面（验证用户名的唯一）；
3.界面的美观（用户体验的增强）；
4.对数据库的操作；
5.可以返回简单的文本格式，也可以返回XML文件格式（少用），JSON数据格式。

八. 使用原生javascript封装AJAX

/**
* method 数据传输的方式
* url    请求文件的路径
* data   请求的数据
* fn     当请求成功时的回调函数（即是DOM操作）  
*/
function ajax(method, url, data, fn){
    var xhr;
    if(XMLHTTPRequest){
        return xhr = new XMLHTTPRequest();
    }else{
        return xhr = new ActiveXObject('micorsoft.XMLHTTP');
    }

    if(method == 'GET' && data){
        url += '?' + data;
    }

    xhr.open(method, url, true);

    if(method == 'GET'){
        xhr.send(null);
    }else{
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                if(fn){
                    fn(xhr.responseText);
                }
            }
        }
    }
}