此块内容参考Ajax文档部分。

主要复习内容：

1.JavaScript核心对象

2.浏览器BOM对象

3.文档对象模型DOM

4.常见事件

5.Ajax编程(web交互2种方式的对比)

6.传统Ajax编程的步骤以及从服务器端返回的数据格式

7.JSON数据格式的转换操作

8.jQuery选择器

9.jQuery的Ajax编程(常见方法)

浏览器跨域问题：

json相信大家都用的多，jsonp我就一直没有机会用到，但也经常看到，只知道是“用来跨域的”，一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。

同源策略

首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思，实践一下就知道了。

1.随便建两个网页

一个端口是2698，一个2701，按照定义它们是不同源的。

2.用jQuery发起不同源的请求

在2698端口的网页上添加一个按钮，Click事件随便发起两个向端口为2701域的请求。

$("#getOtherDomainThings").click(function(){
$.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js",function(data){
console.log(data)
})
$.get("http://localhost:2701/home/index",function(data){
console.log(data)
})
})

根据同源策略，很明显会悲剧了。浏览器会阻止，根本不会发起这个请求。（not allowed by Access-Control-Allow-Origin）

OK，原来jsonp是要解决这个问题的。

script标签的跨域能力

不知道大家知不知道CDN这个东西，例如微软的CDN，使用它，我们的网页可以不提供jQuery，由微软的网站帮我们提供：

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>

回到我们的2698端口的网页，上面我们在Click事件里有一个对2701端口域的jQuery文件的请求，这次使用script标签来请求。

<script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.4.4.min.js"></script>

当然，200，OK了

同样是端口2698的网页发起对2701域的请求，放在script里设置scr属性的OK了，另一个方式就悲剧。利用script的跨域能力，这就是jsonp的基础。

利用script获取不同源的json

既然它叫jsonp，很明显目的还是json，而且是跨域获取。根据上面的分析，很容易想到：利用js构造一个script标签，把json的url赋给script的scr属性，把这个script插入到dom里，让浏览器去获取。实践：

functionCreateScript(src){
$("<script><//script>").attr("src", src).appendTo("body")
}

添加一个按钮事件来测试一下：

$("#getOtherDomainJson").click(function(){
$.get('http://localhost:2701/home/somejson',function(data){
console.log(data)
})
})

首先，第一个浏览器，http://localhost:2701/home/somejson这个Url的确是存在一个json的，而且在 2698网页上用script标签来请求这个2701这个Url也是200OK的，但是最下面报js语法错误了。原来用script标签加载完后，会立即把响应当js去执行，很明显{"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"}不是合法的js语句。

利用script获取异域的jsonp

显然，把上面的json放到一个回调方法里是最简单的方法。例如，变成这样：

如果存在jsonpcallback这个方法，那么jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})就是合法的js语句。

由于服务器不知道客户端的回调是什么，不可能hard code成jsonpcallback，所以就带一个QueryString让客户端告诉服务端，回调方法是什么，当然，QueryString的key要遵从服务端的约定，上面的是”callback“。

添加回调函数：

function jsonpcallback(json){
console.log(json)
}

把前面的方法稍微改改参数：

$("#getJsonpByHand").click(function(){
CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")
})

200OK，服务器返回jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})，我们也写了jsonpcallback方法，当然会执行。OK顺利获得了json。没错，到这里就是jsonp的全部。

利用jQuery获取jsonp

上面的方式中，又要插入script标签，又要定义一个回调，略显麻烦，利用jQuery可以直接得到想要的json数据，同样是上面的jsonp：

$("#getJsonpByJquery").click(function(){
$.ajax({
url:'http://localhost:2701/home/somejsonp',
dataType:"jsonp",
jsonp:"callback",
success:function(data){
console.log(data)
}
})
})

得到的结果跟上面类似。

总结

一句话就是利用script标签绕过同源策略，获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。

jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})

[Java面试十]浏览器跨域问题.相关推荐

Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
Mac上Chrome浏览器跨域解决方案
Mac上Chrome浏览器跨域解决方案参考文章: (1)Mac上Chrome浏览器跨域解决方案 (2)https://www.cnblogs.com/dxzg/p/9707639.html 备忘一下 ...
什么是浏览器跨域访问操作，js如何实现？
什么是浏览器跨域访问操作,js如何实现? 浏览器从一个域名的网页去请求一个域名的资源时,域名.端口.协议任一不同,都是跨域. 三种方法实现js跨域访问: 1.基于iframe实现跨域.基于iframe ...
记录关于浏览器跨域和设置默认浏览器的问题
@Author:Runsen 当你使用ajax访问本地的json文件的时候,就会报from origin 'null' has been blocked by CORS policy: Cross o ...
浏览器跨域访问解决方案
浏览器跨域访问解决方案 2015年11月4日 18972次浏览跨域的概念跨域大家都知道,不同地址,不同端口,不同级别,不同协议都会构成跨域.例如:about.haorooms.com和www.ha ...
详解浏览器跨域访问的几种办法
摘要: 本文讨论web前端安全问题以及应对措施,浏览器同源策略以及对资源跨域访问的几种解决方案本文分享自华为云社区<Web安全和浏览器跨域访问>,原文作者:kg-follower . ...
【华为云技术分享】详解浏览器跨域的几种方法
1前言 2背景知识介绍 2.1同源政策 2.2为什么要有跨域限制 3浏览器跨域的解决方案 3.1 CORS标准 3.2 CORS跨域判定的总体流程 3.3简单请求 3.4非简单请求 3.5 CORS相 ...
nginx解决浏览器跨域问题_使用nginx解决浏览器跨域
什么是浏览器跨域? 跨域就是指浏览器具有同源策略,浏览器不会执行访问其它网址数据的js脚本,比如说访问其它网址的cookie数据,调用其它网址的api接口. 什么是同源? 协议,域名,端口均相同的情况 ...
Ajax 浏览器跨域访问控制
2019独角兽企业重金招聘Python工程师标准>>> jsonp+ajax实现浏览器跨域通信的原理解析 php+ajax+P3P实现多域名跨域登录一.关于跨域需要设置的响应头消息 ...
c#解决浏览器跨域问题
c#解决浏览器跨域问题参考文章: (1)c#解决浏览器跨域问题 (2)https://www.cnblogs.com/S-U2018/p/10718252.html (3)https://www.j ...

[Java面试十]浏览器跨域问题.