啊!贾克斯面试汇总

Ajax是什么

Ajax就是让浏览器跟服务器交互的一套API。它的作用就是可以让浏览器和服务器进行交互。
说人话： ajax 是一种用于在不刷新页面的情况下向服务器请求数据的技术

Ajax 组成部分了解

说人话：用js发送异步的网络请求

A : Asynchronous 异步

同步 ： 指的是代码按照从上往下顺序执行

异步 ： 代码不会立即执行,而是要等一会儿执行

    目前我们学过的ECMAScript只有两个语法是异步的：
    定时器 与 ajax
    DOM事件也是属于异步的，但是这个是属于DOM的执行机制。
    所以一般在讨论js同步和异步的时候，主要以js为主，
    DOM一般不讨论。

J：Javascript
A ：And

X : XML 与 XMLHttpRequest

XML ： 解决跨平台数据传输。

在JSON没有出来以前, 网络传输主要以XML格式数据为主。
后来JSON问世，逐渐取代XML。
但是由于ajax技术出来的比json早，
因此xml这个称呼一直保留至今

Ajax的工作流程

创建XMLHttpRequest对象 let xhr = new XMLHttpRequest();

2.设置请求 xhr.open('get', 'https://autumnfish.cn/api/joke');

3.发送请求 xhr.send();

4.注册回调函数 xhr.onload=function({console.log(xhr.responseText);}

 (这个函数不会立即执行,而是等服务器响应之后才会执行)

axios的基本使用

axios
 get() : 写url和请求参数
    then(res=>{}) : 成功回调， 相当于以前jq的success
    catch(err=>{}):失败回调，  一般可以省略不写
    then(()=>{}):完成回调，  表示请求完成，无论成功失败都执行。一般可以
    省略不写

axios 的推荐写法

  axios({
       url:'请求路径',
        method:'请求方式',
        data:{ post请求参数 },
        params:{ get请求参数 }
    }).then(res=>{
        //成功回调
        //console.log(res)
    });

get请求与post请求区别(掌握)

传参方式不同
- get在url后面拼接(请求行)
- post在请求体传参
大小限制不同
- get有大小限制，不同浏览器大小限制不同。一般2-5 MB
- post没有大小限制
安全性不同
- get参数直接暴露在url，不安全(一般查询类数据都是get)
- post参数在请求体中，更加安全（一般登录注册必须是post）
传输速度不同
- get传输速度快
- post传输速度慢

ajax拦截器工作流程

 1. axios 发起请求
 2. 执行 请求拦截器 : 添加ajax发送请求之前的操作
 3. 服务器 接收、处理、响应 请求
 4. 执行 响应拦截器 ： 添加服务器响应之后的操作
 4. axios 接收响应(执行then方法)

 拦截器
  // 添加请求拦截器
  axios.interceptors.request.use(
    function(config) {
      // 可以操作这次请求了
      // console.log(config); // ajax请求参数;
      
      //这里写发送请求时要执行的代码
      
      // 返回固定数据
      return config
    },
    function(error) {
      // 对请求错误做些什么 , 下面这句话，固定语法;
      return Promise.reject(error)
    }
  )

  // 添加响应拦截器
  axios.interceptors.response.use(
    function(response) {
      //服务器响应的数据
      // console.log(response);
      
      //这里写响应之前要执行的代码
      
      // 把服务器响应的数据返回给axios的then方法
      return response
    },
    function(error) {
      // 隐藏 loading 效果
      $(".loading-box").hide() // 失败了，也要隐藏 loadding 效果;
      // 对响应错误做点什么
      return Promise.reject(error)
    }
  )

# AJAX - onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性

面试点

   XMLHttpRequest的两个事件

    1. onload事件 ：  接收服务器响应的数（一次请求，只会执行一次）
    2. onreadystatechang事件 : 作用与onload事件一致（一次请求，会执行多次）
        面试点： XMLHttpRequest对象的状态码 （xhr.readyState）
            0: 请求未建立  (创建了xhr对象，但是还没调用open)
            1: 服务器连接已建立 
            2. 请求已接收  (send之后,服务器已经接收了请求)
            3. 请求处理中 
            4. 请求已完成，且响应已就绪 （ 4状态码等同于onload事件 ）

HTTP协议原理

ajax原理：设置http请求报文的过程
1.什么HTTP协议
- 协议指的是规定浏览器跟服务器交互的数据格式
2.浏览器请求必须是：请求报文
3.服务器响应必须是：响应报文
4.请求报文与响应报文的数据格式如下
- a.请求报文
  - (1)请求行：包含请求方法, URL, 协议版本
  - (2)请求头：包含请求的附加信息, 由关键字/值对组成 (浏览器告诉服务器我给的数据是什么格式,content-type也在请求头中)
  - (3)请求体：浏览器发送给服务器的数据(参数) (post请求参数也在请求体中)
- b.响应报文
  - (1)响应行：包含协议版本, 状态码, 状态码描述
    - 1xx, 指示信息, 表示请求已接收, 继续处理
    - 2xx, 成功, 表示请求已被成功接收和处理.
```
请求成功 200
请求成功,还在继续传输数据 204
```
    - 3xx, 重定向, 表示要完成请求必须进行更进一步操作
```
重定向 302
```
    - 4xx, 客户端错误, 表示有语法错误或请求无法实现
```
 前端问题
 参数错误  400
 没有权限  401
 url错误  404
 
```
    - 5xx, 服务器端错误, 表示服务器未能实现合法的请求
```
后台问题
服务器bug  500
```
  - (2)响应头:content-type 返回的数据格式，jQuery自动转JSON就是根据他来判断的
  - (3)响应体：服务器响应给浏览器的数据（xhr.responseText）

一个页面从输入url到呈现过程

1.DNS域名解析：将url中的域名解析成ip地址
2.TCP三次握手：建立安全的网络传输协议
- 2.1 什么是TCP : 一种传输控制协议
- 2.2 TCP作用 : 保证HTTP网络传输是安全 + 可靠的（检测客户端与服务器的网卡是不是通的）
- 2.3 TCP三次握手 :
  
  第一次: 浏览器 -> 服务器 (你能听到我说话吗?,检测浏览器:发送)
  
  第二次: 服务器 -> 浏览器 (我听到了,你能听到我说话吗。检测浏服务器: 接收 + 发送)
  
  第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收)
3.HTTP建立连接
- 3.1 客户端发送请求
- 3.2 服务器处理请求
- 3.3 服务器响应请求
4.渲染引擎开始渲染响应返回的HTML文本
- 4.1 解析html生成：dom树
- 4.2 解析css生成：样式树
- 4.3 dom树与样式树合并得到渲染树
- 4.4 呈现页面

AjAX面试总结

啊!贾克斯面试汇总

Ajax是什么

Ajax 组成部分了解

Ajax的工作流程

axios的基本使用

axios 的推荐写法

get请求与post请求区别(掌握)

ajax拦截器工作流程

# AJAX - onreadystatechange 事件

HTTP协议原理

一个页面从输入url到呈现过程