【笔记】JSONP跨域访问

发表于 更新于 阅读次数：

前言

JSONP跨域访问

原理的实践

  • 创建一个hello.json文件，文件内容编写js格式的函数，对象作为函数的参数
1
hello({"name":"zhangsan"})
  • 先定义回调函数
1
2
3
function hello(data) {
  console.log(data.name);
}
  • 通过script标签的src属性引入json文件
1
<script src="hello.json"></script>

通过jQuery实现进阶

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
  url:"http://127.0.0.1:80/hello.json",
  // jsonp只能支持get请求，即便定义的不是get或者没定义
  type:"get",
  // dataType返回值类型必须定义jsonp才能实现jsonp方式的跨域
  dataType:"jsonp",
  // 指定参数名称，可以省略有默认值
  jsonp: "callback",
  // 指定回调函数名称，可以省略有默认值
  jsonpCallback: "hello",
  success:function (data){
    alert(data.name);
  }
});

完成