前端面试基础题：Ajax原理

• Ajax 的原理简单来讲是在⽤户和服务器之间加了—个中间层( AJAX 引擎)，经过XmlHttpRequest 对象来向服务器发异步请求，从服务器得到数据，而后⽤ javascrip t 来操做 DOM ⽽更新⻚⾯。使⽤户操做与服务器响应异步化。这其中最关键的⼀步就是从服 务器得到请求数据

• Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest是aja x的核⼼机制

/** 1. 建立链接 **/
var xhr = null;
xhr = new XMLHttpRequest()
/** 2. 链接服务器 **/
xhr.open('get', url, true)
/** 3. 发送请求 **/
xhr.send(null);
/** 4. 接受请求 **/
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
success(xhr.responseText); } else {
/** false **/
fail && fail(xhr.status); } } }

ajax 有那些优缺点?

• 优势：

  • 经过异步模式，提高了⽤户体验.
  • 优化了浏览器和服务器之间的传输，减小没必要要的数据往返，减小了带宽占⽤
  • Ajax 在客户端运⾏，承担了⼀部分原本由服务器承担的⼯做，减小了⼤⽤户量下的服 务器负载。
  • Ajax 能够实现动态不刷新（局部刷新）

• 缺点：

  • 安全问题 AJAX 暴露了与服务器交互的细节。
  • 对搜索引擎的⽀持⽐较弱。
  • 不容易调试。

推荐：

• 2020前端面试基础题293题，完整总结！