建设网站费用多少,网站建设html模板,视频拍摄制作报价明细,网站 linux 服务器配置JSONP
JSONP是什么 JSONP(JSON With Padding),是一个非官方的跨域解决方案#xff0c;纯粹凭借程序员的聪明才智开发出来的#xff0c;只支持get请求。JSONP 怎么工作的#xff1f; 在网页有一些标签天生具有跨域能力#xff0c;比如#xff1a;img link iframe script. …JSONP
JSONP是什么 JSONP(JSON With Padding),是一个非官方的跨域解决方案纯粹凭借程序员的聪明才智开发出来的只支持get请求。JSONP 怎么工作的 在网页有一些标签天生具有跨域能力比如img link iframe script. JSONP就是利用Script标签的跨域能力来发送请求的JSONP的使用 动态的创建一个script标签 var scriptdocument.createElement(“script”);设置script 的src,设置回调函数
script.src http://localhost:3000/testAJAX?callbackabc;
function abc(data) {
alert(data.name);
}3. 将script 添加到body中document.body.appendChild(script)4.服务器中路由的处理router.get(/testAJAX , function (req , res) {
console.log(收到请求);
var callback req.query.callback;
var obj {
name:孙悟空, age:18
}
res.send(callback(JSON.stringify(obj)));
});案例分析
html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title原理演示/titlestyle#result {width: 300px;height: 100px;border: solid 1px #78a;}/style
/headbodydiv idresult/divscript//处理数据function handle(data) {//获取 result 元素const result document.getElementById(result);result.innerHTML data.name;}/script!-- script srchttp://127.0.0.1:5500/%E8%AF%BE%E5%A0%82/%E4%BB%A3%E7%A0%81/7-%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js/script --script srchttp://127.0.0.1:8000/jsonp-server/script
/body/htmlserver:
//jsonp服务
app.all(/jsonp-server,(request, response) {// response.send(console.log(hello jsonp));const data {name: 德仔dezai};//将数据转化为字符串let str JSON.stringify(data);//返回结果response.end(handle(${str}));});
