这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。

直接用ajax调用不同域的数据：

调用的文件

文件内容





<html>

<head>

<title>跨域测试_ajax</title>

<script src="/public/wechat/javascripts/jquery-2.0.3.min.js"></script>

<script>

    $(function() {

        $("#but").click(function(){

             $.ajax({

                    type:"post",

                    url:"http://localhost:8081/category2.json",

                    success:function(data){

                        /* console(data); */

                        $("#text").html(data);

                    }

             })

        })

    })

</script>

</head>

<body>

    <button type="button" id="but">获取跨域的数据</button>

    <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>

</html>






 














报错：Failed to load http://localhost:8081/category2.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9003' is therefore not allowed access.


跨域请求被拒绝，其实数据已经获取成功了，只不过是被浏览器给拒绝了


通过js引用将数据引进来：










 <html>

 <head>

     <title>跨域测试-引用js片段的形式将数据引进来</title>

     <script src="/public/wechat/javascripts/jquery-2.0.3.min.js"></script>

     <script>

         //回调函数

         function service (result) {

             var data = JSON.stringify(result); //json对象转成字符串

             $("#text").val(data);

         }

     </script>

 </head>

 <body>

     跨域的数据：<textarea id="text" style="width: 400px; height: 100px;"></textarea>

   <!-- 要在上面的回调函数、文本域标签加载完了再跨域引用 -->

  <script src='http://localhost:8081/category2.json'></script>

 </body>

 </html>










页面




数据获取成功


所以通过http://localhost:8081/category2.json得到的js文件，就是我们之前定义的service函数,并且它的参数就是我们需要的json数据，这样我们就跨域获得了我们需要的数据。


这样jsonp的原理就很清楚了，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。


其实ajax有对jsonp的访问进行处理：










<html>

<head>

<title>跨域测试_ajax</title>

<script src="/public/wechat/javascripts/jquery-2.0.3.min.js"></script>

<script>

    $(function() {

        $("#but").click(function(){

             $.ajax({

                    url:"http://localhost:8081/category2.json",

                    dataType: 'jsonp',

                   //  jsonp: 'callback',      //为服务端准备的参数

                    jsonpCallback: 'service',   //回调函数

                    success:function(){

                        /* console(data); */

                    }

             })

        })

    })

    function service(data){

                var str=JSON.stringify(data);

                $("#text").text(str);

            }

</script>

</head>

<body>

    <button type="button" id="but">获取跨域的数据1111</button>

    <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>

</html>










这样也可以获取到数据
												


											
js跨域请求jsonp解决方案-最简单的小demo的更多相关文章
	

    
								
  1. JS跨域请求 JSONP B/S全代码
		
    Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准:Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有 ...
    
		
    2. 
						
  2. js跨域请求方式 ---- JSONP原理解析
		
    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法:   1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...
    
		
    3. 
						
  3. 第四节：跨域请求的解决方案和WebApi特有的处理方式
		
    一. 简介 前言: 跨域问题发生在Javascript发起Ajax调用,其根本原因是因为浏览器对于这种请求,所给予的权限是较低的,通常只允许调用本域中的资源, 除非目标服务器明确地告知它允许跨域调用. ...
    
		
    4. 
						
  4. js跨域请求的5中解决方式
		
    跨域请求数据解决方案主要有如下解决方法: ? 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一.J ...
    
		
    5. 
						
  5. JS跨域：jsonp、跨域资源共享、iframe+window.name
		
    JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...
    
		
    6. 
						
  6. jquery跨域请求jsonp
		
    服务端PHP代码  header('Content-Type:application/json; charset=utf-8'); $arr = array('a'=>1, 'b'=>2, ...
    
		
    7. 
						
  7. js跨域请求数据的3种常用的方法
		
    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...
    
		
    8. 
						
  8. 浏览器同源策略，跨域请求jsonp
		
    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...
    
		
    9. 
						
  9. js跨域请求解决方案
		
    什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: <link>.&l ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. （转）tomcat 修改默认访问项目名称和项目发布路径
			
    1.项目发布路径 <Host name="localhost" appBase="webapps" unpackWARs="true" ...
    
			
    2. 
						
  2. IntelliJ IDEA 常用设置 (二)
			
    一. 代码提示和补充功能有一个特性:区分大小写. 区分大小写的情况是这样的:比如我们在 Java 代码文件中输入 stringBuffer IntelliJ IDEA 是不会帮我们提示或是代码补充的, ...
    
			
    3. 
						
  3. [拍摄]『ROSE 拆解』SONY 摄像机镜头拆解。
			
    镜头是从一部很老的sony摄像机上拆下来的.具体型号记不清了.应该是DCR系列的某个型号.使用Hi8磁带.NNN年前摄像机因为意外进水报废...拆拆去最后只剩下镜头了.镜头总成. 图片:IMG_201 ...
    
			
    4. 
						
  4. 3.《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——检查文件
			
    上面我们已经学过如何创建及操作文件,现在我们再来学习检查内容.当文件太长以至于屏幕一页显示不完时,这显得尤其重要.特殊情形下,如我们在第2.1章节开始部分中使用cat命令将内容展示到屏幕上,但这对于长 ...
    
			
    5. 
						
  5. React-使用redux-immutable统一数据格式
			
    在header的reducer.js里把header变成immutable对象之后,在组件里获取focused属性就得这样获取: focused:state.header.get('focused') ...
    
			
    6. 
						
  6. 搭建SpringBoot+dubbo+zookeeper+maven框架（一）
			
    这几天项目还没来,所以就自己试着参考网上的一些资料,搭建了一个SpringBoot+dubbo+zookeeper+maven框架,网上参考的很多资料照着他们一步一步搭建,最后很多都运行不通,很是郁闷 ...
    
			
    7. 
						
  7. ABP从入门到精通（4）：使用基于JWT标准的Token访问WebApi
			
    项目:asp.net zero 4.2.0 .net core(1.1) 版本 我们做项目的时候可能会遇到需要提供api给app调用,ABP动态生成的WebApi提供了方便的基于JWT标准的Token ...
    
			
    8. 
						
  8. 实例解析forEach、for...in与for...of
			
    在开发过程中经常需要循环遍历数组或者对象,js也为我们提供了不少方法供使用,其中就有三兄弟forEach.for...in.for...of,这三个方法应该是使用频率最高的,但很多人却一值傻傻分不清, ...
    
			
    9. 
						
  9. [朴孝敏][Ooh La La]
			
    歌词来源:http://music.163.com/#/song?id=484058960 作曲 : Damon Sharpe/Jimmy Burney/Adam Kapit [作曲 : Damon  ...
    
			
    10. 
						
  10. Docker容器学习梳理 - SSH方式登陆容器
			
    前面几篇已经介绍了Docker基础环境的部署,下面介绍下通过ssh方式登陆Docker容器的操作记录(其实不太建议直接用ssh去连接上容器的想法,虽然可以,但是有很多弊端,而且docker已经提供了容 ...
    
			
    11.