ajax跨域问题.docx
《ajax跨域问题.docx》由会员分享，可在线阅读，更多相关《ajax跨域问题.docx（29页珍藏版）》请在冰豆网上搜索。
ajax跨域问题
那么知道什么是Jsonp和pjax吗？
答案：
Jsonp：
（JSONwithPadding）是一种跨域请求方式。
主要原理是利用了script标签可以跨域请求的特点，由其src属性发送请求到服务器，服务器返回js代码，网页端接受响应，然后就直接执行了，这和通过script标签引用外部文件的原理是一样的。
JSONP由两部分组成：
回调函数和数据，回调函数一般是由网页端控制，作为参数发往服务器端，服务器端把该函数和数据拼成字符串返回。
pjax：
pjax是一种基于ajax+history.pushState的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的URL。
（关键点：
可以实现ajax无法实现的后退功能）pjax是ajax+pushState的封装，同时支持本地存储、动画等多种功能。
目前支持jquery、qwrap、kissy等多种版本。
jQueryAjax简单的实现跨域请求
html代码清单：
$（function（）{
$.ajax（
{
type:
'get',
url:
'
dataType:
'jsonp',
jsonp:
"jsoncallback",
success:
function（data）{
alert（"用户名：
"+data.user+"密码：
"+data.pass）;
},
error:
function（）{
alert（'fail'）;
}
}
）;
}）
服务端validate.php代码清单：
php
header（'Content-Type:
text/html;Charset=utf-8'）;
$arr=array（
"user"=>$_GET['loginuser'],
"pass"=>$_GET['loginpass'],
"name"=>'response'
）;
echo$_GET['jsoncallback']."（".$arr）."）";
效果图：
AJAX跨域请求-JSONP获取JSON数据
博客分类：
∙Javascript/Jquery/Bootstrap/Web
AsynchronousJavaScriptandXML（Ajax）是驱动新一代Web站点（流行术语为Web2.0站点）的关键技术。
Ajax允许在不干扰Web应用程序的显示和行为的情况下在后台进行数据检索。
使用XMLHttpRequest函数获取数据，它是一种API，允许客户端JavaScript通过HTTP连接到远程服务器。
Ajax也是许多mashup的驱动力，它可将来自多个地方的内容集成为单一Web应用程序。
不过，由于受到浏览器的限制，该方法不允许跨域通信。
如果尝试从不同的域请求数据，会出现安全错误。
如果能控制数据驻留的远程服务器并且每个请求都前往同一域，就可以避免这些安全错误。
但是，如果仅停留在自己的服务器上，Web应用程序还有什么用处呢？
如果需要从多个第三方服务器收集数据时，又该怎么办？
理解同源策略限制
同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。
也就是说，受到请求的URL的域必须与当前Web页面的域相同。
这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。
这个浏览器策略很旧，从NetscapeNavigator2.0版本开始就存在。
克服该限制的一个相对简单的方法是让Web页面向它源自的Web服务器请求数据，并且让Web服务器像代理一样将请求转发给真正的第三方服务器。
尽管该技术获得了普遍使用，但它是不可伸缩的。
另一种方式是使用框架要素在当前Web页面中创建新区域，并且使用GET请求获取任何第三方资源。
不过，获取资源后，框架中的内容会受到同源策略的限制。
克服该限制更理想方法是在Web页面中插入动态脚本元素，该页面源指向其他域中的服务URL并且在自身脚本中获取数据。
脚本加载时它开始执行。
该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供Web页面的域上加载的。
但如果该脚本尝试从另一个域上加载文档，就不会成功。
幸运的是，通过添加JavaScriptObjectNotation（JSON）可以改进该技术。
1、什么是JSONP？
要了解JSONP，不得不提一下JSON，那么什么是JSON？
JSONisasubsetoftheobjectliteralnotationofJavaScript.SinceJSONisasubsetofJavaScript,itcanbeusedinthelanguagewithnomussorfuss.
JSONP（JSONwithPadding）是一个非官方的协议，它允许在服务器端集成Scripttags返回至客户端，通过javascriptcallback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
2、JSONP有什么用？
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
3、如何使用JSONP？
下边这一DEMO实际上是JSONP的简单表现形式，在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。
HTML代码（任一）：
Html代码
1.
2.
3.functionresult）{
4.//alert（result）;
5.for（variinresult）{
6.alert（i+":
"+result[i]）;//循环输出a:
1,b:
2,etc.
7.}
8.}
9.varJSONP=document.createElement（"script"）;
10.JSONP.type="text/javascript";
11.JSONP.src="
12.document.getElementsByTagName（"head"）[0].appendChild（JSONP）;
13.
或者
Html代码
1.
2.
3.functionresult）{
4.alert（result.a）;
5.alert（result.b）;
6.alert（result.c）;
7.for（variinresult）{
8.alert（i+":
"+result[i]）;//循环输出a:
1,b:
2,etc.
9.}
10.}
11.
12."）';
7.//echo$_GET['callback']."（$result）";
8.//动态执行回调函数
9.$callback=$_GET['callback'];
10.echo$callback."（$result）";
如果将上述JS客户端代码用jQuery的方法来实现，也非常简单。
$.getJSON
$.ajax
$.get
客户端JS代码在jQuery中的实现方式1：
Js代码
1.
2.
3.$.getJSON（"
4.function（result）{
5.for（variinresult）{
6.alert（i+":
"+result[i]）;//循环输出a:
1,b:
2,etc.
7.}
8.}）;
9.
客户端JS代码在jQuery中的实现方式2：
Js代码
1.
2.
3.$.ajax（{
4.url:
"
5.dataType:
'jsonp',
6.data:
'',
7.jsonp:
'callback',
8.success:
function（result）{
9.for（variinresult）{
10.alert（i+":
"+result[i]）;//循环输出a:
1,b:
2,etc.
11.}
12.},
13.timeout:
3000
14.}）;
15.
客户端JS代码在jQuery中的实现方式3：
Js代码
1.
2.
3.$.get（'{name:
encodeURIComponent（'tester'）},function（json）{for（variinjson）alert（i+":
"+json[i]）;},'jsonp'）;
4.
其中jsonCallback是客户端注册的，获取跨域服务器上的json数据后，回调的函数。
这个url是跨域服务器取json数据的接口，参数为回调函数的名字，返回的格式为
Js代码
1.{msg:
'thisisjsondata'}）
Jsonp原理：
首先在客户端注册一个callback,然后把callback的名字传给服务器。
此时，服务器先生成json数据。
然后以javascript语法的方式，生成一个function,function名字就是传递上来的参数jsonp.
最后将json数据直接以入参的方式，放置到function中，这样就生成了一段js语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的javascript文档，此时数据作为参数，传入到了客户端预先定义好的callback函数里.（动态执行回调函数）
使用JSON的优点在于：
∙比XML轻了很多，没有那么多冗余的东西。
∙JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。
不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。
∙在JavaScript中处理JSON很简单。
∙其他语言例如PHP对于JSON的支持也不错。
JSON也有一些劣势：
∙JSON在服务端语言的支持不像XML那么广泛，不过JSON.org上提供很多语言的库。
∙如果你使用eval（）来解析的话，会容易出现安全问题。
尽管如此，JSON的优点还是很明显的。
他是Ajax数据交互的很理想的数据格式。
主要提示：
JSONP是构建mashup的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。
它有一些缺陷，在提交开发资源之前必须认真考虑它们。
第一，也是最重要的一点，没有关于JSONP调用的错误处理。
如果动态脚本插入有效，就执行调用；如果无效，就静默失败。
失败是没有任何提示的。
例如，不能从服务器捕捉到404错误，也不能取消或重新开始请求。
不过，等待一段时间还没有响应的话，就不用理它了。
（未来的jQuery版本可能有终止JSONP请求的特性）。
JSONP的另一个主要缺陷是被不信任的服务使用时会很危险。
因为JSONP服务返回打包在函数调用中的JSON响应，而函数调用是由浏览器执行的，这使宿主Web应用程序更容易受到各类攻击。
如果打算使用JSONP服务，了解它能造成的威胁非常重要
jquery中ajax处理跨域的三大方式
一、处理跨域的方式：
1.代理
2.XHR2
HTML5中提供的XMLHTTPREQUESTLevel2（及XHR2）已经实现了跨域访问。
但ie10以下不支持
只需要在服务端填上响应头：
header（"Access-Control-Allow-Origin:
*"）;
/*星号表示所有的域都可以接受，*/
header（"Access-Control-Allow-Methods:
GET,POST"）;
3.jsonP
原理：
ajax本身是不可以跨域的，
通过产生一个script标签来实现跨域。
因为script标签的src属性是没有跨域的限制的。
其实设置了dataType:
'jsonp'后，$.ajax方法就和ajaxXmlHttpRequest没什么关系了，取而代之的则是JSONP协议。
JSONP是一个非官方的协议，它允许在服务器端集成Scripttags返回至客户端，通过javascriptcallback的形式实现跨域访问。
ajax的跨域写法：
（其余写法和不跨域的一样）：
比如
/*当前网址是localhost:
3000*/
js代码
$.ajax（{
type:
"get",
url:
"http:
//localhost:
3000/showAll",/*url写异域的请求地址*/
dataType:
"jsonp",/*加上datatype*/
jsonpCallback:
"cb",/*设置一个回调函数，名字随便取，和下面的函数里的名字相同就行*/
success:
function（）{
。
。
。
}
}）;
/*而在异域服务器上，*/
app.js
app.get（'/showAll',students.showAll）;/*这和不跨域的写法相同*/
/*在异域服务器的showAll函数里，*/
vardb=require（"./database"）;
exports.showAll=function（req,res）{
/**设置响应头允许ajax跨域访问**/
res.setHeader（"Access-Control-Allow-Origin","*"）;
/*星号表示所有的异域请求都可以接受，*/
res.setHeader（"Access-Control-Allow-Methods","GET,POST"）;
varcon=db.getCon（）;
con.query（"select*fromt_students",function（error,rows）{
if（error）{
console.log（"数据库出错：
"+error）;
}else{
/*注意这里，返回的就是jsonP的回调函数名+数据了*/
res.send（"cb（"+JSON.stringify（r）+"）"）;
}
}）;
}
二、解决ajax跨域访问、JQuery的跨域方法
JS的跨域问题，我想很多程序员的脑海里面还认为JS是不能跨域的，其实这是一个错误的观点；有很多人在网上找其解决方法，教其用IFRAME去解决的文章很多，真有那么复杂吗？
其实很简单的，如果你用JQUERY，一个GETJSON方法就搞定了，而且是一行代码搞定。
下面开始贴出方法。
//跨域（可跨所有域名）
$.getJSON（"
//要求远程请求页面的数据格式为：
?
（json_data）//例如：
//?
（[{"_name":
"湖南省","_regionId":
134},{"_name":
"北京市","_regionId":
143}]）alert（json[0]._name）;
}）;
$.getJSON（"
//要求远程请求页面的数据格式为：
?
（json_data）//例如：
//?
（[{"_name":
"湖南省","_regionId":
134},{"_name":
"北京市","_regionId":
143}]）alert（json[0]._name）;
}）;
注意，getregion.aspx中，在输出JSON数据时，一定要用Request.QueryString["jsoncallback"]，将获取的内容放到返回JSON数据的前面，假设实际获取的值为42342348，那么返回的值就是42342348（[{"_name":
"湖南省","_regionId":
134},{"_name":
"北京市","_regionId":
143}]）
因为getJSON跨域的原理是把？
随机变一个方法名，然后返回执行的，实现跨域响应的目的。
下面一个是跨域执行的真实例子：
//跨域（可跨所有域名）
$.getJSON（"{id:
0,action:
'jobcategoryjson'},function（json）{alert（json[0].pid）;alert（json[0].items[0]._name）;}）;
//跨域（可跨所有域名）
$.getJSON（"{id:
0,action:
'jobcategoryjson'},function（json）{alert（json[0].pid）;alert（json[0].items[0]._name）;}）;
jQuery跨域原理:
浏览器会进行同源检查,这导致了跨域问题,然而这个跨域检查还有一个例外那就是HTML的
响应值：
parseResponse（{"Name":
"Cheeso","Rank":
7}）
"Cheeso","Rank":
7}）
这种方式被称作JsonP;（如果链接已经失效请点击这里:
JSONP）;即：
JSONwithpadding上面提到的前缀就是所谓的“padding”。
那么jQuery里面是怎么实现的呢？
貌似并没有