工作随记:jsonp跨域接口测试

前端之家收集整理的这篇文章主要介绍了工作随记:jsonp跨域接口测试前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

原先测过这个接口,前后端同源(域名,协议,端口相同),开发提供的文档:@H_502_15@

 @H_502_15@

$.post("http://host/url",{
        data1: "data1",data2: "data2",data3: "data3"
    },
  function(data){console.log(JSON.stringify(data))}
)
测试接口发出的请求和响应如下: 响应是json格式
请求:
post
http://host/url post data: data1=data1&data2=data2&data3=data3 响应: {"retCode": null,"retMsg": null,"isSucess": true,"message": { "id": "100001" }}

 @H_502_15@

现在其他系统需要请求该数据,json跨域需改成jsonp。改成jsonp之后,开发提供的文档:
$.ajax({
    url: "http://host/url",//请求地址
    type: "GET",//请求方式变了
    dataType: "JSONP",//数据格式设定jsonp
    jsonp:"callback",//验证参数的名称
    data: {
        data1: "data1",success: function (data) { console.log(JSON.stringify(data)) }
});
 
测试接口发出的请求如下响应结果返回格式:函数(参数),参数=json串
简单理解(深入的网上找资料吧): 前端跨域发起请求时,指定函数获取到响应之后再调用函数解析出里面包含的json串,从而实现跨域数据访问。
 
JSONP请求:
get
http://host/url param: callback=testcallback&data1=data1&data2=data2&data3=data3 #post请求变成了get请求,且多了一个参数testcallback函数是开发设定的
响应:
testcallback({"retCode": null,"message": { "id": "100001" }}) 
 


关于是否同源:

分享图片@H_502_15@

 @H_502_15@

the end!

猜你在找的Json相关文章