js跨域访问的一个helloworld程序_跨域 asmx js helloworld-CSDN博客

本文链接：https://blog.csdn.net/u010662488/article/details/48833411

一、首先简单介绍一下本文用到相关知识：
1.什么时候会产生跨域
这里写图片描述
2.JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议
3.Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）

二、跨域访问的简单描述：比如函数A需要获取类中的B的参数，并执行一些操作，我就可以通过跨域调用B中的函数，使B中的函数主动调用A并传入参数，将操作的执行者完全由A函数转换成B中的函数。

三、跨域访问helloworld
spring mvc中controller代码

@RequestMapping("/hello.json")
@ResponseBody
public void helloJs(HttpServletResponse response) throws IOException{
    PrintWriter out = response.getWriter();
    String renderHTML = "jsonpCallback({'success':false,'data':'HelloWorld'})";
       out.println(renderHTML);
    return ;
}

四、html和js代码

<DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>

</head>

<body>
    <button onclick="startConnect()">Come</button>
</body>
<script type="text/javascript">
    function jsonpCallback(say) {
       alert(say.data);
    }

    function startConnect(){//将script用函数打印出来可以控制访问的时间，不会在页面加载的时候就发送请求，js加载的时候网页会停止渲染，浏览器会失去响应,所以一般把js代码放在页面的底部
        var url = "http://wifi.weixin.qq.com/biz/device/hello.json?callback=jsonpCallback";//此处访问的是一个cgi，当然也可以是一个远程的js文件，比如http://xxx/xxx.js,访问改js文件时，会执行js文件中的代码
        var script = document.createElement('script');  
        script.setAttribute('src', url);  
        document.getElementsByTagName('head')[0].appendChild(script);
    }

</script>
</html>