haizlin/fe-interview

[js] 第110天 请详细描述AJAX的工作原理

haizhilin2013 opened this issue · 3 comments

第110天 请详细描述AJAX的工作原理

@LinStan 有一点需要指正:是XMLHttpRequest对象。

AJAX 是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页。

  • 创建对象 (XMLHttpRequest 对象)
  • 请求 (将请求发送到服务器,使用 XMLHttpRequest 对象的 open() 和 send() 方法)
  • 响应 (获得来自服务器的响应,使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性)
  • readyState (onreadystatechange 事件)

Ajax可以在网页和服务器之间的进行通信,从而达到不进行页面刷新的情况下让页面做到局部更新。
创建Ajax可以分如下几部分:

  1. 创建对象 XMLHttpRequest对象
  2. 发送请求至服务器,xhq有send和open方法,还可以设置请求方式为get/post。
  3. 接收服务器响应,可以监听onreadystatechange或onload事件来处理接口响应。
  4. 页面进行更新,根据接口返回更新页面对应的模块。