快速上手Ajax【一篇文章就搞懂】

目录：

• 1.什么是 AJAX ？
• 2.快速上手
• 2.1 AJAX工做流程图
• 2.2 readyState 和status
• 3. 具体用法
• 3.1 GET 请求
• 3.2. POST 请求
• 3.3选择GET仍是POST？
• 3.4 同步与异步

 

1.什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

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

经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

而传统的网页（不使用 AJAX）若是须要更新内容，必需重载整个网页面。

AJAX它使咱们能够经过 JavaScript 直接获取服务端最新的内容而没必要从新加载
页面。让 Web 更能接近桌面应用的用户体验。

说白了，AJAX 就是浏览器提供的一套 API，咱们能够经过 JavaScript 调用，从而实现经过代码控制请求与响应。实现网络编程。

2.快速上手

使用Ajax是很是容易的，咱们能够类比咱们平时使用浏览器同样，通常须要 4个步骤就能够获取到后端响应过来的内容。

//步骤1： 建立一个 XMLHttpRequest 类型的对象 ———— 至关于咱们平时打开一个浏览器
var xhr = new XMLHttpRequest();
//步骤2:  open打开一个与网址之间的联系 ———— 至关于在地址栏输入网址访问
xhr.open('GET','./time.php');
//步骤3:  send经过链接发送一次请求 ———— 至关于回车或者点击访问发送请求
xhr.send(null);
//步骤4:  指定 xhr 状态发生变化的时候的处理函数 ———— 至关于处理网页呈现后的操做 
xhr.onreadystatechange = function () {
// 经过 xhr 的 readyState 判断这次请求的响应是否接收完成
    if (xhr.readyState === 4 && xhr.status=== 200) { //若是是请求已完成，而且响应已就绪
    // 经过 xhr 的 responseText 获取到响应的响应体
    console.log(this)
    }
}

 

 

这样就完成Ajax的所有操做啦。

2.1 AJAX工做流程图

2.2 readyState 和status

因为 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在获得响应时），也就意味着这个事件会被触发屡次，因此咱们有必要了解每个状态值表明的含义：

注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每一个变化。

经过了解每个状态值的含义，咱们能够得出，在readyState等于4的时候就已经完成请求了，因此咱们通常都会进行判断是否等于4，这样才能完整得拿到响应内容。

3. 具体用法

3.1 GET 请求

一般在一次 GET 请求过程当中，参数传递都是经过 URL 地址中的 ? 参数传递。

var xhr = new XMLHttpRequest()
// GET 请求传递参数一般使用的是问号传参
// 这里能够在请求地址后面加上参数，从而传递数据到服务端
xhr.open('GET', './delete.php?id=1')
// 通常在 GET 请求时无需设置响应体，能够传 null 或者干脆不传
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4 && status === 200) {
console.log(this.responseText)
}
}
// 通常状况下 URL 传递的都是参数性质的数据，而 POST 通常都是业务数据

 

 

3.2. POST 请求

POST 请求过程当中，都是采用请求体承载须要提交的数据.

var xhr = new XMLHttpRequest()
// open 方法的第一个参数的做用就是设置请求的 method
xhr.open('POST', './add.php')
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
// 标识这次请求的请求体格式为 urlencoded 以便于服务端接收数据
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 须要提交到服务端的数据能够经过 send 方法的参数传递
// 格式：key1=value1&key2=value2
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}

 

3.3选择GET仍是POST？

与 POST 相比，GET 更简单也更快，而且在大部分状况下都能用。

然而，在如下状况中，请使用 POST 请求：

1. 没法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3.4 同步与异步

在open方法中有三个参数，其中第3个参数就是设置Ajax是经过异步进行请求仍是同步请求，它是一个bool值，不填写时，默认为true。采用异步方式执行。若是须要同步执行能够经过传递 false 实现。

那到底什么是同步仍是异步呢？咱们经过生活的小例子进行讲解。

同步：当你排队去买彩票时候，你就只能排队买彩票，中途不能作其它的事情，只能干愣着，等待完成才能执行下一步。

异步：在你买彩票排队的时候，你能够去作一些其它的事情，好比玩手机，玩游戏，而不是等待

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 默认第三个参数为 true 意味着采用异步方式执行
xhr.open('GET', './time.php', true)
xhr.send(null)
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
    // 这里的代码最后执行
    console.log('request done')
    }
}
console.log('after ajax')

 

 

若是采用同步方式执行，则代码会卡死在 xhr.send() 这一步：

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open('GET', './time.php', false)
// 同步方式 执行须要 先注册事件再调用 send，不然 readystatechange 没法触发
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
    // 这里的代码最后执行
    console.log('request done')
    }
}
xhr.send(null)
console.log('after ajax')

 

不推荐使用 async=false，可是对于一些小型的请求，也是能够的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。若是服务器繁忙或缓慢，应用程序会挂起或中止。

当您使用 async=false 时，必定在发送请求 send() 以前注册 readystatechange （无论同步或者异步）——— 为了让这个事件能够更加可靠（必定触发），必定是先注册！

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;