Ajax技术之 XMLHttpRequest（第一篇）
2019-04-05 本文已影响0人
locky丶
Ajax全称是Asynchronous JavaScript + XML（异步JavaScript和XML），可以实现在不刷新浏览器的状态下更新页面上的数据。
Ajax的实现方式主要有以下4种：
- XMLHttpRequest（浏览器原生）（2005年）
- jQuery.ajax（第三方库）
- fetch 配合 async await（浏览器原生，基于Promise ECMAScript 2015 (ES6)）
- axios （第三方库，基于Promise，vue官方推荐异步调用方法）
Ajax的诞生让浏览器获得了新生，随着技术的不断进步，前端的接口调用变得异常简便。今天跟大家一起来说说Ajax的四大门派。
四大门派 之 XMLHttpRequest
该门派诞生于2005年， 是现存的门派中最早诞生的。
但它不是开山鼻祖，真正的祖师爷是XMLHTTP ActiveX，大名鼎鼎的微软公司于1999年出品，在IE5上有实现，由于不在标准内，后来就废弃了。为兼容IE5~IE6，我们还是会写入XMLHTTP ActiveX，该方法基本已经退出历史舞台，所以大家了解下即可。
今天这篇我们重点来讲下XMLHttpRequest，后续简称 XHR。
上代码：
html页面文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>XHR</title>
</head>
<body>
<div>
<h3>以下显示数据</h3>
<div id="showData"></div>
</div>
</body>
<script src="./XMLHttpRequest.js"></script>
</html>
js文件
window.onload = function () {
let xhr = new XMLHttpRequest()
xhr.open('get', 'http://jsonplaceholder.typicode.com/posts/1')
xhr.send(null)
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let data = JSON.parse(xhr.responseText)
document.querySelector('#showData').innerHTML = data.title
}
}
}
}
可以看到页面上有显示新数据，异步调用成功。onreadystatechange方法会监听readyState的状态变化，当readyState的值返回4（获取成功）的时候，xhr.responseText接收到服务器的数据，异步调用就算完成，后续就是操作DOM的事了。
兼容ie5~ie6的写法
let xhr
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
readyState的五种状态
0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法。
1 (载入)：已经调用open() 方法，但尚未发送请求。
2 (载入完成)： 请求已经发送完成。
3 (交互)：可以接收到部分响应数据。
4 (完成)：已经接收到了全部数据，并且连接已经关闭。
open()
XMLHttpRequest.open() 是我们设置频率最高的一个方法，括号内的参数入下。
open(method,url,async)
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
post请求
// 普通post方法
xmlhttp.open("POST","http://jsonplaceholder.typicode.com/posts",true);
xmlhttp.send()
// 带请求参数的post方法
xmlhttp.open("POST","url",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
