-
Jquery.ajax 拒绝访问(跨域)10
我本机的地址是192.168.123.206
我写了一个ashx文件 是专门处理传过来的参数输出 html的。。
当第一调用我的ashx文件 传一个type 参数 就可以输出相关信息
因为script.src 属性是没有跨域的。
所以<script src="http://192.168.123.206/test/myfile.ashx?type=hello"/> 这样就可以引用我的ashx文件 并且输出
后台
...
context.Response.Write("xxx"); (重点)这里省略代码,具体就是输出一个按钮 这个按钮就有个onlick事件,然这个事件就是ajax, 再次访问ashx文件。然而第一获取这个input 之后。点击input 就会提示拒绝访问。
这个绝对是跨域问题,可是我上网查找了好多资料,都无法解决。 有的说Jquery.ajax已经解决,可是还是不行。。
补充一下,程序是正常运行的,ajax 的方法就是jquery的方法。
可是被调用就出现拒绝访问, 所以重点就是怎么处理跨域问题。。 谢谢大侠们··
context.Response.End();
...
前台
<html>
<body>
<script src="http://192.168.123.206/test/myfile.ashx?type=hello"/>
</body>
</html>
2010年8月06日 10:33
3个答案 按时间排序 按投票排序
-
跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,
所以通过本机服务器端通过类似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")};
$.ajax({
async:false,
url: http://跨域的dns/document!searchJSONResult.action,
type: "GET",
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: qsData,
timeout: 5000,
beforeSend: function(){
//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
},
success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
if(json.actionErrors.length!=0){
alert(json.actionErrors);
}
genDynamicContent(qsData,type,json);
},
complete: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 });
},
error: function(xhr){
//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
//请求出错处理
alert("请求出错(请检查相关度网络状况.)");
}
});
注意:$.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
在响应端(http://跨域的dns/document!searchJSONResult.action),
通过 jsoncallback = request.getParameter("jsoncallback") 得到jquery端随后要回调的js function name:jsonp1236827957501
然后 response的内容为一个Script Tags:"jsonp1236827957501("+按请求参数生成的json数组+")";
jquery就会通过回调方法动态加载调用这个js tag:jsonp1236827957501(json数组);
这样就达到了跨域数据交换的目的.
jsonp的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.
这样其实"jQuery AJAX跨域问题"就成了个伪命题了,jquery $.ajax方法名有误导人之嫌.
如果设为dataType: 'jsonp', 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问
JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,
我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。
这种跨域的通讯方式称为JSONP。
jsonCallback 函数jsonp1236827957501(....): 是浏览器客户端注册的,获取跨域服务器上的json数据后,回调的函数
Jsonp原理:
首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意:服务端得到callback的数值后,要用jsonp1236827957501(......)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)
可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.
注意,jquey是不支持post方式跨域的.
为什么呢?
虽然采用post +动态生成iframe是可以达到post跨域的目的(有位js牛人就是这样把jquery1.2.5 打patch的),但这样做是一个比较极端的方式,不建议采用.
也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的, 万不得已还是不要剑走偏锋..
client端跨域访问的需求看来也引起w3c的注意了,看资料说html5 WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案,2010年8月06日 11:02
相关推荐
在本示例中,我们关注的是"jquery3.0.min.js"和"jquery.param.js"这两个jQuery库的特定版本,以及如何利用它们来解决跨域数据传输的问题。在"跨域代码Demo"中,我们将探讨如何通过URL参数实现Tomcat服务器与WebStorm...
本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...
总之,jQuery.fileDownload是实现跨域文件下载的利器,配合SpringBoot的文件处理能力,能够轻松地在Web应用中实现高效、安全的文件下载功能。理解其工作原理并合理运用,能极大地提升用户体验。
**jQuery.AJAX 与Action交互详解** 在Web开发中,前端与后端的数据交互是不可或缺的一部分,jQuery.AJAX 提供了一种高效且灵活的方式来实现客户端与服务器端的异步通信。本篇文章将深入探讨如何使用jQuery.AJAX与...
本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...
2. **跨域下载支持**:jQuery.filedownload支持跨域文件下载,这在现代Web应用中非常常见,因为很多资源可能存放在不同的服务器上。 3. **流式下载**:对于大文件,插件可以实现流式下载,即边接收数据边写入本地,...
2. 文件上传:通过XMLHttpRequest Level 2,jQuery Form可以实现跨域文件上传,兼容多种浏览器。 3. 进度条显示:在上传大文件时,提供进度反馈,用户可以直观了解上传进度。 4. 多种提交模式:支持GET和POST方式,...
5. AJAX请求:对于网页的异步交互,jQuery.common可能会提供统一的AJAX请求方法,简化了跨域请求、数据解析等步骤。 6. 兼容性处理:考虑到浏览器之间的差异,jQuery.common通常会包含一些兼容性修复代码,确保在...
5. **跨域提交**:配合CORS设置,`jquery.form.js`可以实现跨域的表单提交。 6. **兼容性**:`jquery.form.js`支持多种提交方式,包括传统的POST和PUT,以及XMLHttpRequest Level 2的FormData。 在实际使用中,...
此外,`$.fn.ajaxSubmit`方法还可以接受一个完整的jQuery.ajax选项对象,这意味着你可以使用所有jQuery的Ajax选项,如`cache`、`timeout`、`contentType`等,来定制你的异步请求。 总结一下,jQuery.form插件通过...
jQuery,作为一个广泛使用的JavaScript库,提供了简单易用的API来实现Ajax操作。然而,有时我们可能会遇到跨域问题,这是由于浏览器的安全策略限制了不同源之间的通信。在这种情况下,Iframe可以作为一种解决方案,...
在Web开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。而在处理表单(form)相关的操作时,jQuery Form插件是不可或缺的一部分。在给定的压缩包文件中,我们看到...
在上传过程中,插件首先会获取用户选择的文件,然后将这些文件的信息(如文件名、大小等)通过Ajax发送到服务器,服务器响应后,插件会根据响应内容更新进度条和状态信息。 四、使用方法 在实际项目中,使用jQuery...
4. **Ajax操作**:jQuery封装了XMLHttpRequest对象,提供了`.ajax()`, `.get()`, `.post()`等方法,使得异步数据请求和处理更加简洁。它还支持JSONP、jsonpCallback等功能,方便与跨域服务交互。 5. **链式操作**:...
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现。 1.第一步 服务端设置响应头,在webapi的web.config做如下...
jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务,极大地提高了前端开发效率。它是基于JavaScript的,但通过封装了一系列的API,使得JavaScript的使用更加简单和高效...
6. **跨域提交**: 支持CORS(跨源资源共享)设置,允许向不同源的服务器发送Ajax请求。 在实际应用中,结合这两个文件,开发者可以构建出具有高效交互和流畅用户体验的Web表单。然而,需要注意的是,描述中提到的...
在Web开发中,由于浏览器的同源策略限制,JavaScript无法直接访问不同源的资源,这在使用jQuery进行AJAX操作时会遇到问题。本篇将详细介绍如何解决jQuery跨域问题,涉及的方法包括$.get、$.post和$.getJSON等。 ...
其中,`.ajax()`是最通用的,支持JSONP、jsonpCallback等多种跨域解决方案。`.serialize()`方法可以将表单数据序列化为URL字符串,方便发送到服务器。 六、插件生态 jQuery的插件生态丰富,如Bootstrap、jQuery UI...
python 17、AJAX异步 3-1_使用jQuery实现AJAX操作、跨域_Day03_am.mp4