0 0

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个答案 按时间排序 按投票排序

0 0

我想知道 http://192.168.123.206/test/myfile.ashx生成后的代码

2010年8月10日 23:31
0 0

直说,jquery就只有json/jsonp/script三种类型是跨域的。

2010年8月06日 11:18
0 0

跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,
所以通过本机服务器端通过类似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&currentUserId=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+跨域代码Demo

    在本示例中,我们关注的是"jquery3.0.min.js"和"jquery.param.js"这两个jQuery库的特定版本,以及如何利用它们来解决跨域数据传输的问题。在"跨域代码Demo"中,我们将探讨如何通过URL参数实现Tomcat服务器与WebStorm...

    利用JQuery jsonp实现Ajax跨域请求json数据

    本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...

    jquery.fileDownload-1.4.5.zip

    总之,jQuery.fileDownload是实现跨域文件下载的利器,配合SpringBoot的文件处理能力,能够轻松地在Web应用中实现高效、安全的文件下载功能。理解其工作原理并合理运用,能极大地提升用户体验。

    jQuery.Ajax 与action交互

    **jQuery.AJAX 与Action交互详解** 在Web开发中,前端与后端的数据交互是不可或缺的一部分,jQuery.AJAX 提供了一种高效且灵活的方式来实现客户端与服务器端的异步通信。本篇文章将深入探讨如何使用jQuery.AJAX与...

    Jquery跨域Ajax请求测试

    本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...

    前端项目-jquery.fileDownload.zip

    2. **跨域下载支持**:jQuery.filedownload支持跨域文件下载,这在现代Web应用中非常常见,因为很多资源可能存放在不同的服务器上。 3. **流式下载**:对于大文件,插件可以实现流式下载,即边接收数据边写入本地,...

    jquery form jquery.form.js

    2. 文件上传:通过XMLHttpRequest Level 2,jQuery Form可以实现跨域文件上传,兼容多种浏览器。 3. 进度条显示:在上传大文件时,提供进度反馈,用户可以直观了解上传进度。 4. 多种提交模式:支持GET和POST方式,...

    jquery.common通用方法

    5. AJAX请求:对于网页的异步交互,jQuery.common可能会提供统一的AJAX请求方法,简化了跨域请求、数据解析等步骤。 6. 兼容性处理:考虑到浏览器之间的差异,jQuery.common通常会包含一些兼容性修复代码,确保在...

    jquery.from.js & juery.js

    5. **跨域提交**:配合CORS设置,`jquery.form.js`可以实现跨域的表单提交。 6. **兼容性**:`jquery.form.js`支持多种提交方式,包括传统的POST和PUT,以及XMLHttpRequest Level 2的FormData。 在实际使用中,...

    使用jQuery.form插件,实现完美的表单异步提交

    此外,`$.fn.ajaxSubmit`方法还可以接受一个完整的jQuery.ajax选项对象,这意味着你可以使用所有jQuery的Ajax选项,如`cache`、`timeout`、`contentType`等,来定制你的异步请求。 总结一下,jQuery.form插件通过...

    Iframe模拟Jquery.Ajax

    jQuery,作为一个广泛使用的JavaScript库,提供了简单易用的API来实现Ajax操作。然而,有时我们可能会遇到跨域问题,这是由于浏览器的安全策略限制了不同源之间的通信。在这种情况下,Iframe可以作为一种解决方案,...

    jquery.form.min.js

    在Web开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。而在处理表单(form)相关的操作时,jQuery Form插件是不可或缺的一部分。在给定的压缩包文件中,我们看到...

    jquery.fileupload.js

    在上传过程中,插件首先会获取用户选择的文件,然后将这些文件的信息(如文件名、大小等)通过Ajax发送到服务器,服务器响应后,插件会根据响应内容更新进度条和状态信息。 四、使用方法 在实际项目中,使用jQuery...

    jquery.min.zip

    4. **Ajax操作**:jQuery封装了XMLHttpRequest对象,提供了`.ajax()`, `.get()`, `.post()`等方法,使得异步数据请求和处理更加简洁。它还支持JSONP、jsonpCallback等功能,方便与跨域服务交互。 5. **链式操作**:...

    jQuery.ajax 跨域请求webapi设置headers的解决方案

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现。 1.第一步 服务端设置响应头,在webapi的web.config做如下...

    tableExport.jquery.plugin-1.10.22.zip

    jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务,极大地提高了前端开发效率。它是基于JavaScript的,但通过封装了一系列的API,使得JavaScript的使用更加简单和高效...

    jquery.js+jquery.form.js 插件

    6. **跨域提交**: 支持CORS(跨源资源共享)设置,允许向不同源的服务器发送Ajax请求。 在实际应用中,结合这两个文件,开发者可以构建出具有高效交互和流畅用户体验的Web表单。然而,需要注意的是,描述中提到的...

    解决JQurey跨域问题$.get|$.post|$.getJSON等等统统可跨域

    在Web开发中,由于浏览器的同源策略限制,JavaScript无法直接访问不同源的资源,这在使用jQuery进行AJAX操作时会遇到问题。本篇将详细介绍如何解决jQuery跨域问题,涉及的方法包括$.get、$.post和$.getJSON等。 ...

    jquery.api.3.2.1.chm

    其中,`.ajax()`是最通用的,支持JSONP、jsonpCallback等多种跨域解决方案。`.serialize()`方法可以将表单数据序列化为URL字符串,方便发送到服务器。 六、插件生态 jQuery的插件生态丰富,如Bootstrap、jQuery UI...

    python 17、AJAX异步 3-1_使用jQuery实现AJAX操作、跨域_Day03_am.mp4

    python 17、AJAX异步 3-1_使用jQuery实现AJAX操作、跨域_Day03_am.mp4

Global site tag (gtag.js) - Google Analytics