八里庄网站建设,北京12345网上投诉平台,一元云购 网站开发,最新获取网站访客qq接口无论做什么#xff0c;都请记得那是为自己而做#xff0c;那就毫无怨言#xff01;
【1. 跨域】
1.什么是跨域
跨域是指浏览器不能执行其他网站的脚本。它是浏览器同源策略造成的#xff0c;是浏览器对JS实施的安全限制。 2.常见的跨域场景 3.什么事同源策略
#xff…无论做什么都请记得那是为自己而做那就毫无怨言
【1. 跨域】
1.什么是跨域
跨域是指浏览器不能执行其他网站的脚本。它是浏览器同源策略造成的是浏览器对JS实施的安全限制。 2.常见的跨域场景 3.什么事同源策略
所谓同源是指“域名”、“协议”、“端口”均为相同
注意跨域限制是浏览器的机制如果直接在服务端请求是不会触发跨域限制的。 【2. JSONP】
Jsonp(JSON with Padding) 是 json 的一种使用模式可以让网页从别的域名网站那获取资料即跨域读取数据。为什么我们从不同的域网站访问数据需要一个特殊的技术( JSONP )呢这是因为同源策略。同源策略它是由 Netscape 提出的一个著名的安全策略现在所有支持 JavaScript 的浏览器都会使用这个策略。 如客户想访问 : https://www.runoob.com/try/ajax/jsonp.php?jsoncallbackcallbackFunction。假设客户期望返回数据[“customername1”,“customername2”]。真正返回到客户端的数据显示为: callbackFunction([“customername1”,“customername2”])----JSONP 格式数据 demo.html
script srcdemo.js/script
script
sayHello();
/scriptdemo.js
function sayHello(){alert(我是ikunGG练习时长两年半);
}调用和设置方法换了一个位置
demo.html
script
function sayHello (str)
{alert(str);
}
/script
script srcdemo.js/scriptdemo.js
sayHello(我是ikunGG练习时长两年半);JSONPJSONP其实就是模仿这个方法将调用传入的数据前端设置方法接收
test.html
script
function sayHello(str) {console.log(str);
}
/script
script srctest.js/scripttest.js:此时我们的test.js如果传入的是参数
sayHello({info: [{id:10001,name: 小明,age: 18,sex: 男},{id:10002,name: 小兰,age: 15,sex: 男},{id:10003,name: 小红,age: 14,sex: 男}]
})我们会知道如果使用JSONP跨域一定和后端是约定俗称的数据格式,JSONP数据很不安全除非你比较信任数据来源如果涉及到涉密信息一定不能使用JOSNP比如数据中有用户的手机号身份证号码等等
比如京东某个手机的 评论的数据就是JSONP格式 fetchJSON_comment98({productAttr:null,productCommentSummary……,firstCategory:9987,secondCategory:653,thirdCategory:655,aesPin:null,days:4,afterDays:0}]});fetchJSON_comment98({数据})
【1】使用原生js是可以模拟发送JSONP请求的
input typebutton value点击发送请求 idbtn
script
var btn document.getElementById(btn);
function fetchJSON_comment98(JSONData) {console.log(JSONData)
}
btn.onclick function() {// 创建一个script标签var oScript document.createElement(script);// 追加节点document.body.appendChild(oScript);// 设置src属性oScript.src https://club.jd.com/comment/productPageComments.action?callbackfetchJSON_comment98productId100009345181score0sortType5page1pageSize10isShadowSku0rid0fold1// 发送请求后立即删除这个scriptdocument.body.removeChild(oScript)
}
/script然后本地需要设置一个固定的方法名称:fetchJSON_comment98()
function fetchJSON_comment98(JSONData) {console.log(JSONData)
}我们就可以拿到京东某个商品的评论的数据【在本地的浏览器拿到服务器A存放京东商品评论的数据】 【2】jQuery的JSONP
input typebutton value点击发送请求 idbtn
script srcjs/jquery.min.js/script
script
$(#btn).click(function(){$.ajax(https://club.jd.com/comment/productPageComments.action?callbackfetchJSON_comment98productId100009345181score0sortType5page1pageSize10isShadowSku0rid0fold1,{dataType: jsonp, //请求类型jsonpCallback: fetchJSON_comment98, //设置回调函数名称success: function(JSONdata) {console.log(JSONdata)}})
})
/scriptjQuery帮我们封装好了JSONP请求: jQuery封装的JSONP请求机理和我们自己写的请求机理是相同的。 创建一个script标签src是含有JSONP格式的跨域请求地址 定义了一个函数函数名是JOSNP格式返回数据的固定名称方法封装到了success中 删除script标签 我们就可以拿到京东某个商品的评论的数据【在本地的浏览器拿到服务器A存放京东商品评论的数据】
