jsonp

需求：项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在500M内，因此自己需要在项目中进行文件上传部分的调整和配置，自己将大小都以501M来进行限制。 第一步： 前端修改 由于项目使用的是BJUI前端框架，并没有使用框架本身的文件上传控件，而使用的基于jQuery的Uploadify文件上传组件，在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分，这部分代码封装在bjui-all.js文件中， 在bjui-all.js文件中的全局变量定义中有以下部分代码，这就是定义的有关于上传的Uploadify控件的重要变量： // 文件上传对象 function FileUploader(fileLoc, mgr) { var _this = this ; this .id = fileLoc.id; this .ui = { msg: null , process: null , percent: null , btn: { del: null , cancel: null ,post: null ,stop: null }, div: null }; this .isFolder = false ; // 不是文件夹 this .app = mgr.app; this .Manager = mgr; // 上传管理器指针 this

Promise就是一个给一步操作提供的容器，在这个容器里，有两个阶段无法改变的阶段，第一个阶段就是Pending(进行)，第二个阶段就是结果阶段，包含Fulfilled(成功)、Rejected(失败)两个结果。 这两个结果不会改变。然后结果结束后就会用then来执行相应的结果。 new Promise((resolve,reject)=>{ 相应操作 if(异步操作成功){ resolve(value) }else{ reject(error) } }).then(value=>{ // 成功后操作 }，error=>{ // 失败后操作 }) 用Promise封装jsonp方法 import originJSONP from 'jsonp' // 这时候Url是不带参数的，我们让data变成参数，data在具体定义获取具体内容的时候再单独配置 export default function jsonp(url, data, option) { // 看url是否有问号的意思就是只在第一次加参数的时候加一个问号，剩下就是加& url += (url.indexOf('?') < 0 ? '?' : '&') + param(data) return new Promise((resolve, reject) => { originJSONP(url, option, (err,

HTML页面代码： <script type="text/javascript"> function UrlSearch(){ var name,value; var str=location.href; //取得整个地址栏 var num=str.indexOf("?") str=str.substr(num+1); //取得所有参数 stringvar.substr(start [, length ] var arr=str.split("&"); //各个参数放到数组里 for(var i=0;i < arr.length;i++){ num=arr[i].indexOf("="); if(num>0){ name=arr[i].substring(0,num); value=arr[i].substr(num+1); this[name]=value; } } } function jsonp(){ var Request=new UrlSearch(); //实例化 var goods_name = Request.name $.ajax({ type: "GET", async: false, url:"http://test.com/jp4.php", dataType: "jsonp", data:{goods_name:goods_name}, jsonp:

JSONP 是一种借助于 script 标签发送跨域请求的技巧 其原理就是在客户端借助 script 标签请求服务端的一个动态网页（php 文件） 服务端的这个动态网页返回一 段带有函数调用的 JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。 以后绝大多数情况都是采用 JSONP 的手段完成不同源地址之间的跨域请求 总结： 由于 XMLHttpRequest 无法发送不同源地址之间的跨域请求，所以借助于script标签 来实现，并称之为 JSONP （如果不了解原理，先记住怎么用，多用一段时间再 来看原理） 1. JSONP 需要服务端配合，服务端按照客户端的要求返回一段 JavaScript 调用客户端的函数 2. 只能发送 GET 请求 JSONP客户端 function jsonp(url, params, callback) { var funcName = 'jsonp_' + Date.now() + Math.random().toString().substr(2, 5) if (typeof params === 'object') { var tempArr = [] for (var key in params) { var value = params[key] tempArr.push(key + '=' + value)

window.callback = function(result) { console.log(result); }; var JSONP = document.createElement('script'); JSONP.type = 'text/javascript'; JSONP.src = "https://opendata.baidu.com/api.php?query=%E5%85%A8%E5%9B%BD&resource_id=39258&tn=wisetpl&format=json&cb=" + callback; document.getElementsByTagName("head")[0].appendChild(JSONP); 理解如下： 1、jsonp的原来就是动态向html中插入script标签 2、此script标签的src是请求的接口，因为src是get的请求方式，所以jsonp只适合用于get请求 3、src链接后面的cb回调函数，是需要和后台协商一致的，后台会把数据当做回调函数的参数传进来，所以jsonp是需要后台配合的 4、由于script标签使用src引入资源，在当前页面中是会直接执行的，所以等结果请求返回之后，cb回调函数就是立即执行，拿到后台的数据 至此完毕 来源： https://www.cnblogs.com/gopark/p

一、跨域问题 　　 1、方案一：HTTP请求头 　　　　AServlet import com.alibaba.fastjson.JSON; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/aServlet") public class AServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req,resp); } //方法一：使用请求头解决跨域问题 @Override protected void doGet(HttpServletRequest req,

1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）； 3、于是可以判断，当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理； 4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据； 5、这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。 6、客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。 7、为了便于客户端使用数据，逐渐形成了一种非正式传输协议

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。 两个页面，域名 协议 端口都相同。表示同源 受前面所讲的浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。 跨域：受前面所讲的浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。 JSONP跨域：利用script标签里的src属性，载入一个动态执行的js脚本。 JSONP跨域的优点： 兼容性好。 无需XMLHttpRequest。 JSONP跨域的缺点： 只能发送get请求。 使用JSONP跨域，只要是个网站都可以拿到b.com里的数据，存在安全性问题。需要网站双方商议基础token的身份验证，这里不详述。 可能被注入恶意代码，篡改页面内容，可以采用字符串过滤来规避此问题。 会继续回来补充的.... 来源： https://www.cnblogs.com/JiAyInNnNn/p/10967971.html

vue-resource插件开源地址https://github.com/pagekit/vue-resource ps：除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求 之前的学习中，如何发起数据请求？ 常见的数据请求类型？ get post jsonp JSONP的实现原理 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全； 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）； 具体实现过程： 先在客户端定义一个回调方法，预定义对数据的操作； 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口； 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行； 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了； 实现一个JSONP的请求demo const http = require ( 'http' ) ; // 导入解析 URL 地址的核心模块 const