最近总是去面试,结果都挂掉了,失去了生活的希望,好想去远方。。。
无奈还欠着太多贷款,还没有结婚生娃,之后咬着牙,留着泪,继续学习吧。
1.前端通过ajax请求数据,不用ajax还可以用什么完成请求呢?
答:基本都是用ajax请求数据,ajax就是原生的XmlHttpRequest对象,jQuery中的请求也是对原生ajax进行封装,axios也是对原生ajax的进行封装,如果不用ajax的话,估计就只有jsonp了,或者是HTML文件模式了。
这个样面试官有点不太满意,实际的开发基本都是ajax,易用性和兼容性都是ajax比较好,面试嘛,要托管自己的知识面,其实不用ajax,jsonp应该是唯一马上想到的,现在我百度一下、、、
牛掰:前端使用ajax请求数据易用性和兼容性都是比较好的,基本一下第三方库都是对ajax的二次封装,如axios,jQuery等。不用ajax的话,jsonp是一个比较好的选择,但jsonp对post请求的支持不太友好,但同时也可以利用HTMLfrom表单形式提交post请求,jsonp原理也是源于HTML script标签的src属性。还有现在ES6-fetchAPI来获取数据,fetch请求数据直接返回的就是一个pormise实例,易用性更强,但兼容性不够。然后HTML5还提供了websocket请求数据方式,对于实时通信良好支持,同时需要服务端提供socket服务器,服务api请求方式是以ws或wss协议请求方式。
前端请求数据的方式?前端请求数据的几种方式?
一. 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的地位。我们先来看下浏览器的支持情况:
我们可以看到IE浏览器完全不支持Fetch,并且移动端的很多浏览器也不支持Fetch,不过可以使用第三方的ployfill来获得支持。Github.fetch
优缺点 | 描述 |
---|---|
优点 | 支持Pormise对象 |
优点 | fetch调用非常简单 |
缺点 | 浏览器完全不支持Fetch |
示例: 请看 fetch 文档详情
websocket使用方式 请看 菜鸟教程
MVC模式,请求数据不关前端的事。我已经不想走回头路了。
切图仔祝大家前途无限