模拟面试官系列丨JavaScript基础——Ajax

嘿嘿嘿这并不是技术讲解 。每当这种季节的到来，各种面试系列以你避都避不开的姿势呈现在你面前。每当手滑不小心（或手贱）点开的时候却发现，妈耶！这些题我都不会做耶，感觉几年班都TM白上了。鲁迅先生说过：“好记性不如烂笔头”。每次都想着待会再看，一待就待到9102年了。罪过罪过！so，现在开始就行动起来把。嘿喂?！

当面试官问我Ajax是什么的时候，我会怎么回答呢？

• 历史背景

在没用Ajax之前，只能通过表单（form）的形式向服务器发送请求。每次请求都会将整个页面刷新一遍。Ajax可以通过异步更新的方式能够让应用刷新局部的状态，不需要使得整个页面刷新。

• 什么是 Ajax？
  

1. Ajax全名叫Asynchronous JavaScript + XML，XMLHttpRequest是实现Ajax的一个重要核心接口，如果还要兼容老IE的话还有ActiveXObject 
   
   
2. Ajax的实现原理：
   

   function ajax(callback) {
       var xhr = new XMLHttpRequest() // 0 新建连接
       xhr.onreadystatechange = () => {
           if(xhr.readyStatus === 4) {
               // 请求成功
               callback(xhr) // 4 请求完成
           }
       }
       xhr.open('get','url.json') // 1 打开连接
       xhr.send(null) // 2 发送请求
   }复制代码

   上面代码的整个流程图如下：
   

   
   
   

3. 跨域：
   只要协议，域名，端口有任何一个不同，就会被当作跨域。
   解决方法有：JSONP，CORS，本地开发可以用webpack的proxy代理。可以参考不再赘述

• 拓展
  

1. GET和POST的区别？
   GET请求会把参数暴露在连接上，相比于POST请求不安全；
   在URL的传输中GET请求有大小限制，而POST请求没有限制；
   GET请求只支持ASCII字符的数据类型，而POST请求没有限制；
   GET请求只支持URL编码，POST支持多种编码方式；
   
   
2. ajax的封装：
   这里主要是通过Promise来封装一个简单的Ajax请求，有点困了。
   // TODO 下次贴代码
   
   
3. 常见的库：
   比如Axios，JQuery的Ajax，具体得结合项目案例说明
   
   
4. Fetch：
   Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能。详情请看

• 从今以后，好好做人。

转载于:https://juejin.im/post/5c851f84518825068d1d1389