同步就是等待上一个请求结束之后才能发送下一个请求，而异步交互不必等待结果返回，就可以向服务端发送下一次请求了。异步交互比同步交互的用户体验更好
Ajax是Asynchronous JavaScript XML的缩写，被翻译为异步JavaScript和XML 。Ajax本身并不是一个新技术，而是一个新的术语，在2015年被提出
Ajax的异步交互 可以HTML页面快速的将数据逐步更新在显示器上，不需要重载整个页面。 可以使页面更快的对用户的操做进行反馈
实现Ajax异步交互的核心就是 XML HttpRequest对象，该对象提供了在客户端和服务器之间传输数据的功能。
XML HttpRequest提供了一个通过URL来获取数据的简单方式，并不会使整个页面刷新，这使得网页只更新一部分不会打扰到用户。
虽然Ajax的名字中有XML，但根XML HttpRequest对象可以获取所有类型的资源并不局限于XML
封装HTML中的XMLHttpRequest到window上，但是在不同浏览器有一些小差异
(function createXMLHttpRequest(){ var httpRequest; if(window.XMLHttpRequest){ httpRequest = new XMLHttpRequest(); // chrom sarfer firefox }else if(window.ActiveXObject){ try { httpRequest = new ActiveXObject('Msxml2.XMLHTTP'); // ie 7+ }catch(e){ try{ httpRequest = new ActiveXObject('Microsoft.XMLHTTP') //ie 6 }catch(e){ } } } window.httpRequest = httpRequest })(window,undefined )新建服务端简单的node服务器
let express = require('express'); const cors = require("cors"); let app = express(); app.use(cors()); app.get('/',(req,res,err)=>{ res.send('Hello Word!'); }) app.listen(80,()=>{ console.log('服务器开启成功'); })新建一个html文件，加载上述js代码的文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src='HttpRequest.js'></script> </head> <body> <button>按钮</button> <script> let btn = document.getElementsByTagName('button')[0]; let xhr = window.httpRequest; btn.addEventListener('click',()=>{ xhr.onreadystatechange = function(){ console.log(xhr.readyState); if(xhr.readyState===4 && xhr.status=== 200){ console.log(xhr.responseText); } } // 2. 调用对象的open方法 xhr.open('get','http://127.0.0.1/'); // 3. send方法 xhr.send(null); // 不发送任何数据 } ) </script> </body> </html>XmlHttpRequest的请求方式为get，传参时不应在send时传入， 应在open时加入到地址栏的末尾。
在异步交互时最好使用post方式，
