这篇文章主要介绍了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程序设计有所帮助。
jQuery Ajax 全解析【.ajax .post .get】 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的 key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件,例如表单。 示例代码: $(".ajax.load").load("https://www.doczj.com/doc/2710126440.html,/QLeelulu/archive/2008/03 /30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即 $(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求 参数: url (String) : 发送请求的URL地址.
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程HTML 文件代码并插入至DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的HTML 文档,DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件,例如表单。 示例代码: $(".ajax.load").load("[url]https://www.doczj.com/doc/2710126440.html,/QLeelulu/archive/2008/03/30/1130270.html[/url] .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。 注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 这是一个简单的GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用$.ajax。示例代码: $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){ //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图
jQuery Ajax 实例全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程HTML 文件代码并插入至DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的HTML 文档,DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件,例如表单。 示例代码: $(".ajax.load").load("https://www.doczj.com/doc/2710126440.html,/yeer/archive/2009/06/10/1500682.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。 注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。
jQuery 如何调用AJax(五种方法)方法一:load() 使用load方法可以帮助你加载非本地的HTML页面,并注入到当前调用的DOM中。 $.ajaxSetup({ cache: false }); var ajax_load = ""; var loadUrl = "ajax/load.php"; $("#load_button").click(function() { $("#result").html(ajax_load).load(loadUrl);
}); cache: false 的意思是让浏览器不执行缓存功能,这样的话页面的内容将实时更新,否则某些浏览器会出现内容不更新的问题,当点击按钮后,因为加载过程需要时间,所以这里我们先使用.html方法来添加一个”加载中”的图片,然后执行load方法。 高级使用方法: 1. 加载页面某一部分 例如只加载ID为”pic”的部分,代码如下: $("#load_button").click(function() { $("#result").html(ajax_load).load(loadUrl + " #pic"); }); 2. 递交参数执行页面加载
可以给load方法添加GET或者POST参数,代码如下: $("#load_get").click(function() { $("#result").html(ajax_load).load(loadUrl, "page=0&size=10"); }); $("#load_post").click(function() { $("#result").html(ajax_load).load(loadUrl, { page: 0, size: 10 }); }); 3. 添加回调函数 回调函数可以让你在结束AJAX调用后调用该函数,比如在页面load后提示用户加载完毕:
JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON)。AJAX和JSONP在jQuery中的调用方式看起来极为相像,千万不要被这种现象迷惑,它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容,而JSONP是动态的添加 服务端代码:
很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了。然后正好就遇到了浏览器端跨域访问的问题。 跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题。 目前浏览器端跨域访问常用的两种方法有两种: 1、通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的。 jsonp是英文json with padding的缩写。它允许在服务器端生成script tags至返回至客户端,也就是动态生成javascript 标签,通过javascript callback的形式实现数据读取。 html页面端示例代码: 代码如下: //首先要引入jquery的js包 jQuery(document).ready(function(){ $.ajax({ type : "get", //jquey是不支持post方式跨域的 async:false, url : "https://www.doczj.com/doc/2710126440.html,/apitools/ajax_props.do", //跨域请求的URL dataType : "jsonp", //传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback) jsonp: "jsoncallback", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名 jsonpCallback:"success_jsonpCallback", //成功获取跨域服务器上的json数据后,会动态执行这个callback函数 success : function(json){ alert(json); } }); }); 服务器端示例代码,以java为例: 服务器端代码,是重点,开始以为,只要客户端通过jsonp就可以直接跨域访问,其实不然,需要服务器端的支持才行。代码如下: public void jsonpTest() throws IOException{ HttpServletRequest request = ServletActionContext.getRequest(); HttpServletResponse response = ServletActionContext.getResponse(); //根据html指定的jsonp回调函数的参数名,获取回调函数的名称 //callbackName的值其实就是:success_jsonpCallback String callbackName = (String)request.getAttribute("jsoncallback"); //简单模拟一个json字符串,实际可使用google的gson进行转换,次数通过字符串拼接 //{"name":"张三","age":28} //\是对"号进行转义 String jsonStr = "{\"name\":\"张三\",\"age\":28}"; //最终返回的数据为:success_jsonpCallback({"name":"张三","age":28}) String renderStr = callbackName+"("+jsonStr+")"; response.setContentType("text/plain;charset=UTF-8"); response.getWriter().write(renderStr); } jsonp的原理:
发表于:2010-1-11 浏览:965 作者:转载遗失来源:网络转载 关键字:AJAX,详解,请求 描述:注意:以下代码请在Firefox3.5、Chrom e3.0、Safari4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见 注意:以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同。 跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见,比如说通过style 标签加载外部样式表文件、通过img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过Webfont 加载字体文件等等。默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy)。 那么,什么是同源策略呢?如果两个页面的协议、域名和端口是完全相同的,那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同,则还可以通过设置document.domain 属性将它们认为是同源的。 随着Web2.0 和SNS 的兴起,Web 应用对跨域访问的需求也越来越多,但是,在脚本中进行跨域请求是受安全性限制的,Web 开发人员迫切需要提供一种更安全、方便的跨域请求方式来融合(Mashup)自己的Web 应用。这样做的一个好处就是可以将请求分摊到不同的服务器,减轻单个服务器压力以提高响应速度;另外一个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负载。 值得庆幸的是,跨域请求的标准已经出台,主流浏览器也已经实现了这一标准。W3C 工作组中的 Web Applications Working Group(Web 应用工作组)发布了一个Cross-Origin Resource Sharing(跨域资源共享,该规范地址:https://www.doczj.com/doc/2710126440.html,/TR/access-control/和 https://www.doczj.com/doc/2710126440.html,/2006/waf/access-control/)推荐规范来解决跨域请求的问题。该规范提供了一种更安全的跨域数据交换方法。具体规范的介绍可以访问上面提供的网站地址。值得注意的是:该规范只能应用在类似XMLHttprequest 这样的API 容器内。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了Cross-Origin Resource Sharing 规范,已经可以进行跨域请求了。 Cross-Origin Resource Sharing 的工作方式是通过添加HTTP 头的方法来判断哪些资源允许 Web 浏览器访问该域名下的信息。然而,对于那些HTTP 请求导致用户数据产生副作用的请求方法(特别是对于除了GET、某些MIME 类型的POST 之外的HTTP方法),该规范要求浏览器对请求进行“预先验”,通过发送HTTP 的OPTIONS 请求头询问服务器有哪些支持的方法,在征得服务器的同意后,再使用实际的HTTP 请求方法发送实际的请求。服务器也可以通知客户端是否需要将验证信息(如Cookie 和HTTP Authentication 数据)随同请求一起发送。 下面我们就采用实际的例子说明Cross-Origin Resource Sharing 是如何工作的。 1,简单请求
JQUERY AJAX异步操作详细说明 AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和XML)。它并非一种新的技术,而是以下几种原有技术的结合体。 1)使用CSS和XHTML来表示。 2)使用DOM模型来交互和动态显示。 3)使用XMLHttpRequest来和服务器进行异步通信。 4)使用javascript来绑定和调用。 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型: 1)不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制 权马上就被返回到浏览器。界面不会出现白板,在得到服务器响应之前 还可以友好的给出一个加载提示。 2)不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数,待 服务器响应到达时,触发回调函数,并且传递所需的少量数据。“按需 取数据”也降低了服务器的压力。 3)不需要使用隐藏或内嵌的框架。在XHR对象之前,模拟Ajax通信通常 使用hack手段,如使用隐藏的或内嵌的框架(
深圳网站建设 :https://www.doczj.com/doc/2710126440.html, jquery 里面Ajax 几种不同的调用方法 我们经常会使用ajax 去调用我们的.net 里面的ashx 去实现无刷新调用数据的方法,下面我们就来讲一下我们常用的几种方法。 第一种方法是load 方法,下面是我们的代码 //url.ashx 是调用的地址,data 是返回的信息 $(".div").load("url.ashx", function (data){ //得到的信息 }); //url.ashx 是调用的地址,data 是返回的信息,type 是参数类型,有post ,与get 两种,datatype 是返回参数的类型,id 是传入的参数 第二种方法就是$.ajax 方法,代码如下 $.ajax({ url: "url.ashx", type: "GET", dataType: "json", data: { id: "1" }, success: function (data) { //得到的信息 } }); //url.ashx 是调用的地址,data 是返回的信息,id 是传入的参数 第三种方法就是$.get 方法,代码如下 $.get("url.ashx", { id: "1"}, function (data, textStatus){ //得到的信息 }); //url.ashx 是调用的地址,data 是返回的信息,id 是传入的参数 第四种方法就是$.post 方法,代码如下 $.post("url.ashx", { id: "1"}, function (data, textStatus){ //得到的信息 });
实例
通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"https://www.doczj.com/doc/2710126440.html,",async:false}); $("#myDiv").html(htmlobj.responseText); }); });
HTML 代码:
可选。AJAX 请求设置。所有选项都是可选的。 async 类型:Boolean 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设 置为 false。 注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 beforeSend(XHR) 类型:Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。 XMLHttpRequest 对象是唯一的参数。 这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。 cache 类型:Boolean 默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页 面。 jQuery 1.2 新功能。 complete(XHR, TS) 类型:Function 请求完成后回调函数 (请求成功或失败之后均调用)。 参数:XMLHttpRequest 对象和一个描述请求类型的字符串。 这是一个 Ajax 事件。 contentType 类型:String 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。 默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定 会发送给服务器(即使没有数据要发送)。 context 类型:Object 这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对 象 (如果不设定这个参数, 那么 this 就指向调用本次 AJAX 请求时传递的 options 参数) 。 比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为 这个 DOM 元素。
最近公司内部的architecture组正在热烈讨论ajax,最后难免会谈到如何跨域这个问题,因为从ajax诞生那天起,xmlHttprequest对象在firefox下不能跨域请求的问题就一直存在,等待浏览器们去解决这个问题显然不太现实,聪明的web开发人员们早就想了一系列的方法来解决这个问题,下面列举两个比较不错的方法: 1. 使用中间层过渡的方式: 中间过渡,很明显,就是在ajax与不同域的服务器进行通讯的中间加一层过渡,这一层过渡可以是php、jsp、c++等任何具备网络通讯功能的语言,由中间层向不同域的服务器进行读取数据的操作。拿php做一个例子,如果需要对不同域的某一个php进行通讯,现在客户端的xmlhttprequest先query本域的一个php,然后由本域的这个php去和不同域的php进行通讯,然后由本域的php输出response; 2. 使用 3. 20.
21. 22. 23.