jsonp 跨域原理分析
本篇文章借鉴自 博客园文章原文地址
但是出于安全的考虑，ajax不允许跨域通信(浏览器同源策略)。 关于ajax跨域请求？1、Ajax为什么不能跨域？到底是卡在哪个环节了？。 （请求成功了，但客户端浏览器拿不到请求结果） Ajax其实就是向服务器发送一个GET或POST请求，然后取得服务器响应结果，返回客户端。 理论上这是没有任何问题的，然而普通ajax跨域请求，在服务器端不会有任何问题，只是服务端响应数据返回给浏览器的时候， 浏览器根据响应头的Access-Control-Allow-Origin字段的值来判断是否有权限获取数据， 一般情况下，服务器端如果没有在这个字段做特殊处理的话，跨域是没有权限访问的，所以响应数据被浏览器给拦截了， 所以在ajax回调函数里是获取不到数据的。所以现在ajax跨域的问题可以转化为数据怎么拿回客户端的问题。 2、 html的script标签，img标签，iframe标签，可以请求第三方的资源（不受同源策略影响） web页面可以加载放在任意站点的js、css、图片等资源，不会受到"跨域"的影响。 这个时候，我们会想到：既然我们可以调用第三方站点的js,那么如果我们将数据放到第三方站点的js中不就可以将数据带到客户端了吗？ JSONP1、什么是JSONP？ JSONP(JSON with Padding（填充）)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。 其核心思想是利用JS标签里面的跨域特性进行跨域数据访问， 在JS标签里面存在的是一个跨域的URL，实际执行的时候通过这个URL获得一段字符串， 这段返回的字符串必须是一个合法的JS调用，通过EVAL这个字符串来完成对获得的数据的处理。 即： <script src='url'></script> JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端， 通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。 2、JSONP的粗糙实现 下面我们通过一个例子来说明一下JSONP是如何实现ajax跨域请求的。 html 代码<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>jsonp</div>
</body>
<script>
function getremotedata(data) {
console.log(data);
}
var div = document.getElementsByTagName('div');
div[0].onclick = function(){
var url = "./getdata.js";
var script = document.createElement('script');
script.setAttribute('src',url);
document.getElementsByTagName('head')[0].appendChild(script);
};
</script>
</html>
远程的getdata.jsgetremotedata({
code:0,result:'success'
});
得到的结果： jsonp前端及后台php的写法html代码还是和上面一样，只要改变 url就可以了 后台 php 代码 <?php
$callback = $_GET['callback'];
if($callback == 'getremotedata' ){
echo $_GET['$callback']).'('. json_encode({code:0,msg:"success"}) .')';
}
?>
看到这里清楚了吧，就是第三方站点生成一个对回调函数的调用，传入查询结果， 下图是 jsonp请求的流程图 jquery 封装在 ajax方法 里面的jsonpjquery 是如何把 jsonp 封装到ajax里面的？ <script type="text/javascript">
function GetAjaxData() {
$.ajax({
type: "get",async: false,url: "http://localhost:8080/getdata.php",dataType: "jsonp",jsonp: "callback",//传递给请求处理程序或页面的，标识jsonp回调函数名(一般为:callback)
jsonpCallback: "GetData",//callback的function名称
success: function (data) {
console.log(data);
},error: function () {
alert('fail');
}
});
}
</script>
一般情况下jqury 生成的访问 远程站点的 url
上述代码请求生成的url（设置
最后 一个 所以相当于 在 前端文件中引入了 一个这样的js文件
你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。 从jQuery 1.5开始，你也可以使用一个函数作为该参数设置，在这种情况下，该函数的返回值就是jsonpCallback的结果。
当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据。 所以我们可见服务器代码最后一行
就是执行的 OK，就是整个流程就是： 客户端发送一个请求，规定一个可执行的函数名
js原生 ajax 请求//1.创建对象
var ajax = '';
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest(); /* 现代浏览器 *／
}else if(window.ActiveXObject){
ajax = new ActiveXObject("Microsoft.XMLHTTP"); /* 万恶的ie浏览器 *／
}
//2.创建请求
//get请求方法(拼接url参数)
// var url="login.php?name="+name+"&password="+pass;
// ajax.open("GET",url,true);
//post请求
ajax.open("POST","login.php",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var data="name="+name+"&password="+pass;
//3.发送请求
// ajax.send(); //get 方式发送请求
ajax.send(data); //post 方式发送请求
//4.捕获请求状态、onreadystatechange表示当前请求状态
ajax.onreadystatechange=function(){
//5.判断请求状态
if(ajax.readyState==4){
//6.判断请求结果
if(ajax.status==200){
//请求成功将结果 responseText 放入回调函数中
succ(ajax.responseText);
}
}
}
通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest。 当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成， XMLHttpRequest对象的open()方法有3个参数， 注意，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。 最后调用send()方法才真正发送请求。 jquery实现普通ajax<script type="text/javascript">
$("#btn").on("click",function(){
var name=$("#name").val();
var pass=$("#password").val();
$.ajax({
type:"post",url:"login&jq.php",async:true,//异步简写
dataType:"json",//转化为json类型
data:{
name:name,password:pass,},success:function(data){
console.log(data);
},error:function(data){
alert(data);
}
});
})
</script>
后台 php 代码 <?php
include_once "common.php";
$name=$_POST["name"];
$password=$_POST["password"];
$sql="select*from user where name='$name' and password= '$password'";
$result=mysql_query($sql);
if(mysql_num_rows($result)==1){
$row = mysql_fetch_assoc($result);
//只能传一个json
echo json_encode($row);
}else{
//只能用json
echo '{"msg":"输入有误"}';
}
?>
了解CORS前，我们先搞明白概念： Origin表示本域，也就是浏览器当前页面的域。当JavaScript向外域（如sina.com） 发起请求后，浏览器收到响应后，首先检查Access-Control-Allow-Origin是否包含本域， 如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。 假设本域是my.com，外域是sina.com，只要响应头Access-Control-Allow-Origin为http://my.com，或者是*，本次请求就可以成功。 可见，跨域能否成功，取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin，决定权始终在对方手中。 总结1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装； 2、ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XMLHttpRequest获取非本页内容，而jsonp的核心则是通过HTTP来动态添加 3、其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理（CORS）一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。 4、jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。 5、jsonp整个过程中，本地站点一直处于主动的地位，主动的发送请求，主动的加载远程js.而第三方站点则处于被动的响应。 josnp 优缺点分析： 借鉴自w3cfun优点：1.1它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略；
1.2它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；
1.3在请求完毕后可以通过调用callback的方式回传结果。
将回调方法的权限给了调用方。这个就相当于将controller层和view层终于分开了。
我提供的jsonp服务只提供纯服务的数据，至于提供服务以 后的页面渲染和后续view操作都由调用者来自己定义就好了。
如果有两个页面需要渲染同一份数据，你们只需要有不同的渲染逻辑就可以了，
逻辑都可以使用同 一个jsonp服务。
缺点2.1它只支持GET请求而不支持POST等其它类型的HTTP请求 2.2它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。 2.3 jsonp在调用失败的时候不会返回各种HTTP状态码。 2.4缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。 那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。 于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |