Ajax学习笔记

最近在学php，刚刚入门，用到很多与Ajax相关的交互。Ajax也用了挺久的了，想写一下学习笔记来记录一下。今天先简单写一下原理和过程。欢迎大家一起探讨。

什么是AJAX

AJAX的全称是Asynchronous JavaScript and XML。
它是一种基于JavaScript的网页应用技术。传统的提交方式会重载整个网页，而利用AJAX技术可以使JavaScript与Web服务器异步传输数据，从而实现不重载整个页面的情况下，更新局部页面局部内容。

Ajax实现过程

0. XMLHttpRequest是AJAX的基础，XMLHTTPRequest()是核心对象，首先要实例化一个XMLHTTPRequest()对象

var xhr = new XMLHTTPRequest();

1. AJAX进行请求，规定请求的类型、URL 以及是否异步处理请求。

xhr.open(method, url, async);

open()方法接收三个参数：

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

AJAX的原理就是Asynchronous异步的，所以第三个参数async为true。

第一个参数method决定了请求类型，即传输数据的方式。

• GET
• 与POST相比，GET 更简单也更快。但是传输数据时会将数据放在地址栏的后面，对客户端而言不安全。除此之外，GET传输数据的大小受限，一般只有2k-8k，因浏览器而异。所以在传输不敏感信息并且传输文件小的情况下，我们可以选择用GET方式传输。
• POST
• POST传输是传输数据体，是隐式的，相对客户端较为安全。但是从另一层面上来说，相对服务器端就有一定的风险了。POST传输数据没有大小限制，但是服务器对上传的数据有限制，需要手动修改。

2. AJAX向服务器发送请求

xhr.send(string);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

用GET方法传输时，send(null)，用POST方法传输时，需要用setRequestHeader方法设置请求头。

3. AJAX响应服务器状态

AJAX响应服务器状态涉及XMLHttpRequest对象的三个重要的属性：onreadystatechange、readyState、status。
readyState存有XMLHttpRequest的状态。从0到4发生变化：

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

每当readyState改变时，就会触发onreadystatechange事件，在事件中判断请求是否成功，响应是否就绪，当readyState等于4且状态为200时，表示响应已就绪：

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

4. 使用 Callback 函数

obj.success(xhr.responseText);

AJAX响应就绪后，对接收到的数据进行后续的操作。

Ajax原生封装

var ajax = {
    create: function () {
        var xhr;
        if (XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else{
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        return xhr;
    },
    request: function (obj) {
        var xhr = this.create();
        var data = this.changeData(obj.data);
        if (obj.type === 'GET') {
            xhr.open(obj.type, obj.url+'?rand='+Math.random()+'&'+data, true);
            xhr.send(null);
        } else if (obj.type === 'POST') {
            xhr.open(obj.type, obj.url, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.send(data);
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    obj.success(xhr.responseText);
                }
            }
        }
    },
    changeData: function (data) {
        var arr = [];
        for (var i in data) {
            arr.push(i+'='+data[i]);
        }
        return arr.join('&');
    }
}
// 调用
ajax.request({
    type: 'POST',
    url: 'weibo.php',
    data: 'act=update',
    success: function(res){
        console.log(res);
    }
});

可以看出调用的形式与jQuery的实现原理相似。