js跨域请求（jsonp）
jsonp是跨域请求的手段之一。
jsonp的原理：
先来看看下面这段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<script>
function fn(response){
alert(response);
}
</script>
<body>
</body>
<script src='jsonp.js'></script>//注意这里：jsonp.js 这个js文件中其实只有一句话 fn('响应内容');
</html>
所以原理很简单，其实就是我们定义好了一个方法，然后后台返回一串字符串，而这个字符串又刚好就是一个函数的执行。
（
fn('响应内容') 这是js文件的内容，本身就是一个函数的执行。
）
类似：eval("fn('响应内容')");
封装jsonp：
由于ajax不能跨域，所以我们有必要封装一个跨域请求的jsonp方法。
function jsonpAsync(object){
//默认参数
var _object = {
url:"",
jsonp:"",
request:{},
callback:function(respose){}
};
//覆盖默认参数
for(var key in object){
_object[key] = object[key];
}
//生成一个唯一的方法名
var fnName = 'jxf_' + new Date().getTime();
//url参数拼接
if(_object.url.indexOf('?') < ){
_object.url += '?';
}
for(var key in _object.request){
if (key != 'jsonp') {
_object.url += '&'+key + '=' + _object.request[key];
};
}
_object.url += '&'+_object.jsonp + '=' + fnName;
//创建script标签
var scriptTag = document.createElement('script');
//将方法注册到全局
window[fnName] = function(response){
try{
_object.callback(response);
}catch(e){
console.log(e);
}finally{
//最后删除该函数与script元素
scriptTag.parentNode.removeChild(scriptTag);
delete window[fnName];//=null
}
}
scriptTag.src = _object.url;
document.getElementsByTagName('head')[].appendChild(scriptTag);
}
jsonpAsync({url:'http://localhost:81/jsonp/jsonp.php',jsonp:'jsonp', callback:function(response) {
alert(response.text);
}});
简单点，后台就用php了
<?php
echo $_GET['jsonp']."({text:'响应内容'})";
?>
Jquery中ajax中的jsonp：
$.ajax({
type : "get",
async: false,
url : "http://localhost:81/jsonp/jsonp.php",
dataType : "jsonp",
jsonp: "jsonp",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名
//jsonpCallback:"zidingyi",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名(类似：jQuery1102016820125747472048_1450147653563({text:'响应内容'}});)
success : function(data){
console.log(data);
},
error:function(){
console.log('fail');
}
});
最后引用一篇比较完成的jsonp的封装：原文链接http://blog.csdn.net/liusaint1992/article/details/50959571
// 主要实现功能：
// 1.参数拼装。
// 2.给每个回调函数唯一命名。
// 3.在回调成功或请求失败之后删除创建的JavaScript标签。 需要兼容IE。IE下onerror事件不兼容。这里有对它的模拟实现。在IE下加载失败也能get到。
// 4.超时功能。超时取消回调。执行error。
// 5.error事件。可执行自己传入的error事件。
function JSONP(url,config){
var data = config.data || [];
var paraArr=[],paraString='';//get请求的参数。
var urlArr;
var callbackName;//每个回调函数一个名字。按时间戳。
var script,head;//要生成script标签。head标签。
var supportLoad;//是否支持 onload。是针对IE的兼容处理。
var onEvent;//onload或onreadystatechange事件。
var timeout = config.timeout || 0;//超时功能。 for(var i in data){
if(data.hasOwnProperty(i)){
paraArr.push(encodeURIComponent(i) + "=" +encodeURIComponent(data[i]));
}
} urlArr = url.split("?");//链接中原有的参数。
if(urlArr.length>1){
paraArr.push(urlArr[1]);
} callbackName = 'callback'+new Date().getTime();
paraArr.push('callback='+callbackName);
paraString = paraArr.join("&");
url = urlArr[0] + "?"+ paraString; script = document.createElement("script");
script.loaded = false;//为了实现IE下的onerror做的处理。JSONP的回调函数总是在script的onload事件（IE为onreadystatechange）之前就被调用了。因此我们在正向回调执行之时，为script标签添加一个属性，然后待到onload发生时，再检测有没有这个属性就可以判定是否请求成功，没有成功当然就调用我们的error。 //将回调函数添加到全局。
window[callbackName] = function(arg){
var callback = config.callback;
callback(arg);
script.loaded = true;
} head = document.getElementsByTagName("head")[0];
head.insertBefore(script, head.firstChild) //chrome下第二个参数不能为null
script.src = url; supportLoad = "onload" in script;
onEvent = supportLoad ? "onload" : "onreadystatechange"; script[onEvent] = function(){ if(script.readyState && script.readyState !="loaded"){
return;
}
if(script.readyState == 'loaded' && script.loaded == false){
script.onerror();
return;
}
//删除节点。
(script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));
script = script[onEvent] = script.onerror = window[callbackName] = null; } script.onerror = function(){
if(window[callbackName] == null){
console.log("请求超时，请重试！");
}
config.error && config.error();//如果有专门的error方法的话，就调用。
(script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));
script = script[onEvent] = script.onerror = window[callbackName] = null;
} if(timeout!= 0){
setTimeout(function() {
if(script && script.loaded == false){
window[callbackName] = null;//超时，且未加载结束，注销函数
script.onerror();
}
}, timeout);
} }
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp测试</title>
<script src="jsonp.js"></script>
</head>
<body>
<script>
function myerror(){
alert('there must be something wrong!');
}
function getData (data){
alert("服务器过来的数据是"+data);
}
var url = 'http://runningls.com/demos/2016/jsonp/jsonp.php';
//调用函数。
JSONP(url,{
data:{
id:1
},
callback:getData,
error:myerror,
timeout:10000
});
</script>
</body>
php
<?php $callback = $_GET['callback'];
$id = $_GET['id']; if($id == ){
$res = 'this is 1';
} if($id == ){
$res = 'this is 2';
} $res = $callback."('$res')"; echo $res; ?>
js跨域请求（jsonp）的更多相关文章
- JS跨域请求 JSONP B/S全代码
Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准:Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有 ...
- js跨域请求jsonp解决方案-最简单的小demo
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...
- jquery跨域请求jsonp
服务端PHP代码 header('Content-Type:application/json; charset=utf-8'); $arr = array('a'=>1, 'b'=>2, ...
- js跨域请求数据的3种常用的方法
由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript 在 ...
- 浏览器同源策略，跨域请求jsonp
浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...
- JS跨域：jsonp、跨域资源共享、iframe+window.name
JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...
- 【JS跨域请求】Ajax跨域请求JSONP
前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...
- JS跨域请求之JSONP
在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. JSONP的产生 1.众所周知,Ajax请 ...
随机推荐
- JavaScript中作用域回顾（避免使用全局变量）（瀑布流的实现）（scroll事件）以及Django自定义模板函数回顾
页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板 ...
- HTTP记录-HTTP介绍
超文本传输协议 (HTTP-Hypertext transfer protocol) 是一种详细规定了浏览器和万维网服务器之间互相通信的规则,通过因特网传送万维网文档的数据传送协议.是一个应用程序级的 ...
- shell邮件发送功能实现
本文中以163邮箱为例,测试shell邮件发送功能.常见的工具有:mailx.sendmail.mutt等. 1.设置邮件客户端 (1)启用pop3.smtp服务,以支持第三方客户端支持 (2)设置授 ...
- git与代码托管工具
1.git初识 git是一个版本管理工具,用来管理项目的不同的版本,记录下不同的提交记录,git还可以构建不同的分支,用来给不同的人来推送使用. 推荐的git教程:https://www.cnblog ...
- 关于gb2312编码和utf8码的一个问题
ANSI(注意拼写不是ASCII)并不是“一种”编码,而是“多种”编码的统称.在简体中文Windows上,ANSI指GBK编码:在繁体中文Windows上,ANSI指Big5编码:在英文Windows ...
- Spring Boot 多模块项目创建与配置 (一)
最近在负责的是一个比较复杂项目,模块很多,代码中的二级模块就有9个,部分二级模块下面还分了多个模块.代码中的多模块是用maven管理的,每个模块都使用spring boot框架.之前有零零散散学过一些 ...
- Android View坐标系详解（getTop()、getX、getTranslationX...）
View 提供了如下 5 种方法获取 View 的坐标:1. View.getTop().View.getLeft().View.getBottom().View.getRight();2. View ...
- Struts2不扫描jar包中的action
今天在做一个二开的项目,将struts打成jar包放在WEB-INF的目录下却扫描不到指定的路径,也就是http访问访问不到我们指定的action,其他代码可以正常使用,就是访问不到action.st ...
- SquishIt引起的HTTP Error 500.0 - Internal Server Error
将一个ASP.NET项目从.NET Framework 4.0升级至.NET Framework 4.5之后,访问时出现HTTP Error 500.0 - Internal Server Error ...
- elasticsearch分别在windows和linux系统安装
WINDOWS系统安装1.安装JDKElastic Search要求使用较高版本JDK,本文使用D:\DevTools\jdk1.8.0_131,并配置环境变量 2.安装Elastic Search官 ...