jquery ajax实现跨域请求的方法
- 格式:doc
- 大小:13.00 KB
- 文档页数:1
jquery中的ajax方法jQuery中的ajax方法是一种使用JavaScript发送HTTP请求的技术。
它允许你在不刷新整个页面的情况下,向服务器发送请求并从服务器获取响应数据。
通过使用ajax方法,可以实现异步加载数据,动态更新网页内容,提高用户体验。
以下是关于ajax方法的1200多字的详细解释。
首先,让我们来了解一下ajax的全称:Asynchronous JavaScript And XML(异步的JavaScript和XML)。
尽管它的名称中包含XML,但实际上在现代的开发中,通常使用JSON(JavaScript Object Notation)作为数据的传输格式,而不是XML。
使用ajax方法发送HTTP请求时,通常可以指定多个选项,以确保请求被正确处理。
首先,必须指定要请求的URL(Uniform Resource Locator),这是服务器上资源的唯一标识符。
可以是相对URL,指定相对于当前网页的路径,也可以是绝对URL,指定完整的网址。
接下来,可以指定HTTP请求的类型,常见的有GET和POST。
GET请求用于从服务器获取数据,而POST请求用于向服务器提交数据。
根据具体的需求,可以选择适当的请求类型。
在ajax方法中,可以选择性地指定其他选项,例如请求的数据类型、请求的参数等。
数据类型选项指定了服务器响应的数据类型,可以是"text"(文本)、"html"(HTML)、"json"(JSON)等等。
根据请求的数据类型,ajax方法将自动解析服务器响应,并将其转换为适当的JavaScript对象。
请求参数选项可以将数据作为字符串或已编码的对象发送到服务器。
这些数据可以通过查询字符串、表单数据、JSON等格式进行编码。
通过将请求参数添加到ajax方法中,可以向服务器发送附加数据,用于处理请求或在服务器上进行操作。
ajax跨域的解决方案在前端开发中,经常会遇到需要实现跨域请求的情况。
而其中一个常见的跨域请求方案就是使用Ajax。
本文将介绍一些常用的Ajax跨域解决方案。
1. JSONP:JSONP是一种常用的跨域解决方案。
它通过在页面中动态创建<script>标签,向目标服务器请求数据,并将数据作为回调函数的参数返回。
这样来实现跨域请求和数据传输。
但是JSONP只支持GET请求,且只能获取存在的数据,无法处理POST等其他类型的请求。
2. CORS(跨域资源共享):CORS是HTML5中引入的一种跨域解决方案。
它通过在服务器端设置一些特殊的响应头,来实现跨域资源的共享。
具体而言,服务器在响应中返回一个Access-Control-Allow-Origin的头部字段,告知浏览器哪些源可以访问资源。
这样浏览器在发送跨域请求时,会先检查响应中的头部字段,若符合访问要求则允许请求。
3. 反向代理:反向代理是一种常见的解决跨域问题的方式。
它主要通过在服务器端设置代理服务器,将请求发送到目标服务器,并将响应返回给客户端。
客户端与反向代理服务器之间的通信是同源的,因此不存在跨域问题。
这样通过反向代理服务器转发请求,实现了跨域请求的目的。
不过反向代理的设置需要专业的服务器配置知识,对开发者而言可能比较繁琐。
4. postMessage方法:postMessage是一种HTML5引入的跨文档消息传递机制。
它可以在不同窗口或跨域的文档之间传递数据。
通过在父页面中使用postMessage方法向子页面传递数据,然后在子页面中监听message事件来获取数据。
这样就实现了跨域传递数据的目的。
5. 使用代理服务器:使用代理服务器也是一种常见的跨域解决方案。
在开发环境中,我们可以在本地搭建一个代理服务器,将前端请求发送到代理服务器,再由代理服务器向目标服务器发送请求。
这样就避免了直接在浏览器中发送跨域请求。
总结起来,Ajax跨域解决方案有很多种,每种方案都有其适用的场景和限制。
ajax跨域解决方案《Ajax跨域解决方案》在web开发中,经常会遇到跨域请求的问题,尤其是在使用Ajax进行数据交互的时候。
跨域请求是指在一个域下请求另一个域的资源,由于浏览器的安全机制,通常是不允许这种行为的。
但是,在实际开发过程中,我们会面临需要跨域请求的情况,这就需要我们寻找合适的解决方案。
以下是几种常用的解决跨域请求的方案:1. JSONPJSONP是利用script标签的跨域特性来实现的一种跨域请求方式。
通过在src属性中添加跨域地址,并在后端返回一个调用指定函数的脚本,从而实现数据的传递。
JSONP的优点是兼容性好,可以在大部分浏览器上使用,但是对请求方式有限制,只能使用GET方式请求。
2. 代理利用代理服务器来转发请求,实现跨域请求。
在客户端发送请求时,将请求发送到本地服务器,然后在本地服务器中转发到目标服务器,再将结果返回给客户端。
这种方式需要在服务器端进行配置,但是能够完全解决跨域请求的问题。
3. CORSCORS(Cross-Origin Resource Sharing)是现代浏览器支持的一种跨域解决方案。
它通过在响应头中添加一些特定的字段来告诉浏览器允许跨域请求,例如Access-Control-Allow-Origin、Access-Control-Allow-Methods等。
使用CORS能够很好地解决跨域请求问题,但需要服务端进行相应的配置。
4. WebSocketWebSocket是HTML5中的一种新协议,它允许浏览器与服务器建立持久连接,实现双向通信。
通过WebSocket,可以在不同域之间进行跨域通信,从而解决跨域请求的问题。
以上是几种常用的跨域解决方案,开发者在实际项目中可以根据具体情况选择合适的方式来解决跨域问题。
在选择解决方案的同时,也需要考虑安全性和性能等方面的影响,以确保跨域请求的安全可靠。
ajax跨域、iframe跨域和JS跨域通信的几种解决方案1.什么引起了ajax跨域不能的问题ajax本身实际上是通过xmlhttprequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告。
2.有什么完美的解决方案么?没有。
解决方案有不少,但是只能是根据自己的实际情况来选择。
具体情况有:一、本域和子域的相互访问: 和二、本域和其他域的相互访问: 和 用iframe三、本域和其他域的相互访问: 和 用xmlhttprequest访问代理四、本域和其他域的相互访问: 和 用js创建动态脚本解决方法:一、如果想做到数据的交互,那么和 必须由你来开发才可以。
可以将用iframe添加到的某个页面下,在和iframe里面都加上document.domain = "",这样就可以统一域了,可以实现跨域访问。
就和平时同一个域中镶嵌iframe一样,直接调用里面的js就可以了。
(这个办法我没有尝试,不过理论可行)二、当两个域不同时,如果想相互调用,那么同样需要两个域都是由你来开发才可以。
用iframe可以实现数据的互相调用。
解决方案就是用window.location对象的hash属性。
hash属性就是http://domian/web /a.htm#dshakjdhsjka 里面的#dshakjdhsjka。
利用js改变hash值网页不会刷新,可以这样实现通过js访问hash值来做到通信。
不过除了ie之外其他大部分浏览器只要改变hash就会记录历史,你在前进和后退时就需要处理,非常麻烦。
不过再做简单的处理时还是可以用的,具体的代码我再下面有下载。
大体的过程是页面a和页面b在不同域下,b通过iframe添加到a里,a通过js修改iframe的hash值,b里面做一个监听(因为js只能修改hash,数据是否改变只能由b自己来判断),检测到b的hash值被修改了,得到修改的值,经过处理返回a需要的值,再来修改a的hash值(这个地方要注意,如果 a 本身是那种查询页面的话比如http://domian/web/a.aspx?id=3,在b中直接parent.window.location是无法取得数据的,同样报没有权限的错误,需要a把这个传过来,所以也比较麻烦),同样a里面也要做监听,如果hash变化的话就取得返回的数据,再做相应的处理。
AJAX是一项客户端技术(JavaScript的XMLHttpRequest对象),在网页上可以用于异步加载数据。
但是由于同源策略,一般来说位于服务器1的网页无法与其它的服务器(服务器2)沟通。
这就产生了AJAX的跨域问题。
解决这个问题有较多的办法可以实现,今天与大家分享一个比较常见的办法——后端代理。
起因:通常指的AJAX对象(XMLHttpRequest对象)是无法访问其它服务器的数据,于是产生了跨域问题。
思考:既然前端的AJAX无法跨域访问数据,但是可以访问本站(同源:域名、端口、协议)的数据。
而PHP作为一门后端编程语言,是可以任意读取互联网的数据,当然就可以读取其它服务器的数据了。
再将PHP读取到的数据交给前端使用,这时前端就能在本站的PHP 程序上得到远程服务器的数据了,也就是说,让本站的PHP程序当一个代理人,代替前端去读取数据再交给前端程序使用。
这就是AJAX跨域的解决办法之一——后端代理!需求:在本地服务器list.html页面上使用AJAX技术获取并显示来自/的数据。
基于同源策略,该请求是无法完成的PHP后端代理实现:1、编写PHP文件get.phpPHP访问的网页数据2、编写HTML网页list.html请求本站的后端文件get.php3、执行结果使用AJAX也能得到的数据了后记:其实解决AJAX跨域请求数据的办法有很多,比如:JSONP、设置响应头、Iframe等等,可以根据自身的实际情况来使用,今天介绍的后端代理核心点在于让后端程序去实现跨域获取数据,再以同源方式提供给前端页面使用,可以在有后端程序支持的情况下使用。
下面再给大家列出一些常见的问题。
1、什么是AJAX?AJAX是一项客户端技术,通常指的是window.XMLHttpRequest对象,也有老版本的IE浏览器以其它的对象名称来代表该对象。
2、什么是同源策略?同源策略是浏览器最核心的安全功能。
由Netscape提出的一个著名的安全策略,所有的JavaScript引擎都在用这个策略。
发表于:2010-1-11浏览:965作者:转载遗失来源:网络转载关键字:AJAX,详解,请求描述:注意:以下代码请在Firefox3."5、Chrome3."0、Safari4之后的版本中进行测试。
IE8的实现方法与其他浏览不同。
跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。
这种情况很常见注意:以下代码请在Firefox3."5、Chrome3."0、Safari 4之后的版本中进行测试。
IE8的实现方法与其他浏览不同。
跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。
这种情况很常见,比如说通过style标签加载外部样式表文件、通过img标签加载外部图片、通过script标签加载外部脚本文件、通过Webfont 加载字体文件等等。
默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy)。
那么,什么是同源策略呢?如果两个页面的协议、域名和端口是完全相同的,那么它们就是同源的。
同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。
如果两个页面的主域名相同,则还可以通过设置document.domain属性将它们认为是同源的。
随着Web2."0和SNS的兴起,Web应用对跨域访问的需求也越来越多,但是,在脚本中进行跨域请求是受安全性限制的,Web开发人员迫切需要提供一种更安全、方便的跨域请求方式来融合(Mashup)自己的Web应用。
这样做的一个好处就是可以将请求分摊到不同的服务器,减轻单个服务器压力以提高响应速度;另外一个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负载。
值得庆幸的是,跨域请求的标准已经出台,主流浏览器也已经实现了这一标准。
W3C工作组中的WebApplicationsWorking Group(Web应用工作组)发布了一个Cross-Origin Resource Sharing(跨域资源共享,该规范地址:http:3."org/TR/access-control/和http://dev.w该规范只能应用在类似XMLHttprequest这样的API容器内。
jquery实现ajax跨域请求1.跨域问题: 是因为浏览器的同源策略是对ajax请求进⾏阻拦了,但是不是所有的请求都给做跨域,像是⼀般的href属性,a标签什么的都不拦截。
如: 项⽬⼀:p1.html<body><h1>项⽬⼀</h1><button class="send_jsonp">jsonp</button><script>$(".send_jsonp").click(function () {$.ajax({url:"http://127.0.0.1:8080/ajax_send2/", #去请求项⽬⼆中的urlsuccess:function (data) {console.log(data)}})})</script></body> p1.py1from flask import Flask2from flask import render_template,redirect,request,jsonify3 app = Flask(__name__)45 @app.route("/p1",methods=['POST','GET'])6def p1():7return render_template('p1.html')8910if__name__ == '__main__':11 app.run(host='127.0.0.1',port=80)p1.py 项⽬⼆:p2.pyfrom flask import Flaskfrom flask import render_template,redirect,request,jsonifyapp = Flask(__name__)@app.route("/ajax_send2",methods=['POST','GET'])def ajax_send2():print(222222)return'hello'if__name__ == '__main__':app.run(host='0.0.0.0',port=8080)出现了⼀个错误,这是因为同源策略给限制了,这是游览器给我们报的⼀个错(但是注意,项⽬2中的访问已经发⽣了,说明是浏览器对⾮同源请求返回的结果做了拦截。
下面小编就为大家带来一篇jQuery使用ajax跨域获取数据的简单实例。
小编觉得挺不错的,现在就分享给大家,也给大家做个参考。
jQuery使用ajax跨域获取数据的简单实例var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = true;//之前没有加这句老是提示no transport,我没去深想。
$.ajax ({ type: "POST", contentType: "application/x-www-form-urlencoded", dataType: "html", url: "http://www.*****.com", //这里是网址 success:function(data){alert(data);}, timeout:30000, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } });参数options类型:Object可选。
最近公司内部的architecture组正在热烈讨论ajax,最后难免会谈到如何跨域这个问题,因为从ajax诞生那天起,xmlHttprequest对象在firefox下不能跨域请求的问题就一直存在,等待浏览器们去解决这个问题显然不太现实,聪明的web开发人员们早就想了一系列的方法来解决这个问题,下面列举几个比较不错的方法:1. 使用中间层过渡的方式:中间过渡,很明显,就是在ajax与不同域的服务器进行通讯的中间加一层过渡,这一层过渡可以是php、jsp、c++等任何具备网络通讯功能的语言,由中间层向不同域的服务器进行读取数据的操作。
拿php做一个例子,如果需要对不同域的某一个php进行通讯,现在客户端的xmlhttprequest先query本域的一个php,然后由本域的这个php去和不同域的php进行通讯,然后由本域的php输出response;2. 使用<script>标签这个方法是利用<script>标签中的src来query一个php获得response,因为<script>标签的src属性不存在跨域的问题。
举个例子来让大家看得更清楚一点吧:1.<script LANGUAGE="Javascript"src=""id="get">2.</script>3.<script LANGUAGE="Javascript">4.<!--5.function get(url)6.{7.var obj = document.getElementById("get");8.obj.src = url;9.(obj.readStatus == 200)10.{11.alert(param);12.}13.}14.function query()15.{16.get(get.php);17.}18.//-->19.</script>20.<BODY>21.<INPUT TYPE="button"value="CLICK ME"onclick="query()">22.</BODY>23.</HTML>其中get.php的代码是1.<?php2.echo"var param = ''";3.?>最后的运行结果是,当你点击那个button,它会出现一个内容为””的对话框。
jquery ajax用法
jQuery的AJAX方法是一种使用JavaScript来处理异步请求的方法。
它允许您从服务器异步加载数据并更新页面的特定部分,而无需刷新整个页面。
在使用jQuery的AJAX方法时,您需要提供以下参数:
1. URL:指定要请求的服务器页面的URL。
2. Type:指定请求的类型,可以是get、post等。
3. Data:设置要发送到服务器的数据,可以是object、string等。
4. DataType:指定服务器响应的数据类型,可以是json、xml、html等。
5. Success:指定成功时要执行的回调函数。
6. Error:指定失败时要执行的回调函数。
例如,以下代码演示了如何使用jQuery的AJAX方法来从服务器加载数据:
.ajax({
url: "ajax.php",
type: "POST",
data: {id: 1},
dataType: "json",
success: function(data) {
成功时的回调函数
console.log(data);
},
error: function() {
失败时的回调函数
console.log("Error!");
}
});
此代码将使用POST方法向ajax.php发送数据{id:1},并期望以JSON格式接收响应。
如果成功,它将在控制台中输出响应数据。
如果出现错误,它将在控制台中输出"Error!"消息。
一、概述在Web开发中,跨域请求是一个常见的问题。
由于同源策略的限制,浏览器在发送AJAX请求时只能访问相同域名下的资源。
然而,随着互联网的发展,我们经常需要在不同的域名之间进行数据交换,这就需要对跨域请求进行处理。
本文将介绍使用jquery进行跨域请求的三种方法,希望能够帮助开发者更好地理解和应用这一技术。
二、跨域请求的概念我们需要了解跨域请求的概念。
所谓跨域请求,就是在一个域名下向另一个域名发送HTTP请求。
在HTTP协议中,域名是由协议、主机名和端口号组成的。
如果这三者有任何一个不同,就会被认为是跨域请求。
跨域请求受到同源策略的限制,因此需要进行特殊处理才能实现。
三、使用jquery进行跨域请求的三种方法1. jsonpjsonp是一种常用的跨域请求方法。
它利用了HTML元素中的<script>标签可以跨域加载资源的特性。
在jquery中,我们可以使用$.ajax()方法发送jsonp请求。
例如:```javascript$.ajax({url: 'xxxdataType: 'jsonp',success: function(data) {// 处理返回的数据}});```在这个例子中,我们通过设置dataType为'jsonp'来发送jsonp请求。
服务器端需要返回一个以callback函数包裹的JSON数据,jquery会自动执行这个callback函数,并将返回的数据传递给success回调函数。
2. CORSCORS(Cross-Origin Resource Sharing)是一种冠方标准的跨域请求解决方案。
它通过在HTTP头部加入一些特殊的字段来实现跨域资源共享。
在jquery中,我们也可以通过$.ajax()方法发送CORS请求。
例如:```javascript$.ajax({url: 'xxxcrossDom本人n: true,xhrFields: {withCredentials: true},success: function(data) {// 处理返回的数据}});```在这个例子中,我们通过设置crossDom本人n为true来告诉jquery这是一个跨域请求,并通过xhrFields设置withCredentials 为true来发送包含凭据的请求。
jquery中ajax处理跨域的三⼤⽅式由于JS同源策略的影响,因此js只能访问同域名下的⽂档。
因此要实现跨域,⼀般有以下⼏个⽅法:⼀、处理跨域的⽅式:1.代理2.XHR2HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问。
但ie10以下不⽀持只需要在服务端填上响应头:header("Access-Control-Allow-Origin:*");/*星号表⽰所有的域都可以接受,*/header("Access-Control-Allow-Methods:GET,POST");3.jsonP原理:ajax本⾝是不可以跨域的,通过产⽣⼀个script标签来实现跨域。
因为script标签的src属性是没有跨域的限制的。
其实设置了dataType: 'jsonp'后,$.ajax⽅法就和ajax XmlHttpRequest没什么关系了,取⽽代之的则是JSONP协议。
JSONP是⼀个⾮官⽅的协议,它允许在服务器端集成Script tags返回⾄客户端,通过javascript callback的形式实现跨域访问。
ajax的跨域写法:(其余写法和不跨域的⼀样):⽐如/*当前⽹址是localhost:3000*/js代码$.ajax({type:"get",url:"http://localhost:3000/showAll",/*url写异域的请求地址*/dataType:"jsonp",/*加上datatype*/jsonpCallback:"cb",/*设置⼀个回调函数,名字随便取,和下⾯的函数⾥的名字相同就⾏*/success:function(){。
}});/*⽽在异域服务器上,*/app.jsapp.get('/showAll',students.showAll);/*这和不跨域的写法相同*//*在异域服务器的showAll函数⾥,*/var db = require("./database");exports.showAll = function(req,res){/**设置响应头允许ajax跨域访问**/res.setHeader("Access-Control-Allow-Origin","*");/*星号表⽰所有的异域请求都可以接受,*/res.setHeader("Access-Control-Allow-Methods","GET,POST");var con = db.getCon();con.query("select * from t_students",function(error,rows){if(error){console.log("数据库出错:"+error);}else{/*注意这⾥,返回的就是jsonP的回调函数名+数据了*/res.send("cb("+JSON.stringify(r)+")");}});}⼆、解决ajax跨域访问、 JQuery 的跨域⽅法JS的跨域问题,我想很多程序员的脑海⾥⾯还认为JS是不能跨域的,其实这是⼀个错误的观点;有很多⼈在⽹上找其解决⽅法,教其⽤IFRAME去解决的⽂章很多,真有那么复杂吗?其实很简单的,如果你⽤JQUERY,⼀个GETJSON⽅法就搞定了,⽽且是⼀⾏代码搞定。
Jauerymobile ajax跨域原理及案例一、$.getJSON()跨域之原理/*可以跨域请求数据*/其原理是对<script>装载的服务端数据用全局函数(callback)操作首先写个简单示例:(jsonpCallback可动态创建注册成全局函数)<script type="text/javascript">var m = Math.random();var jsonpCallback = new Function("result", "alert(result.data);");</script><script type="text/javascript" src="http://localhost/json.php?jsonp=jsonpCallback"></script >服务端:<?phpecho "jsonpCallback({data:'json data'})";会弹出:json data$.get(url, params, callback)与$.post请求方法一样,只是请求类型不同返回的是字符格式,可以用 $.evalJSON()方法进行转换格式然后对JSON对象进行操作$.getJSON(url, params, callback)返回JSON对象,跨域示例如下:1.1. <?php2. function getdata()3. {4. $.getJSON(5. "/payment/payment/paytest?callback=?",6. {id:1,name:"name"},7. function(jsondata){8. alert(jsondata.json);9. });10. }11.12. 翻开jquery.的源码,一步步找:13.14. getJSON: function( url, data, callback ) {15. return jQuery.get(url, data, callback, "json");16. }17.18. 再找JQuery.get19.20. get: function( url, data, callback, type ) {21. // shift arguments if data argument was omited22.23. if ( jQuery.isFunction( data ) ) {24. type = type || callback;25. callback = data;26. data = null;27. }28.29. return jQuery.ajax({30. type: "GET",31. url: url,32. data: data,33. success: callback,34. dataType: type35. });36. }37.38. 再找 jQuery.ajax39.40. jQuery.ajax({41. url: url,42. type: type,43. dataType: "html",44. data: params,45. complete: function( res, status ) {46. // If successful, inject the HTML into all the matched elements47. if ( status === "success" || status === "notmodified" ) {48. // See if a selector was specified49. self.html( selector ?50. // Create a dummy div to hold the results51. jQuery("<div />")52. // inject the contents of the document in, removing the scripts53. // to avoid any 'Permission Denied' errors in IE54. .append(res.responseText.replace(rscript, ""))55.56. // Locate the specified elements57. .find(selector) :58.59. // If not, just inject the full result60. res.responseText );61. }62.63. if ( callback ) {64. self.each( callback, [res.responseText, status, res] );65. }66. }67. });68.69. return this;70. }71.72. 再找ajax方法,揭开秘密要来了:73.74. 由于太多,帖开头部分,有兴趣的同学自己去看下75.76. ajax: function( origSettings ) {77. var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings);78.79. var jsonp, status, data,80. callbackContext = origSettings && origSettings.context || s,81. type = s.type.toUpperCase();82.83. // convert data if not already a string84. if ( s.data && s.processData && typeof s.data !== "string" ) {85. s.data = jQuery.param( s.data, s.traditional );86. }87.88. 比较重要的一部分:89.90. http://localhost/index/ajax?callback=jsonp1274437815229&id=191.92. 服务器判断是否有这个callback参数,如果有就返回JS函数名+对象93.94. //jsonp = jsonp1274437815229(请求地址的回调参数)95.96. //jsonp全局函数97. window[ jsonp ] = window[ jsonp ] || function( tmp ) {98. data = tmp;99. success();100. complete();101. // Garbage collect102. window[ jsonp ] = undefined;二、用jquery的ajax跨域请求案例和注意事项业务需求:一台独立的新闻服务器(A),对外提供新闻。
⽤jQuery与JSONP轻松解决跨域访问的问题时间过得好快,⼜被拉回js战场时, 跨域问题这个伤疤⼜开疼了.好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项⽬,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘.跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient⽅式完成“跨域访问”的⼯作,然后在浏览器端⽤AJAX获取本机服务器端“跨域访问”对应的url.来间接完成跨域访问也是可以的.但很显然开发量⽐较⼤,但限制也最少,很多widget开放平台server端(如sohu博客开放平台)其实就么搞的.不在本次讨论范围.要讨论的是浏览器端的真正跨域访问,推荐的是⽬前jQuery $.ajax()⽀持get⽅式的跨域,这其实是采⽤jsonp的⽅式来完成的.复制代码代码如下:var qsData ={'searchWord':$("#searchWord").attr("value"),'currentUserId':$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};复制代码代码如下:$.getJSON(" http://跨域的dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?",function(json){if(json.属性名==值){// 执⾏代码}});这种⽅式其实是上例$.ajax({..}) api的⼀种⾼级封装,有些$.ajax api底层的参数就被封装⽽不可见了.这样,jquery就会拼装成如下的url get请求http://跨域的dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=%E7%94%A8%E4%BE%8B¤tUserId=5351&conditionBean.pageSize=15 jsonp的最基本的原理是:动态添加⼀个<script>标签,⽽script标签的src属性是没有跨域的限制的。
jquery的ajax和getJson跨域获取json数据的实现⽅法很多开发⼈员在使⽤jquery在前端和服务器端进⾏数据交互,所以很容易会认为在前端利⽤jquery就可以读取任何站点的数据了。
近⽇在进⾏开发时,因为要和第三⽅公司的⼀个项⽬进⾏数据的共享,因为考虑多不占⽤服务器的资源,遂决定直接在html进⾏数据的读取,不⾛服务器端进⾏中转了。
然后正好就遇到了浏览器端跨域访问的问题。
跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题。
jsonp是英⽂json with padding的缩写。
它允许在服务器端⽣成script tags⾄返回⾄客户端,也就是动态⽣成javascript标签,通过javascript callback的形式实现数据读取。
html页⾯端⽰例代码:复制代码代码如下://⾸先要引⼊jquery的js包jQuery(document).ready(function(){$.ajax({type : "get", //jquey是不⽀持post⽅式跨域的async:false,url : "/apitools/ajax_props.do", //跨域请求的URLdataType : "jsonp",//传递给请求处理程序,⽤以获得jsonp回调函数名的参数名(默认为:callback)jsonp: "jsoncallback",//⾃定义的jsonp回调函数名称,默认为jQuery⾃动⽣成的随机函数名jsonpCallback:"success_jsonpCallback",//成功获取跨域服务器上的json数据后,会动态执⾏这个callback函数success : function(json){alert(json);}});});服务器端⽰例代码,以java为例:服务器端代码,是重点,开始以为,只要客户端通过jsonp就可以直接跨域访问,其实不然,需要服务器端的⽀持才⾏。
这篇文章主要介绍了jquery+ajax实现跨域请求的方法,详细介绍了前台及后台的处理方法,是非常实用的技巧,需要的朋友可以参考下
本文实例讲述了jquery+ajax实现跨域请求的方法。
分享给大家供大家参考。
具体实现方法如下:
说明:这里的datatype 为jsonp ;type 只能为get
前台请求代码如下:
代码如下:
$.ajax({
type: get,
url: ,
datatype: jsonp,
jsonp: jsoncallback,
success: function (result) {
alert(result.success);
alert(result.content);
},
error: function (result, status) {
//处理错误
}
});
后台处理代码validaccountsexists.aspx如下:
代码如下:
string accounts = gamerequest.getquerystring(accounts);
string jsoncallback = gamerequest.getquerystring(jsoncallback);
response.contentencoding =system.text.encoding.utf8;
response.contenttype = application/json;
response.write(jsoncallback + ({\success\:\true\,\content\:\ + accounts + \}));
response.end();
希望本文所述对大家的jquery程序设计有所帮助。