原生JS实现JSONP跨域访问的问题

时间:2022-01-05 12:29:40
我知道如何使用script标签和jquery实现jsonp的跨域访问。但用原生js实现,可以返回数据,但返回的js代码不执行。


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>CrossDomain</title>
<script type="text/javascript">
var showName = function(person){
document.write(person.name);
};

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://10.0.4.226:8080/ServerApp/dataserv.do?callback=showName";
document.getElementsByTagName('head')[0].appendChild(script);

</script>
</head>
<body>

</body>
</html>


通过浏览器可查看到新加的js节点被添加到DOM中了,而且也向代码中的服务器发送了请求,请求也正常返回JS代码。但函数不执行,页面没有输出json对象的name属性。

10 个解决方案

#1


你看到的返回JS代码是什么?

#2


引用 1 楼 xuzuning 的回复:
你看到的返回JS代码是什么?


showName({"name":"zhangsan","age":30})

这是返回的js代码

#3


我用你的代码做了个测试,来证明你的 js 代码并无问题
原生JS实现JSONP跨域访问的问题

#4


var showName = function(person){
document.open();
document.write(person.name);
        alert(person.name);
    };

#5


看看是不是你创建的script标记在showname函数前面啦。
你后创建的script标记得在showname下面才行。
就是得在代码第18行下面。

#6


引用 5 楼 u010036886 的回复:
看看是不是你创建的script标记在showname函数前面啦。
你后创建的script标记得在showname下面才行。
就是得在代码第18行下面。


是在showName的后面添加的script标签。

#7


引用 3 楼 xuzuning 的回复:
我用你的代码做了个测试,来证明你的 js 代码并无问题
原生JS实现JSONP跨域访问的问题


我console.log一下,发现showName是执行的。但是document.write不能在页面上打印。

#8


引用 4 楼 slwsss 的回复:
var showName = function(person){
document.open();
document.write(person.name);
        alert(person.name);
    };


我在代码里加上上document.open()后就可以在页面上打印出值了。
但不明白这是为啥?
能够给讲解一下?

#9


引用 8 楼 NineTyNine_LP 的回复:
页面加载完后输出流已经关闭,document.write就没有效果了

#10


引用 9 楼 slwsss 的回复:
Quote: 引用 8 楼 NineTyNine_LP 的回复:
页面加载完后输出流已经关闭,document.write就没有效果了


原生JS实现JSONP跨域访问的问题

#1


你看到的返回JS代码是什么?

#2


引用 1 楼 xuzuning 的回复:
你看到的返回JS代码是什么?


showName({"name":"zhangsan","age":30})

这是返回的js代码

#3


我用你的代码做了个测试,来证明你的 js 代码并无问题
原生JS实现JSONP跨域访问的问题

#4


var showName = function(person){
document.open();
document.write(person.name);
        alert(person.name);
    };

#5


看看是不是你创建的script标记在showname函数前面啦。
你后创建的script标记得在showname下面才行。
就是得在代码第18行下面。

#6


引用 5 楼 u010036886 的回复:
看看是不是你创建的script标记在showname函数前面啦。
你后创建的script标记得在showname下面才行。
就是得在代码第18行下面。


是在showName的后面添加的script标签。

#7


引用 3 楼 xuzuning 的回复:
我用你的代码做了个测试,来证明你的 js 代码并无问题
原生JS实现JSONP跨域访问的问题


我console.log一下,发现showName是执行的。但是document.write不能在页面上打印。

#8


引用 4 楼 slwsss 的回复:
var showName = function(person){
document.open();
document.write(person.name);
        alert(person.name);
    };


我在代码里加上上document.open()后就可以在页面上打印出值了。
但不明白这是为啥?
能够给讲解一下?

#9


引用 8 楼 NineTyNine_LP 的回复:
页面加载完后输出流已经关闭,document.write就没有效果了

#10


引用 9 楼 slwsss 的回复:
Quote: 引用 8 楼 NineTyNine_LP 的回复:
页面加载完后输出流已经关闭,document.write就没有效果了


原生JS实现JSONP跨域访问的问题