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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4675 天前的主题，其中的信息可能已经有所发展或是发生改变。

初学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

ajax

示例

18 条回复 • 1970-01-01 08:00:00 +08:00

WarWithinMe

2012-03-05 16:42:35 +08:00

https的关系？

xhslyf

2012-03-05 16:44:12 +08:00

@WarWithinMe 不清楚，但应该不是。我在本地调试的，请求的文件也是放在本地来进行简单的模拟。

guoquan

2012-03-05 16:50:07 +08:00

弄个本地服务器试试，浏览器的安全策略可能会阻止一些xhr请求

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

2012-03-05 17:18:13 +08:00

@guoquan 本地架上IIS，然后通过http://localhost/访问，并且把请求类型改为“get”。这样就好了……但是为什么要改成get？

cougar

2012-03-05 17:23:08 +08:00

需要搭建本地环境localhost访问，不然在52行处会报错“拒绝访问”

cougar

2012-03-05 17:23:56 +08:00

post也是可以的

xhslyf

2012-03-05 17:24:37 +08:00

@cougar 嗯，你看5楼，但不明白为什么要改为get，正在查资料中……

xhslyf

2012-03-05 17:26:17 +08:00

@cougar 用post在火狐下，按照我的代码中“theTarget.innerHTML = "<p>" + request.statusText + "</p>";”会提示“Method Not Allowed”。

xhslyf

2012-03-05 17:27:36 +08:00

用post传输，在火狐下“request.status”的状态是“405”。

soulteary

2012-03-05 17:30:20 +08:00

@xhslyf win下，百度一下，xmapp（lamp for win），简单好用。
或许你设置一下本地安全设置，就不会出错了...

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

2012-03-05 17:32:45 +08:00

405说明你在服务器端没有实现这个方法（即post）⋯⋯

cougar

2012-03-05 17:34:20 +08:00

12楼很全了

xhslyf

2012-03-05 19:31:25 +08:00

@chone 按照书上讲的，我代码中“request.send()”下面的“return false;”就是用来阻止Form默认动作的。
另外，我加上你给出的代码，也没有解决post传输方式的问题。（我搭建IIS后，用get传输方式可以在5款主流浏览器下正常Ajax，但post不行）。

@keakon 能详细讲讲吗？

keakon

2012-03-05 20:09:56 +08:00

@xhslyf 原理细说起来很麻烦，最好自己看看资料。

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

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

至于权限问题，很多浏览器对本地网页有限制，不允许路径为file:///...的AJAX请求，必须放在服务器上。

Mutoo

2012-03-05 20:23:08 +08:00

要搭建本地服务器（localhost）才可以。直接双击打开网页的话，ajax脚本无法通过一些浏览器的安全沙箱，因为如果有人构造恶意的脚本的话可能会把你电脑里的私人文件给post出去，这样很危险。

xhslyf

2012-03-06 10:56:42 +08:00

@keakon 了解了大概，谢谢。