在Firefox中通过AJAX跨域访问Web资源

简介:

本文为原创,如需转载,请注明作者和出处,谢谢!

一、解决在firefox中无法跨域访问的问题

AJAX从本质上讲就是命名用XMLHttpRequest组件来向服务端发送HTTP请求,请接收相应信息。至于成功接收到响应信息后的操作,就和普通的Web客户端程序类似了(一般用DOM将信息加到HTML组件中)。但问题就发生在了XMLHttpRequest组件上。虽然在大多数浏览器中(包括IEFirefox等)都叫这个名子。使用方法也类似。但在进行某些操作时却有不同的效果。

就拿跨域访问的问题来说。让我们先看看如下的html中的javascript代码:

test.html


< html >
     < head >
         < title ></ title >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" >
< script  type ="text/javascript" >   

//  获得IE和firefox浏览器中的XMLHttpRequest对象
function  getXMLHTTPRequest()
{
    var  myRequest  =   null ;
    if (window.XMLHttpRequest)    //  firefox
    {        
        myRequest 
=   new  XMLHttpRequest(); 
    }
    else   if ( typeof  ActiveXObject  !=   " #ff0000 " )   //  IE
    {              
        myRequest 
=   new  ActiveXObject( " Microsoft.XMLHTTP " );
    }          
    return  myRequest;          
}

var  myRequest;
function  onReadyState()    //  XMLHttpRequest处理异步访问状态时的事件
{
    if (myRequest.readyState  ==   4 )    //  4表示成功获得相应信息
    {              
        var  msg  =  document.getElementById( " msg " );
        msg.value 
=  myRequest.responseText             
    }
}
function  getServiceText()
{     
    myRequest 
=  getXMLHTTPRequest();
    if (myRequest)
    {         
        myRequest.onreadystatechange 
=  onReadyState;      
        try  
        {
            myRequest.open( 
" post " " http://www.blogjava.net " true );
        }
        catch (exception)
        {
            
var  msg  =  document.getElementById( " msg " );
            msg.value 
=  exception;  
         } 
         myRequest.send(
" test " );
    }         
}

</ script >
     </ head >
     < body >
         < input  id ="msg"  type ="text"   />
         < input  type ="button"  value ="信息"  onclick ="getServiceText()"   />
     </ body >
</ html >

如果在IE中访问上面的html文件,url如下:

http://localhost:8080/test.html

      会弹出一个对话框,大概意思是说您已经跨域访问了,可能存在风险,是否继续。如果继续执行的话,仍然可以访问 http://www.blogjava.net 。但是在 firefox 中却更本无法访问其它域的 url ,并且会抛出“调用方法  XMLHttpRequest.open  时权限不足”异常。解决的方法一般有两种,一种是修改 firefox 的设置,在 firefox 的地址栏中输入“ about:config ”,并找到 signed.applets.codebase_principal_support ,将其设为 true 。如图 1 所示。



                                               图1

但这种方法经过实现,仍然无法访问其他域的url,不知是不是新版的firefox把这个给屏蔽了。就算这种方法可行,也尽量不使用这种需要配置firefox的方法,而要使用编程的方法,在访问其它域之前,可以使用如下代码打开权限:

try 

    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); 
}
catch (exception)

    alert(exception); 
}

要注意的是,上面的代码只能用在firefox中,因此,要将其放到只有firefox才能执行到的代码块中,如在下面的块中:

if(window.XMLHttpRequest)    //  firefox
{        
     try 
    { 
        netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); 
    }
     catch (exception)
    { 
        alert(exception); 
    }
}


    不能将上面的代码放到getXMLHTTPRequest中,应放到getServiceText中。

注:如果test.html在通过web服务器访问,而是按着访问本地文件时访问test.html时,在IE中不会出现上述的提示对话框,而是直接就可以访问其他的域。

二、其他的跨浏览器问题

不同浏览器的XMLHttpRequest虽然接口一样,但在不同浏览器中调用XMLHttpRequest的方法和属性的效果不同。如send方法,在IE中可以不传参数,如myRequest.send();仍然可以正常工作,而在firefox中,必须为send方法传一个参数,也就是说,在firefoxsend方法参数没有默认值,必须为其赋值。为了通用起见,建议所有的send方法都为其赋一个参数值,哪怕是空串。

除了send方法,responseText属性也是一样,在IE中,responseText返回了整个web资源的内容,而在firefox中只返回web资源的第一行。

本文转自银河使者博客园博客,原文链接http://www.cnblogs.com/nokiaguy/archive/2008/05/15/1198604.html如需转载请自行联系原作者


银河使者

相关文章
|
12天前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
【7月更文挑战第15天】AJAX和Fetch API是Web开发中的关键工具,用于异步前后端交互。AJAX借助XMLHttpRequest实现页面局部更新,而Fetch API是现代的、基于Promise的HTTP请求接口,提供更强大功能和简洁语法。结合Python Web框架如Django或Flask,利用这两者能创造无缝体验,提升项目性能和用户体验。学习并应用这些技术,将使你的Web应用焕发新生。**
22 5
|
14天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
29 7
|
14天前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
【7月更文挑战第13天】构建现代Web应用的关键在于提供无缝用户体验,这涉及AJAX和Fetch API的异步数据交换以及Python(如Flask)的后端支持。Fetch API以其基于Promise的简洁接口,改进了AJAX的复杂性。例如,一个Flask应用可提供用户数据,前端利用Fetch API在不刷新页面的情况下显示信息。这种结合提升了效率,减少了服务器负载,是现代Web开发的趋势。随着技术发展,预期将有更多工具优化这一过程。
36 3
|
13天前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
【7月更文挑战第14天】在Web开发中,AJAX和Fetch API扮演着关键角色,用于前后端异步通信。AJAX通过XMLHttpRequest实现页面局部更新,但回调模式和复杂API有一定局限。Fetch API作为现代替代,利用Promise简化异步处理,提供更丰富功能和错误处理。Python后端如Flask、Django支持这些交互,助力构建高性能应用。从AJAX到Fetch API的进步,结合Python,提升了开发效率和用户体验。
13 0
|
13天前
|
XML 前端开发 API
颠覆传统!AJAX、Fetch API与Python后端,开启Web开发新篇章!
【7月更文挑战第14天】Web开发中,AJAX作为异步通信先驱,与新兴的Fetch API一起革新交互体验。Fetch基于Promise,简化了请求处理。Python后端,如Flask,提供稳定支撑。这三者的融合,推动Web应用达到新高度,实现高效、实时交互。通过示例展示,我们看到从发送请求到更新UI的流畅过程,以及Python如何轻松返回JSON数据。这种组合揭示了现代Web开发的潜力和魅力。
17 0
|
1月前
|
开发框架 .NET PHP
Web服务搭建&站库分离&路由访问
Web服务搭建&站库分离&路由访问
|
22天前
|
Java 应用服务中间件 Linux
Tomcat安装部署[单机软件],可以让用户开发的WEB应用程序,变成可以被访问的网页,Tomcat的使用需要jdk环境
Tomcat安装部署[单机软件],可以让用户开发的WEB应用程序,变成可以被访问的网页,Tomcat的使用需要jdk环境
|
22天前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
|
29天前
|
机器学习/深度学习 运维 网络协议
函数计算产品使用问题之创建一个http服务,可以通过公网来访问,是否只能选择web函数
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
3天前
|
JSON API 开发者
惊!Python Web开发新纪元,RESTful API设计竟能如此性感撩人?
【7月更文挑战第24天】在 Python Web 开发领域, RESTful API 设计成为一种艺术, 关注用户体验与开发者友好性。
21 7