ajax高频面试问题总结

Posted 2021-03-30 web前端开发

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax高频面试问题总结相关的知识，希望对你有一定的参考价值。

来源 | https://www.cnblogs.com/chenfairy/p/14156294.html

一、什么是 ajax?

它是一种异步请求数据的web开发技术，它可以在不提交整个页面的情况下，向服务器发送请求，实现页面的局部刷新。

目的：可以带来更好的用户体验，按需获取数据，节约带宽资源

二、ajax的原理?

首先举个例子：假如领导想让小王汇报一下工作，就委托秘书去叫小王，自己接着做其他事情，直到秘书告诉他小王已经到了，最后小王和领导汇报工作

ajax请求数据流程与之类似，其中最核心的依赖是浏览器提供的XMLHttpRequest对象，它扮演的角色相当于秘书，使得浏览器可以发出请求和接收响应。浏览器接着做其他事情，等接收到XHR返回来的数据后再渲染页面

三、ajax请求数据的过程?

创建一个'XMLHttpRequest'异步调用对象。

创建一个新的HTTP请求,并指定请求的方法、URL及验证信息。

设置响应HTTP请求状态变化的函数。

发送HTTP请求。

获取异步调用返回的数据。

使用 javascript 和DOM实现局部刷新。

 
   
   
 
  
    
    
   
    
    
    
    
    
    
    
    
  
  
    
    
     
     
     
   
    
      
      
    var xhr = new XMLHttpRequest(); // 初始化请求对象
    
      
      
    xhr.open("get/post", "路径", "true/false"); // 设置请求方式，请求地址 ，异步(true 默认的)和同步(false 强烈不推荐使用，已被弃用)
    
      
      
    xhr.send();
    
      
      
    xhr.onreadystatechange = function () { // 2 = 加载完毕（loaded），请求已接收头信息；3 = 交互 ，请求处理中，已接收主体信息；4 = 完成（complete），响应已完成(返回响应结果：成功/重定向/不存在/服务器有问题)
    
      
      
     if (xhr.readyState == 4 && xhr.status == 200) { // xhr.readyState：请求的状态；xhr.status：服务器返回的响应状态（成功 200，重定向 300，不存在 400，服务器有问题 500)
    
      
      
     var result = jsON.parse(xhr.responseText);
    
      
      
     }
    
      
      
     }