AJAX 简单使用教程

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页要更新内容只能重新加载整个页面。

因为无需刷新页面就能和后端进行数据传输，所以 AJAX 的出现极大的改善了用户体验。例如在使用搜索引擎搜索内容的时候只需要输入一部分关键词无需提交，搜索引擎就会根据你输入的内容来提供相应的搜索建议。又或者是在用户注册的时候输入完手机号或邮箱地址，后台就会判断输入的手机号或邮箱地址是否被注册过，无需重新加载整个网页。减小了数据的传输量，节省了时间。

get 方式

AJAX 和表单提交一样，也分了 POST 和 GET。

代码：

//  创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//  设置提交方式，url，是否异步
xhr.open('get', 'server.php', true);
//  提交
xhr.send();

//  每当 readyState 改变时，就会触发 onreadystatechange 事件
xhr.onreadystatechange = function() {
    //  根据XMLHttpRequest的状态值来判断是否成功获取数据
    if (xhr.readyState == 4) {
        //  根据HTTP状态码来判断是否有错误
        if (xhr.status == 200) {
            //  在控制台输出获取的内容
            console.log(xhr.responseText);
        }else {
            //  输出HTTP错误码
            console.log('出错了，错误代码' + xhr.status);
        }
    }
}

XMLHttpRequest 对象 提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

XMLHttpRequest 对象 需要 IE7 以上的浏览器才能使用，不过现在已经是 2018 年了，已经很少会有人用 IE6 了，国内的 XP 用户也大多会用 360 或 QQ 这一类的浏览器，这些浏览器大多是 Chrome 内核的，所以不用太担心兼容性问题。

open(method, url, async, username, password) 方法 初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。

参数说明：

1. method 请求方式，get 或 post
2. url 要请求的 url
3. async 是否异步 如果为 true 在等待服务器响应的时候，后面的JS代码可以继续执行，如果为 false 等待服务器响应的这段时间，后面的 JS 代码不会执行
4. username 如果后台启用了身份验证就需要设置用户名
5. password 如果后台启用了身份验证就需要设置密码

如果使用 get 方式请求，数据就需要写在 url 的后面，格式和超链接发送数据的格式是一样的，? + 参数名= + 数据，多条数据之间用&分隔，

例如我要给 server.php 发送用户名和密码：

server.php?userName=123456&password=123456

注意！这里的 get 方式和表单的 get 是一样的，参数名和数据都是可见的，所以不建议用 get 方式来发送密码，而且 get 允许的数据量笔 post 小，不能发送太多内容。

send(body) 方法 发送 HTTP 请求，如果为 post 方式就需要填写发送数据，如果是 get 方式可省略参数。

onreadystatechange 事件 每当 readyState 改变时，就会触发此事件

readyState 属性 HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

下面是readyState状态值的详细说明：

status 属性 由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。更详细的HTTP状态码可在百度上查询。

responseText 属性 接收到的数据，如果 readyState 为 3，responseText 为空字符串。

上面就是通过 get 方式发送 AJAX 请求。

post 方式

代码

下面是通过 post 方式发送 AJAX 请求：

//  创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//  设置提交方式，url，是否异步
xhr.open('post', 'server.php', true);
//  设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//  提交
xhr.send('userName=123456&password=123456');

//  每当 readyState 改变时，就会触发 onreadystatechange 事件
xhr.onreadystatechange = function() {
    //  根据XMLHttpRequest的状态来判断是否成功获取数据
    if (xhr.readyState == 4) {
        //  根据HTTP状态码来判断是否有错误
        if (xhr.status == 200) {
            //  在控制台输出获取的内容
            console.log(xhr.responseText);
        }else {
            //  输出HTTP错误码
            console.log('出错了，错误代码' + xhr.status);
        }
    }
}

post 方式和 get 方式的区别不是太大，post 方式 open 的第一个参数要设置为 post。

post 方式的发送数据不再是写在 url 后面，而是写在 send 方法里，通过 post 发送数据还需要设置请求头。

setRequestHeader(name, value) 方法 设置 HTTP 请求的头部，它应该包含在通过后续 send() 调用而发布的请求中。这个方法只有当 readyState 为 1 的时候才能调用，例如，在调用了 open() 之后，但在调用 send() 之前。

上面就是通过 post 方式发送请求，post 方式的安全性比起 get 来说要高一些，而且可传输的数据量也要更大。

以上就是 AJAX 的使用方法，如果用 jQuery 的话会更简单。

相关文章：

• jQuery AJAX 简单使用教程
• 使用AJAX + FormData 无刷新上传文件