V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xhslyf
V2EX  ›  编程

一个Ajax的练习,在Firefox和Safari下生效,Chrome、IE系列、Opera下均无效,求助!

  •  
  •   xhslyf · 2012-03-05 16:41:17 +08:00 · 5103 次点击
    这是一个创建于 4407 天前的主题,其中的信息可能已经有所发展或是发生改变。
    初学JS,在看《JavaScript DOM编程艺术(第二版)》,照着书上的示例写了段Ajax的练习……

    附件解压后运行“contact.html”,填写表单提交,会有一个无刷新页面显示感谢信息的Ajax效果,它在Firefox和Safari下生效,Chrome、IE系列、Opera下均无效,而且从书籍官网上下载源码回来测试发现它的源码也是这样的,折腾了很久没弄出来……

    JS代码在“global.js”中,“modernizr-1.6.min.js”是一个类库,书上示例用到,我也就保留下来了。

    IE下调试有一个拒绝访问,但我不知道原因是什么,请大家帮忙。

    附件下载:https://jianguoyun.com/c/pubfile/prdQHlKJuokOH7axHQgusp0whZAr_K0XXvNOkuRG-ms
    18 条回复    1970-01-01 08:00:00 +08:00
    WarWithinMe
        1
    WarWithinMe  
       2012-03-05 16:42:35 +08:00
    https的关系?
    xhslyf
        2
    xhslyf  
    OP
       2012-03-05 16:44:12 +08:00
    @WarWithinMe 不清楚,但应该不是。我在本地调试的,请求的文件也是放在本地来进行简单的模拟。
    guoquan
        3
    guoquan  
       2012-03-05 16:50:07 +08:00
    弄个本地服务器试试,浏览器的安全策略可能会阻止一些xhr请求
    WarWithinMe
        4
    WarWithinMe  
       2012-03-05 16:57:00 +08:00
    调试一下发现
    var matches = request.responseText.match(/<article>([\s\S]+)<\/article>/);
    if(matches.length > 0)
    这里是错的。。
    应该要检查matches是否为null,而不是直接检查它的长度。
    当没有匹配时,matches为null
    xhslyf
        5
    xhslyf  
    OP
       2012-03-05 17:18:13 +08:00
    @guoquan 本地架上IIS,然后通过http://localhost/访问,并且把请求类型改为“get”。这样就好了……但是为什么要改成get?
    cougar
        6
    cougar  
       2012-03-05 17:23:08 +08:00
    需要搭建本地环境localhost访问,不然在52行处会报错“拒绝访问”
    cougar
        7
    cougar  
       2012-03-05 17:23:56 +08:00
    post也是可以的
    xhslyf
        8
    xhslyf  
    OP
       2012-03-05 17:24:37 +08:00
    @cougar 嗯,你看5楼,但不明白为什么要改为get,正在查资料中……
    xhslyf
        9
    xhslyf  
    OP
       2012-03-05 17:26:17 +08:00
    @cougar 用post在火狐下,按照我的代码中“theTarget.innerHTML = "<p>" + request.statusText + "</p>";”会提示“Method Not Allowed”。
    xhslyf
        10
    xhslyf  
    OP
       2012-03-05 17:27:36 +08:00
    用post传输,在火狐下“request.status”的状态是“405”。
    soulteary
        11
    soulteary  
       2012-03-05 17:30:20 +08:00
    @xhslyf win下,百度一下,xmapp(lamp for win),简单好用。
    或许你设置一下本地安全设置,就不会出错了...
    chone
        12
    chone  
       2012-03-05 17:31:30 +08:00
    代码中有一个最基本的错误。

    contact.html 页面里的表单是一个基本的html form 并且action属性已经指向 submit.html。虽然在代码里有给它绑定了onsubmit的事件用以发起ajax,但是里面并没有prevent掉form的默认动作,所以提交后页面要以默认方式转入到submit.html,根本看不到ajax的效果。

    //需要加入阻止默认事件的代码先
    whichForm.onsubmit = function(e){
    var event = e || window.event;
    //
    if (event.preventDefault) {
    event.preventDefault();
    }
    // IE
    event.returnValue = false; // IE

    ...
    };


    另外ajax不能跨域访问,所以需要在本地建立一个服务器来运行这段内容(当然上传到某个服务器也可以)。lz应该先把这两部分做了。
    keakon
        13
    keakon  
       2012-03-05 17:32:45 +08:00
    405说明你在服务器端没有实现这个方法(即post)⋯⋯
    cougar
        14
    cougar  
       2012-03-05 17:34:20 +08:00
    12楼很全了
    xhslyf
        15
    xhslyf  
    OP
       2012-03-05 19:31:25 +08:00
    @chone 按照书上讲的,我代码中“request.send()”下面的“return false;”就是用来阻止Form默认动作的。
    另外,我加上你给出的代码,也没有解决post传输方式的问题。(我搭建IIS后,用get传输方式可以在5款主流浏览器下正常Ajax,但post不行)。

    @keakon 能详细讲讲吗?
    keakon
        16
    keakon  
       2012-03-05 20:09:56 +08:00
    @xhslyf 原理细说起来很麻烦,最好自己看看资料。

    简单来说,浏览器访问一个URL时,会根据不同的方法(GET、POST等)来构造不同的数据。在服务器端则需要区分这些方法,根据你的逻辑做出不同的处理。

    我不知道你的服务器端用的什么语言,如果只是静态的HTML,那么web服务器一般只会处理GET方法,其他方法则返回405错误代码,表示这个方法不可用。这就好像网页不存在时返回404一样。

    至于权限问题,很多浏览器对本地网页有限制,不允许路径为file:///...的AJAX请求,必须放在服务器上。
    Mutoo
        17
    Mutoo  
       2012-03-05 20:23:08 +08:00
    要搭建本地服务器(localhost)才可以。直接双击打开网页的话,ajax脚本无法通过一些浏览器的安全沙箱,因为如果有人构造恶意的脚本的话可能会把你电脑里的私人文件给post出去,这样很危险。
    xhslyf
        18
    xhslyf  
    OP
       2012-03-06 10:56:42 +08:00
    @keakon 了解了大概,谢谢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4459 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 10:02 · PVG 18:02 · LAX 03:02 · JFK 06:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.