- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
https://www.baidu.com/sugrec?prod=pc&wd=用户输入的文字&cb=后端要调用的前端定义的全局函数名
。 会用jsonp的方式来请求后端数据,把后端数据通过Promise实例返回.
它内部会创建一个 临时的唯一方法名 如 jQuery_202301010101 。并自动生成一个全局函数,该函数的功能就是把传入的入参resolve()出去.
window[`jQuery_202301010101`] = function (data) {
resolve(data); //把data传递给了resolve函数,也就是传递给了成功的回调函数,所以jsonp后面的then就会执行了。
}
并把这个 临时的唯一方法名 通过构建一个script标签通过get发送请求传递给后端.
之后后端会返回一段动态的js代码,如 临时的唯一方法名(前端想要的数据) 如 jQuery_202301010101({name:'6666',list:[{id:1,text:'文字1'},{id:2,text:'文字2'}]}) .
浏览器会把后端返回的 jQuery_202301010101({name:'6666',list:[{id:1,text:'文字1'},{id:2,text:'文字2'}]}) 当成js代码在全局作用域中执行.
jQuery_202301010101({name:'6666',list:[{id:1,text:'文字1'},{id:2,text:'文字2'}]})
//相当于:window[`jQuery_202301010101`]({name:'6666',list:[{id:1,text:'文字1'},{id:2,text:'文字2'}]})
window[`jQuery_202301010101`] = function (data) {
resolve(data); //把data传递给了resolve函数,也就是传递给了成功的回调函数,所以jsonp后面的then就会执行了。
}
此时这个Promise实例的状态为"fulfilled",值就为后端要返回的json数据,如 {name:'6666',list:[{id:1,text:'文字1'},{id:2,text:'文字2'}]} .
{name:'6666',list:[{id:1,text:'文字1'},{id:2,text:'文字2'}]}
,并重新渲染页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input id="search-word" />
<ul id="suggestions"></ul>
<script>
function jsonp(options) {
return new Promise((resolve, reject) => {
const { url, jsonp, data } = options;
let callbackName = `jQuery_${Date.now()}`; //1.或者创建一个临时的、唯一的方法名。
//给window添加一个全局变量,变量名为方法名,值是一个只会给后端调用一次的函数。
window[callbackName] = function (data) {
delete window[callbackName];
document.body.removeChild(script);
resolve(data); //把data传递给了resolve函数,也就是传递给了成功的回调函数,所以jsonp后面的then就会执行了。
};
//动态创建一个类型为script的对象或者说元素
let script = document.createElement("script");
let queryStr = url.indexOf("?") === -1 ? "?" : "&";
for (let key in data) {
queryStr += `${key}=${data[key]}&`;
}
script.src = `${url}${queryStr}${jsonp}=${callbackName}`; //得到一个url地址。
script.onerror = (error) => reject(error);
document.body.appendChild(script); //向body的尾部添加一个script对象,之后浏览器就会向服务器发起一个get请求。请求回来的其实是字符串,但浏览器会把那些字符串当成js代码来执行。//后端返回的数据格式为:前端传递给的函数名(前端想要的数据对象) 如:jQuery_998888({name:'前端想要的数据',...}) //浏览器在拿到这个后端返回的数据后,就相当于在全局作用域下运行了一遍后端的代码。
});
}
let searchWord = document.getElementById("search-word");
let suggestions = document.getElementById("suggestions");
const handleInput = (event) => {
let wd = event.target.value;
const thePromise = jsonp({
url: "https://www.baidu.com/sugrec", //也可能为https://www.baidu.com/sugrec?prod=pc
jsonp: "cb", //百度的后端规定了这个字段就叫cb。但网易的可能的约定为callback或者cbf之类的,反正是后端规定的。
data: { prod: "pc", wd }, //其它要传递给服务器的数据,它们都会拼接到查询字符串中。这个有些字段是前端定的,有些字段是后端定的。
});
thePromise
.then((result) => {
//这个就是后端返回的 jQuery_998888({name:'前端想要的数据',...}) 中的 {name:'前端想要的数据',...}。
let { g } = result;
if (g) {
0;
let html = "";
for (let i = 0; i < g.length; i++) {
html += `<li>${g[i].q}</li>`;
}
suggestions.innerHTML = html;
}
})
.catch((error) => {
console.log(error);
});
};
searchWord.addEventListener("input", handleInput);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jsonp</title>
</head>
<body>
动态jsonp。这里是自动生成的`Live Server`起起来的;
<script>
let callbackName = `JQuery_${Date.now()}`;
console.log(`动态函数变量名:callbackName-->`, callbackName);
window[callbackName] = async (data) => {
console.log(`后端返回的json数据:data-->`, data);
await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(data666);
}, 300000);
});
// 执行结束后,移除多余代码。
console.log(`执行结束后,移除多余代码。`);
window[callbackName] = null;
document.body.removeChild(script);
};
let script = document.createElement("script");
script.src = `http://localhost:8111/sugrec.js?cb=${callbackName}`;
console.log(`动态生成的脚本标签:script-->`, script);
document.body.appendChild(script);
</script>
</body>
</html>
// 这里是用node起起来的,服务器端口为8111;
const http = require('http')
const url = require('url')
http.createServer((req, res) => {
res.setHeader('Content-Type', 'application/javascript')
const { query: { cb } } = url.parse(req.url || '', true)//这里是为了让后端拿到前端定义的那个函数的函数名。
console.log(`cb-->`, cb);//这里是在命令行中打印的。
const jsonObj = { 'id': 100, name: '这个是后端构建出来的json数据' }//这个就是后端要返回的json数据。
//let script = `${cb}(${jsonStr})`//实际上大多数的jsonp交互中,后端返回的代码就是这个格式。
const jsonStr = JSON.stringify(jsonObj)
let script = `
// 这里是服务器那边动态生成的js代码。
console.log('开始执行服务器返回的动态js代码。')
${cb}(${jsonStr});
console.log('结束执行服务器返回的动态js代码。')
`
res.end(script);
}).listen(8111, () => {
console.log(`服务器地址为: http://localhost:8111`);
})
最后此篇关于JSONP前端流程的文章就讲到这里了,如果你想了解更多关于JSONP前端流程的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
如果可能的话,我想在答案中举一个具体的例子。 为了解释起见,我们这里有三个玩家。 我的服务器 (myserver.com) 客户端服务器 (myclient.com) 客户用户(通过 myclient
我想通过 JSONP 提供 Web 服务,并且想知道是否需要清理回调参数中的值。 我当前的服务器端脚本目前看起来像这样(或多或少。代码在 PHP 中,但实际上可以是任何东西。): header("Co
我有一个每分钟更新一次数据的 Web 服务器,并且希望使该数据可供所有类型的客户端使用。为了减少带宽,我使用 IF-MODIFIED-SINCE 和/或 IF-NONE-MATCH 设置 PHP 脚本
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 7 年前。 Improv
我正在努力使用 vue-resource 发出 JSONP 请求。任何人都可以提供一些工作示例来演示定义 jsonp 回调、处理 Vue 组件中的调用等的正确方法。 谢谢 **编辑:**对于其他人,让
我正在尝试获取 AngularJS 中 rest api 的 JSON 输出。以下是我面临的问题: Rest api url 中有端口号,AngularJS 为变量插入端口号。为此,我尝试了多种解决方
代码: 当我在浏览器中输入网址时,我可以看到所有对象,例如: link 但我似乎无法让它在我的代码中工作,我是否遗漏了什么? angular.module('ionicApp', ['ionic']
我在连接最近了解 JSONP 的一些点时遇到了麻烦。这是我的理解: 由于同源策略,禁止任何内容(包括 JSON)的跨域 XmlHttpRequests。这可以防止 XSRF。 您可以拥有一个带有返回
我正在使用 JSONP 进行 Ajax 调用以从第三方(与我的站点不同的域)获取 JSON 数据,它在 Chrome 和 Firefox 上工作但在 IE 上失败(9 和 10 是我试过的版本) .在
django rest 框架发行说明声称在 0.3.0 中重新添加了 JSONP 支持。我还在框架中找到了一个 JSONPRenderer 类。但是,我似乎找不到有关如何使用该东西的任何文档.....
我有一个使用 JSONP 的 WCF 服务(托管在 Azure 中)。它在 HTTP 上工作得很好,即,如果它仅接收 JSON,则仅返回 JSON,如果它接收 JSONP,则返回 JSONP。但是,一
有人知道为什么我的ajax失败吗? 我从这里通过 JSONP 获取数据: JSON Data 您可以使用此代码,并注意“警报”如何永远不会执行: $(document).ready(function(
我正在使用 jaubourg 的 jquery-jsonp module从与我的网站所在的域不同的域中获取数据。我从 jQuery 的 ajax 开始使用这个模块函数不支持 JSONP 请求的错误处理
我有一个使用 Jquery Mobile 制作移动 Web 应用程序的项目。我希望我的应用程序能够使用来自跨域 REST Web 服务的数据。很多人说用JSONP。但我仍然困惑如何使用它以及如何构建支
我正在使用 Angular 的 $http.jsonp() 请求,它成功返回了包含在函数中的 json: var url = "http://public-api.wordpress.com/rest
基于 Please explain JSONP ,我知道可以使用 JSONP 来绕过同源策略。 但是为了做到这一点,页面必须使用 标签。 我知道页面可以动态地发出新的脚本标签,例如: docum
在 jQuery 中使用 JSONP 时是否可能捕获错误?我已经尝试了 $.getJSON 和 $.ajax 方法,但都不会捕获我正在测试的 404 错误。这是我尝试过的方法(请记住,这些都可以成功运
我正在为一个带有嵌入推文的页面使用内容安全策略,我收到了 https://cdn.syndication.twimg.com 的报告。 ,这在我的政策中是不允许的。 这是一个很长的政策,但相关部分
使用 mootools 和 JsonP 我在 Firefox 错误控制台中收到“无效标签”错误 JsonP 似乎可以工作(我正确地获取了数据) {"jsondata":[{"title":"title
JSONP (JSON with Padding) 是 JSON 的一种 使用模式,可以让网页从别的网站那获取数据,即跨域读取数据 为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP
我是一名优秀的程序员,十分优秀!