前端萌新面试：XMLHttpRequest、JSONP、同源策略和跨域

AAA
285 阅读2分钟

问题：XMLHttpRequest、JSONP的适用场景，并针对两种请求形式简述如何检测请求错误

两种请求形式

  • XMLHttpRequest
  • JSONP
  • 同步与异步请求
  • 跨域请求
  • GET请求与POST请求
  1. XMLHttpRequest用于浏览器端与服务器端异步数据传输，从而实现页面的无修改刷新；一般用于非跨域场景，支持GET和POST请求；若用于跨域，需要使用CORS头支持。JSONP一般用于跨域请求，只支持GET请求，不支持POST请求；
  2. XMLHttpRequest异常判断一般通过readyState和http状态码来判断，JSONP的异常判断一般是onerror事件和超时timer来判断。

XMLHttpRequest

XMLHttpRequest是一个API内置对象，用来实现浏览器端与服务器端异步请求，实现http通信，适用于不刷新整个页面就能更新局部数据的场景，是我们熟悉的Ajax。错误检测是该对象的readystate和status来判断：this.readyState = 表示当前XMLHttpRequest对象处于什么状态

0 未初始化。确认XMLHttpRequest对象是否建立，值为0表示对象已存在，否则浏览器报错；尚未初始化（即没有调用open()方法）

1初始化请求。对XMLHttpRequest对象进行初始化（即调用open()方法）；调用send()方法想服务端发送请求

2发送数据。send()方法已调用，但当前状态及http头不知道

3数据传送中。已接收部分数据，因为响应及http头不完全，这时通过responseBody和responseText获取部分数据会出现错误

4完成。数据接收完毕，可以通过responseBody和responseText获取完整的回应数据status能获取服务端的http响应状态码，当readystate===4时根据status时状态码可以判断http请求错误

JSONP

jsonp的核心原理就是目标页面回调请求接口数据，并带入参数。

由于同源策略，浏览器无法接收非同源接口数据；

由于<script>标签不受到浏览器同源策略的影响，因此通过src属性请求接口数据，进行函数回调，就是JSONP的实现原理。

jsonp可以将目标代码作为js的形式加载过来 还可以直接利用jquery的ajax请求jsonp

JSONP是一种解决跨域的方式，原理应用< script > <img> < iframe>这些标签不受同源限制，JSONP的异常判断一般是onerror事件和超时timer来判断

同步与异步请求

同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

跨域请求

跨域请求：当前发起请求的域与该请求指向的资源所在的域不同时的请求。

这里的域指的是这样的一个概念：我们认为如果 “协议 + 域名 + 端口号” 均相同，那么就是同域。

GET请求与POST请求

get请求是向服务器索要数据，post请求是向服务器传送数据的

浏览器限制了get的传送量，post可以大量的把数据传给 服务器，一般情况下get请求，请求体是空的，请求只发一次 ；如果是post请求，数据会放入请求体中，并且会根据请求头里 content-length 的长度分两次或多次传给服务器，直到与 content-length 的长度相等时断开传送 get和post请求服务器数据可以说都是不安全的，传送和接收 都是明文以字符串形式交互数据的，想要安全，请求之前需要 加密处理

知识点

什么是同源

同源指的是两个URL的协议、域名、端口号都相同，则两个页面具有相同的源。

http://www.test.com/80/index.html中，http:是协议名，//www.test.com/是域名，/80/是端口号

  • http://www.test.com/80/index.html和http://www.test.com/main.html同源。端口号不显示则默认为80端口，index.html 、main.html为网页名
  • http://www.test.com/80/index.html和http://www.test.com/80/main.html同源。
  • http://www.test.com/80/index.html和https://www.test.com/main.html不同源。协议名不一致
  • http://www.test.com/80/index.html和http://www.user.com/index.html不同源。域名不一致
  • http://www.test.com/80/index.html和http://www.test.com/7990/main.html不同源。端口号不一致

什么是同源策略

同源策略(Same origin policy)浏览器提供的一种安全策略功能。（目的：隔离潜在的恶意文件，提供安全）

MDN官方给出的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制

其实，这话和没说一样，同样的中文，但是组织起来，却不理解

通俗讲，就是浏览器限制不是同源的网站进行交互，不是同源说明协议名、域名、端口号其中任意一个不一致，同源策略相当于给网页交互上了一层隐形的墙

什么是跨域

两个URL的协议名、域名、端口号其中任意一个不一致，则叫跨域

  • http://www.test.com/80/index.html和https://www.test.com/main.html跨域。协议名不一致
  • http://www.test.com/80/index.html和http://www.user.com/index.html跨域。域名不一致
  • http://www.test.com/80/index.html和http://www.test.com/7990/main.html跨域。端口号不一致

出现跨域的根本原因

浏览器的同源策略不允许非同源的URL之间进行资源的交互

浏览器对跨域请求的拦截

如图：

跨域请求.png

  1. 浏览器允许发起跨域请求
  2. 浏览器能接收到服务器响应的数据
  3. 但首先会被浏览器的同源策略所拦截，不会直接把数据交给浏览器的ajax请求中，则服务器响应的数据无法被页面获取

就比如皇帝（浏览器A）住在乾清宫发圣旨，皇后（服务器B）接到命令，立马传回去，不过皇帝身份比较高贵，需要通过太监（同源策略）来拦截收到的信息，然后再统一传给皇帝

浏览器如何实现跨域数据请求

两种方式：

JSONP：只支持GET，不支持POST请求

CORS：GET、POST都支持，官方跨域ajax请求的根本解决方案

什么是JSONP

通过<script>标签的src属性请求接口数据，进行函数回调。目的：解决主流浏览器跨域请求数据访问的问题

由于同源策略，浏览器无法接收非同源接口数据；

由于<script>标签不受到浏览器同源策略的影响，因此通过src属性请求接口数据，进行函数回调，就是JSONP的实现原理。

<script>
    function getJsonP(res) {
    console.log('得到了res数据:' + res);
</script>
<script src="./js/getData.js?callback=getJsonP"></script>

jsonp可以将目标代码作为js的形式加载过来

还可以直接利用jquery的ajax请求jsonp

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
</head>
​
<body>
    <!-- jquery动态添加jsonp请求 -->
    <button id="btnjsonp">发起jsonp请求</button>
    <script>
        // 入口函数
        $(function () {
            $("btnjsonp").on('click', function () {
                $.ajax({
                    url: "./data/data.json",
                    dataType: "jsonp",
                    jsonpCallback: 'abd',
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })
    </script>
</body>
</html>

JSONP只支持GET请求，不支持POST；不属于ajax请求

avatar
文章
阅读
粉丝