JavaScript | ajax实现原理

在早期，web应用，更多采用mvc框架，通过后端输出整个页面的内容，然后再用浏览器进行渲染，这样效率不高，对于事件绑定来说比较麻烦，于是提出了ajax，其最大的特点就是能实现局部更新。通过ajax请求到数据后，再做页面更新的渲染

打开控制台，菜单栏里找到Network这里的是请求，下面的菜单中有任务类型选项，Fetch/XHR是异步请求

对于异步请求，可以点击下面事件，弹出一个信息框，Headers中可以看到有异步请求的URL地址、请求的类型(Request Method)、请求的状态码…

通过ajax向服务端请求数据，请求的数据可以在preview中查看

ajax的使用优点

网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作

Ajax的实现原理

1、创建Ajax对象

var xhr = new XMLHttpRequest();

• 通过js原生的构造函数，来new XMLHttpRequest()获取一个ajax对象，这个对象有很多属性，其中有个叫open的属性，在其原型上能找到一个open()的方法

2、传入请求方式和请求地址

通过open方法出入对应的“请求方式”与“请求地址”

xhr.open('get','http://127.0.0.1:3000/getData')

• 'get’是请求的类型，发送的是一个get类型的请求
• 第二个参数是一个地址，地址是127.0.0.1，端口是3000，对应的一个接口的地址是getData
• 实际上这个地址应该是一个后端的地址，这个地址是通过Node.js的一个框架实现地址的获取

3、发送请求

通过xhr这个对象的send方法发送

xhr.send();

4、获取服务器与客户端的响应数据

要获取服务器回传给我们数据，所以需要对服务器有一个监听

xhr.onload = function(){
    console.log(xhr.responseText)
}

• 通过onload绑定一个函数，可以在里面拿到当前的结果
• 结果可以通过xhr对象中的responseText属性获取