JSONP 跨域取数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- 指定浏览器以一倍的大小显示网页 禁止缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes"><!--默认全屏模式运行 -->
<title>首页</title>
<script type="text/javascript" src="script/jquery-1.8.3.js"></script>
<script type="text/javascript" src="script/common.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css"/>
<script type="text/javascript">
$(document).ready(function(){
var objUrl = "http://old.idongway.com/sohoweb/q?method=userInfo.get&format=jsonp&userName=tx&userPWord=123456";
jsonp(objUrl,function(data){
alert(data.userInfos[0].ICCID);
});
});
/**
* Created by LinQ_PC on 14-2-27.
*/
/**
* ajax异步请求
* */
function jsonp(url,successCallBack) {
var config = {url:url,dataType:"jsonp",jsonp:"callback",
jsonpCallback:"success_jsonp",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
beforeSend:function() {
},
dataFilter:function(json) {
console.log("jsonp.filter:"+json);
return json;
},
success:successCallBack,
error:function(XMLHttpRequest,textStatus,errorThrown) {
console.log("jsonp.error:"+textStatus);
},
complete:function(data){console.log(data);}
};
return $.ajax(config);
}
/*
获取参数
*/
function getParameters() {
var url=decodeURI(window.location.href);
var pos = url.lastIndexOf("?");
var pars = '';
if(pos>=0){
pars = url.substring(pos+1);
}
var args = pars.split("&");
var result = {};
for(var i=0;i<args.length;i++) {
var arr = args[i].split('=');
if(arr.length==2){result[arr[0]] = arr[1]};
}
return result;
}
</script>
</head>
<body>
</body>
</html>
JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。
JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
所以还有一种更简单的方法：推荐使用(script标签本身就支持跨域请求)
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> </head> <body> </body> <script type="text/javascript"> function getData(result){ alert(result.userInfos[0].ICCID); } </script> <script type="text/javascript" src="http://old.idongway.com/sohoweb/q?method=userInfo.get&format=jsonp&userName=tx&userPWord=123456&callback=getData"></script> </html>
注意：getData(result)方法对应着 callback=getData。这两个名字要一样
浙公网安备 33010602011771号