用JSONP解决ajax跨域问题

原创 2017年01月05日 16:03:31

JSONP:JSON With Padding

要点:

1.script标签

2.用script标签加载资源是没有跨域问题的

概要:

在资源加载进来之前先定义一个函数,这个函数接受一个参数(数据),函数里面利用这个参数做一些事情。

然后在需要的时候通过script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会执行我们前面定义好的函数,并且把我们想拿到的数据当做这个函数的参数传入进去。

小例子:

<body>
		<script type="text/javascript">
			function fn(data){
				alert(data);
			}
		</script>
		<script src="1.txt">
			/*
			 * 1.txt中的内容:fn([1,2,3]);
			 * 也就是执行了上面定义的fn函数
			 * script的src属性可以加载任何类型的文件,但文件里存放的必须是js语句
			 */
		</script>
	</body>
程序运行结果:

当然这只是最基本的理解,对于JSONP的运用还有很多特定的规则

下面再通过两个例子说明:

首先我在自己的个人服务器上放置一个txt文件,以便跨域读取用:

注意里面的test函数,是运用JSONP的核心。

	<body>
        <script type="text/javascript">
            function test(data) {
                var html = "";
                for(var i = 0; i < data.s.length; i++) {
                    html += '<li style="list-style:none">' + data.s[i] + '</li>';
                    document.getElementById("god").innerHTML = html;
                }
            }

            function cli() {
                var oScript = document.createElement("script");
                oScript.src = "ftp://linhuo:*********@hk3035.hndan.com/web/test/1.txt";
                document.body.appendChild(oScript);
            }
        </script>
        <input type="button" name="" id="" value="点击" onclick="cli()" />
        <div style="border:1px solid black;width:300px;height:250px;" id="god">JSONP</div>


    </body>

我们再来看百度的实时推荐效果:

这也是利用了跨域加载技术,实现起来也不难:

<body>
		<script type="text/javascript">
			function test(data) {
				var oUl = document.getElementById("list");
				var html = "";
				if(data.s.length) {
					oUl.style.display = "block";
					for(var i = 0; i < data.s.length; i++) {
						html += '<li><a href="">' + data.s[i] + '</a></li>';
					}
					oUl.innerHTML = html;
				} else {
					oUl.style.display = "none";
				}
			}
			window.onload = function() {
				var in_put = document.getElementById("in");
				var oUl = document.getElementById("list");

				in_put.onkeyup = function() {
					if(this.value != "") {
						var oScript = document.createElement("script");
						oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.value + "&cb=test";
						document.body.appendChild(oScript);
					}else{
						oUl.style.display = "none";
					}
				}

			}
		</script>

		<input type="text" name="" id="in" value="" />
		<ul id="list">
                </ul>

	</body>







版权声明:本文为博主原创文章,未经博主允许不得转载。

Jsonp解决ajax跨域问题

一、介绍 最近跨域问题比较多,而且自己刚好也看到这一块,就总结了一下,关于JSONP的东西百度的话东西确实很多,很多人都是复制别人的,如此下去,其实找的资料就那么几份,关键是我还看不懂,可能是能力...
  • saytime
  • saytime
  • 2016年05月30日 22:36
  • 18296

解决Ajax 跨域问题 - JSONP原理解析

解决Ajax 跨域问题 - JSONP原理解析为什么会有跨域问题? - 因为有同源策略 同源策略是浏览器的一种安全策略,所谓同源指的是 请求URL地址中的 协议, 域名 和 端口 都相同,只要其中之一...
  • qq_16415157
  • qq_16415157
  • 2016年11月11日 23:24
  • 6285

chrome浏览器解决ajax跨域问题

@方法一 1、右键谷歌快捷方式,选择“属性”。 2、打开属性窗口,切换到“快捷方式”选项卡。 3、在目标路径的后面添加【 --disable-web-security】,其中chrome.exe与--...
  • sky_beyond
  • sky_beyond
  • 2017年01月05日 15:36
  • 455

JS跨域问题以及采用JSONP方式解决跨域问题

在做项目的时候,客户要做成客户端和服务端两部分,客户端向服务端进行认证,我开始的时候没有直接替换ip地址,后来采用ip地址替换之后,出现了问题,后台可以收到访问的请求,但是无法拿到后台返回的信息,后来...
  • wangyang1354
  • wangyang1354
  • 2016年05月18日 20:08
  • 1820

跨域解决方案之一---->JQuery.Ajax JSONP解决跨域访问

JSONP的最基本的原理是:动态添加一个标签,而script标签的src属性是没有跨域的限制的。本文后端使用servlet做测试:前端页面代码: Insert title here $(...
  • puyangmengxue
  • puyangmengxue
  • 2015年02月02日 13:33
  • 1174

JAX-RS开发(三):ajax访问REST服务时的跨域问题以及jsonp解决方案

同源策略是指:协议、主机和端口都相同。我们可以在本地机器上部署2个不同端口的tomcat,让一个tomcat下的应用通过ajax访问另一个tomcat下的rest服务,这样就存在跨域访问问题了。修改c...
  • aitangyong
  • aitangyong
  • 2015年04月13日 19:55
  • 2220

Jsonp解决Ajax跨域问题

一、介绍 最近跨域问题比较多,而且自己刚好也看到这一块,就总结了一下,关于JSONP的东西百度的话东西确实很多,很多人都是复制别人的,如此下去,其实找的资料就那么几份,关键是我还看不懂,可能是能...
  • zezezuiaiya
  • zezezuiaiya
  • 2018年01月25日 10:27
  • 57

jsonp解决ajax跨域问题!

利用jsonp解决ajax跨域问题:(至于success里面的操作可以忽略:) 某工程下ajax请求代码: var isVisible = true; function getLog() { i...
  • u012572955
  • u012572955
  • 2015年08月20日 15:44
  • 1285

jsonp解决Ajax跨域问题

什么是跨域?                 1、域名不同。                 2、域名相同,端口不同。                 3、由于同源策略,安全性考虑设计如此。    ...
  • u013028876
  • u013028876
  • 2017年11月10日 11:27
  • 123

jsonp解决ajax跨域问题

“已阻止交叉源请求:同源策略不允许读取…” jsonp的基本的原理是:动态添加一个标签,而script标签的src属性是没有跨域的限制的。 (也就是可以用访问xxx.com上的js文件,而不受跨域的影...
  • baikeliang
  • baikeliang
  • 2014年12月03日 17:38
  • 400
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用JSONP解决ajax跨域问题
举报原因:
原因补充:

(最多只允许输入30个字)