专做尼泊尔的旅行网站,网站架构包括哪些,用vs做网站在安装时要勾选,站群系统的优劣摘要
JSONP 是 JSON with Padding 的缩写#xff0c;是一种解决跨域数据获取的方案。由于浏览器的同源策略限制#xff0c;不同域名之间的前端JS代码不能相互访问到对方的数据#xff0c;JSONP通过script标签的特性#xff0c;实现在不同域名的网页间传递数据。
其原理是…摘要
JSONP 是 JSON with Padding 的缩写是一种解决跨域数据获取的方案。由于浏览器的同源策略限制不同域名之间的前端JS代码不能相互访问到对方的数据JSONP通过script标签的特性实现在不同域名的网页间传递数据。
其原理是在客户端页面上定义一个回调函数 (callback)然后通过script标签向外部服务器请求数据并将定义好的回调函数名称作为参数放在url请求地址里服务器成功接收请求后使用该参数将数据传递给定义好的回调函数并返回客户端页面中定义好的回调函数接收参数后进行处理。
正常的AJAX请求
$.ajax({url: https://qq.com/getdata/,success: function(res) {console.log(res)}
});如果跨域请求浏览器会报错 跨域例如你访问页面的域名是 https://baidu.com/getdata/但是ajax请求的是 https://qq.com/getdata/ ,虽然都是getdata但是其域名不一样浏览器会拒绝请求。 这样的情况下你通过ajax是无法获得请求数据的。
如何解决这个问题jsonp就可以解决。
JSONP数据源代码示例
数据源即ajax请求的接口其返回的是由括号括起来的json数据。服务端需要根据请求中的回调函数名称callback将用户数据包装在函数调用中。
假设是https://www.qq.com/callbackData/index.php
?php// 页面编码header(Content-type:application/json);// 数据源$data array(array(title 90后考上公职3个月开始贪污获刑3年,url https://baijiahao.baidu.com/s?id1780086209787359686),array(title 男子闪婚后闪离 24万彩礼要回8万,url http://dzb.hxnews.com/news/kx/202310/19/2138573.shtml),array(title 神舟十七号船箭组合体转运至发射区,url https://baijiahao.baidu.com/s?id1780150004201916038wfrspiderforpc),array(title 以色列要求本国公民立即离开土耳其,url https://baijiahao.baidu.com/s?id1780107306390790504wfrspiderforpc),array(title 好莱坞将翻拍《你好李焕英》,url https://baijiahao.baidu.com/s?id1780164746410232029wfrspiderforpc));// 返回结果$result array(datalist $data,code 200,msg 获取成功);// 输出callback$resultCallback json_encode($result);echo $_GET[callback] . ( . $resultCallback . );?ajax请求
htmlheadtitlejsonp请求示例/titlemeta http-equivContent-Type contenttext/html; charsetutf-8meta nameviewport contentwidthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalable0,viewport-fitcoverscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script/headbodydiv idapp/divscript$.ajax({url: https://www.qq.com/callbackData/index.php,dataType: jsonp,jsonpCallback: handleJSONPResponse,success: function(res) {console.log(res)}});/script/body
/html结果 通过 dataType: jsonp 就可以成功请求到数据。
作者
TANKING
