最近总是去腾讯面试，结果都挂掉了，失去了生活的希望，好想去远方。。。
无奈还欠着太多贷款，还没有结婚生娃，之后咬着牙，留着泪，继续学习吧。
1.前端通过ajax请求数据，不用ajax还可以用什么完成请求呢？
答：ajax就是原生的XHR，jQuery的也是对原生ajax进行封装，axios也是对原生XHR的进行封装
如果不用ajax的话，估计就只有jsonp了。
这个样面试官有点不太满意，我觉得我的吹水能能力不行，我应该给他说个五百字才好。
其实不用ajax，jsonp应该是唯一马上想到的，现在我百度一下，发现还是觉得jsonp是比较好的，但其他方法也是有的，比如fetch，还有直接用url，比如图片，css，html里面的from表单提交，还有就是传统的MVC模式的开发了，iframe也是通过传统的MVC模式才行。
一. ajax原理：
AJAX的全称是Asynchronous JavaScript And XML.
使用ajax发送请求是依靠于一个对象，叫XmlHttpRequest对象，通过这个对象我们可以从服务器获取到数据，然后再渲染到我们的页面上。现在几乎所有的浏览器都有这个对象，只有IE7以下的没有，而是通过ActiveXObject这个对象来创建的。XmlHttpRequest对象有一些常见的方法：
| 方法 | 描述 |
|---|---|
| abort() | 停止当前请求 |
| getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |
| getResponseHeader(“header”) | 返回指定首部的串值 |
| open(method,url) | 建立对服务器的调用,还有3个可选参数，是否异步、用户名、密码 |
| send(content) | 向服务器发送请求 |
| setRequestHeader(header, value) | 把指定首部设置为所提供的值。 |
XMLHttpRequest对象
当需要异步与服务器交换数据时，需要XMLHttpRequest对象来异步交换。XMLHttpRequest对象的主要属性有：
onreadystatechange——每次状态改变所触发事件的事件处理程序。
responseText——从服务器进程返回数据的字符串形式。
responseXML——从服务器进程返回的DOM兼容的文档数据对象。
status——从服务器返回的数字代码，如404（未找到）和200（已就绪）。
status Text——伴随状态码的字符串信息。
readyState——对象状态值。对象状态值有以下几个：
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了
对于readyState的状态值，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。
ajax优缺点
| 优缺点 | 描述 |
|---|---|
| 优点 | 局部更新 |
| 优点 | 通过异步模式，提升了用户体验 |
| 优点 | 原生支持，不需要任何插件 |
| 缺点 | 可能破坏浏览器后退功能 |
| 缺点 | 嵌套回调，难以处理 |
示例： 请看 原生ajax使用实现
二. JSONP原理
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
| 优缺点 | 描述 |
|---|---|
| 优点 | 进行跨域请求 |
| 缺点 | 不能 post请求 |
示例： 请看 JSONP跨域详解
三. ES6-fetch
Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
我们使用Fetch来获取数据时，会返回给我们一个Pormise对象，是因为Fetch API是基于Promise设计的。并且fetch调用非常简单，因为它是挂在BOM上的，属于全局的方法。
Fetch是ajax非常好的一个替代品，很有可能将来会完全代替ajax的地位。我们先来看下浏览器的支持情况：
20181130112153453.png
我们可以看到IE浏览器完全不支持Fetch，并且移动端的很多浏览器也不支持Fetch，不过可以使用第三方的ployfill来获得支持。Github.fetch
| 优缺点 | 描述 |
|---|---|
| 优点 | 支持Pormise对象 |
| 优点 | fetch调用非常简单 |
| 缺点 | 浏览器完全不支持Fetch |
示例： 请看 fetch 文档详情
MVC模式，请求数据不关前端的事。我已经不想走回头路了。
切图仔祝大家前途无限
网友评论