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代码清单：scripttype=text/javascriptsrc==text/javascript$(function(){$.ajax({type:'get',url:'=lee&loginpass=123456',dataType:'jsonp',jsonp:jsoncallback,success:function(data){alert(用户名：+data.user+密码：+data.pass);},error:function(){alert('fail');}});})/script服务端validate.php代码清单：?phpheader('Content-Type:text/html;Charset=utf-8');$arr=array(user=$_GET['loginuser'],pass=$_GET['loginpass'],name='response');echo$_GET['jsoncallback'].(.json_encode($arr).);效果图：AJAX跨域请求-JSONP获取JSON数据博客分类：Javascript/Jquery/Bootstrap/WebAsynchronousJavaScriptandXML(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.metacontent=text/html;charset=utf-8http-equiv=Content-Type/2.scripttype=text/javascript3.functionjsonpCallback(result){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==jsonpCallback;12.document.getElementsByTagName(head)[0].appendChild(JSONP);13./script或者Html代码1.metacontent=text/html;charset=utf-8http-equiv=Content-Type/2.scripttype=text/javascript3.functionjsonpCallback(result){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./script12.scripttype=text/javascriptsrc==jsonpCallback/scriptJavaScript的链接，必须在function的下面。服务端PHP代码（services.php）：Php代码1.?php2.3.//服务端返回JSON数据4.$arr=array('a'=1,'b'=2,'c'=3,'d'=4,'e'=5);5.$result=json_encode($arr);6.//echo$_GET['callback'].'(Hello,World!)';7.//echo$_GET['callback'].($result);8.//动态执行回调函数9.$callback=$_GET['callback'];10.echo$callback.($result);如果将上述JS客户端代码用jQuery的方法来实现，也非常简单。$.getJSON$.ajax$.get客户端JS代码在jQuery中的实现方式1：Js代码1.scripttype=text/javascriptsrc=jquery.js/script2.scripttype=text/javascript3.$.getJSON(=?,4.function(result){5.for(variinresult){6.alert(i+:+result[i]);//循环输出a:1,b:2,etc.7.}8.});9./script客户端JS代码在jQuery中的实现方式2：Js代码1.scripttype=text/javascriptsrc=jquery.js/script2.scripttype=text/javascript3.$.ajax({4.url::'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:300014.});15./script客户端JS代码在jQuery中的实现方式3：Js代码1.scripttype=text/javascriptsrc=jquery.js/script2.scripttype=text/javascript3.$.get('=?',{name:encodeURIComponent('tester')},function(json){for(variinjson)alert(i+:+json[i]);},'jsonp');4./script其中jsonCallback是客户端注册的，获取跨域服务器上的json数据后，回调的函数。=jsonpCallback这个url是跨域服务器取json数据的接口，参数为回调函数的名字，返回的格式为Js代码1.jsonpCallback({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的支持也不错。