jsonp跨域请求的方式
1、jsonp一种请求方式、用于解决一个棘手的问题:
由于浏览器具有同源策略:即可以通过后台去访问其他网站,而不能通过浏览器(ajax请求)访问其他网页或域(阻止ajax请求,但是无法阻止<script src="">请求,所有带src属性的都不阻止
巧妙的实现方式:
创建一个<script>标签,设置它的src属性为需要访问的地址,返回的数据必须是json格式的、只能发get请求
实现原理:
在src里面带一个callback=fun参数,参数的值是需要服务端构造的函数来返回。服务端会返回return Httprequest(fun(数据))然后需要在本地script脚本里面加一个fun函数,函数内容可以是function fun(arg){
console.log(arg)
}
这里的arg就是服务端返回的数据,完成后再删掉这个script标签
实现源码:
script>
function getContent(){
/*
var xhr = new XMLHttpRequest();
xhr.open('GET','http://wupeiqi.com:8001/jsonp.html?k1=v1&k2=v2');
xhr.onreadystatechange = function(){
console.log(xhr.responseText);
};
xhr.send();
*/
/*
var tag = document.createElement('script');
tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
document.head.appendChild(tag);
document.head.removeChild(tag);
*/
$.ajax({
url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',
type: 'POST',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'list'
})
} function list(arg){
console.log(arg);
}
更多:https://www.cnblogs.com/wupeiqi/p/5703697.html
jsonp跨域请求的方式的更多相关文章
- jQuery jsonp跨域请求
跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...
- jQuery ajax的jsonp跨域请求
一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...
- Django学习---jsonp跨域请求
jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...
- jQuery jsonp跨域请求详解
跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
- JSONP跨域请求数据报错 “Unexpected token :”的解决办法
原文 http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Une ...
- jsonp跨域请求响应结果处理函数(python)
接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...
- 原生JavaScript封装的jsonp跨域请求
原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...
- jsonp 跨域请求
背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...
随机推荐
- 模板_LCA
// luogu-judger-enable-o2 #include<bits/stdc++.h> #define maxn 1000002 //#define int long long ...
- python中pip相关命令
用pip安装第三方包的命令 pip install xxx --user 用pip更新第三方包 pip install --upgrade xxx --user 用pip卸载第三方包 pip unin ...
- sh_03_逻辑运算演练
sh_03_逻辑运算演练 # 练习1: 定义一个整数变量 age,编写代码判断年龄是否正确 age = 12 # 要求人的年龄在 0-120 之间 """ 10000 a ...
- window.location.href 兼容性问题 (ie 浏览器下设置失效)
window.location.href 兼容性问题 (ie 下设置失效) window.location.href = "../index.html" (ie 浏览器失效) wi ...
- C# Cache缓存的应用
缓存类Cache的使用 直接先上代码 public class CacheHelper { private static string fileName = @"D:\huage.txt&q ...
- x-pack邮件报警功能
1):修改elasticsearch.yml xpack.notification.email.account: work: profile: standard email_defaults: ...
- splice()、slice()、split()函数的区分
1.slice(数组) 用法:array.slice(start,end) 解释:该方法是对数组进行部分截取,并返回一个数组副本:参数start是截取的开始数组索引,end参数等于你要取的最后一个字符 ...
- jQuery file upload上传图片的流程
先触发_onChange[jquery.fileupload.js] _onChange: function (e) { var that = this, data = { fileInput: $( ...
- SpringBoot(十二):SpringBoot整合Kafka
https://blog.csdn.net/saytime/article/details/79950635
- hook C++
Intercepting Calls to COM Interfaces(hook com接口) 通过COM组件IFileOperation越权复制文件 代码注入之远程线程篇 使用VC++通过远程进程 ...