JSONP怎样实现跨域啊？

浴火_凤凰 2010-12-07 02:55:22

谁给举个小例子啊？使用JSONP实现跨域的那种？

...全文

432 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

Mr-Jee 2010-12-07

打赏
举报

[Quote=引用 10 楼 kingwolf_javascript 的回复:]

但是一般什么情况下会使用？
是需要不在自己域名下面的数据的时候还是需要不在自己域名下面的的脚本变量或者对象的时候？
[/Quote]
目的是为了数据
形式是json等js认识的

浴火_凤凰 2010-12-07

打赏
举报

但是一般什么情况下会使用？
是需要不在自己域名下面的数据的时候还是需要不在自己域名下面的的脚本变量或者对象的时候？

浴火_凤凰 2010-12-07

打赏
举报

[Quote=引用 8 楼 sharp_ice 的回复:]
你要是去分析那个所谓的JSONP的源代码，其实到头来关键的地方还是script标签
知道原理了，想怎么弄都行，我不喜欢依赖框架

script的方法，是加载一个资源，这个资源只要浏览器能访问到就行，不管是什么各种各样的网址。加载完成以后，就把它当做代码来执行。只是这种方式只能用GET方式传参数。

Ajax的httpRequest因为安全限制是不允许跨域访问的，所以很多人试图用httpR……
[/Quote]
蓝色冰点，十分感谢！
看来我说对了，知道了原理就好说了。O(∩_∩)O~

蓝色_冰点 2010-12-07

打赏
举报

你要是去分析那个所谓的JSONP的源代码，其实到头来关键的地方还是script标签
知道原理了，想怎么弄都行，我不喜欢依赖框架

script的方法，是加载一个资源，这个资源只要浏览器能访问到就行，不管是什么各种各样的网址。加载完成以后，就把它当做代码来执行。只是这种方式只能用GET方式传参数。

Ajax的httpRequest因为安全限制是不允许跨域访问的，所以很多人试图用httpRequest来实现，再牛B的代码也根本行不通

以上例子，只为说明原理

浴火_凤凰 2010-12-07

打赏
举报

原理有点明白了，但是没有看出在什么情况下需要使用这种方式。
script引入的任何域的文件都被认为是同域的。
JSONP的原理就是利用了这个特性吧？
上面的例子的目的是什么？

蓝色_冰点 2010-12-07

打赏
举报

使用document.createElement的目的是可以让你在页面运行的时候，动态的跨域调用，想什么通过什么事件来触发都可以
当然你要直接写<script type="text/javascript" src="http://abc.com/js.php?t=1234" ></script>这样的HTML代码也行，但就只能这么一次过了，不能动态

至于src所指定的网址，是什么东西都可以，asp,jsp,php甚至是html等等都可以，但它们最终输出的内容都要是可以运行的javascript代码，而不是HTML代码

浴火_凤凰 2010-12-07

打赏
举报

[Quote=引用 1 楼 sharp_ice 的回复:]
原理很简单：
1.当你需要的跨域时候，创建一个script标签，加到head中，设置这个script的src值为其它域的url，最好加上一个随机参数，以防WEB缓存机制。如生成这样的一个标签： <script type="text/javascript" src="http://abc.com/js.php?t=1234" ></script> 当然这应该通过document.createEle……
[/Quote]

不好意思，还是有点不太明白。
1.必须要使用document.createElement吗？直接使用
<script type="text/javascript" src="http://abc.com/js.php?t=1234" ></script>
直接写在HTMl文件里面不行吗？
2.src="http://abc.com/js.php?t=1234与src="http://abc.com/js.js?t=1234"
有什么不同？
假设JS文件与PHP文件的输出内容相同。

hch126163 2010-12-07

打赏
举报

蓝色_冰点 2010-12-07

打赏
举报

<html>

<head id="head">

    <meta http-equiv="Content-Type"

        content="text/html; charset=gb2312" />

    <title>无标题文档</title>

    <style type="text/css">

        body,html

        {

            overflow:hidden;

            height:100%;

        }

    </style>

<script language="javascript" type="text/javascript">

    //这个是跨域JS的接口函数

    function Run(data){

        alert(data);

    }

    

    function Call(){

        var t=new Date(); //时间参数，防缓存

        var value=document.getElementById("content").value;

        var dom=document.createElement("script"); //创建dom

        dom.type="text/javascript"; 

        

        //设置URL为跨域的JS地址，这个地址生成的JS，应该跟据约定调用Run

        dom.src="http://localhost/web/js.asp?content="+value+"&t="+t.getTime();

        //加到head中，注意，本例中的head标签有ID，而且也是head,当然你可以自己指定

        document.getElementById("head").appendChild(dom);

    }

</script>

</head>

<body>

    <input id="content" type="text" value="Hello" />

<input type="button" value="跨域调用" onclick="Call();" />

</body>

</html>

这是js.asp的内容，这么简单，不明白我也不解释了

<%

dim content

content=request("content")

%>

var content="<% =content %>";

Run(content);

Mr-Jee 2010-12-07

打赏
举报

http://www.css88.com/archives/2372

这个DEMO够简单

蓝色_冰点 2010-12-07

打赏
举报

原理很简单：
1.当你需要的跨域时候，创建一个script标签，加到head中，设置这个script的src值为其它域的url，最好加上一个随机参数，以防WEB缓存机制。如生成这样的一个标签： <script type="text/javascript" src="http://abc.com/js.php?t=1234" ></script> 当然这应该通过document.createElement来完成。
2.那个js.php的内容呢，其实就是一个JS文件，当然内容是根据需要可以动态生成的，但你应该制定好一个接口