中国领先的IT技术网站
|
|

一次Ajax查错的经历

我有一朋友做网站,用 jQuery 的 Ajax 方法从后端载入一段 HTML 代码然后动态插入到网页的 Div 元件中。这个东西太普遍了。jQuery 强大的 load 方法可以完成这个事情。朋友的代码是这么写的:

作者:陈皓来源:博客园|2012-08-28 09:21

沙龙活动 | 去哪儿、陌陌、ThoughtWorks在自动化运维中的实践!10.28不见不散!


先说故事,再说想法吧。

我有一朋友做网站,用 jQuery 的 Ajax 方法从后端载入一段 HTML 代码然后动态插入到网页的 p 元件中。这个东西太普遍了。jQuery 强大的 load 方法可以完成这个事情。朋友的代码是这么写的:

  1. var tab = jQuery ("#dynamic_tab");
  2. var url = "/list_ajax/";
  3. tab.load (url); 

简单到不能再简单了。在 Chrome,Firefox,Safari 下运行一点问题也没有,只有 IE 不行,不管是 IE7,IE8,还是 IE9。问题的症壮是,使用 IE 访问那个 Ajax 的链接,没有问题,但是在 jQuery 的 Ajax 方法返回了“undefined”的 respons 对象。没有任何报错!

怎么搞也搞不定,只好 Google 了一下——“jQuery load IE”,一看,很多人都在问这个问题。于是开始了散弹枪编程方式

排在第一的就是 StackOverflow 被浏览了 33K 次的这个问题:jQuery’s .load () not working in IE – but fine in Firefox, Chrome and Safari,答案没有被打勾(不靠谱),StackOverflow 还有很多人问相似的问题,不过都没有答案。不管三七二十一,先试了一下,散弹枪嘛。试了半天都没有用。

然后上 Google 查,又看到有人说的 IE 缓存的问题,什么,要把 cache 设置成 false,或是用下面的方法来解决:

  1. var tab = jQuery ("#dynamic_tab");
  2. var fuckie = Math.random ();
  3. var url = "/list_ajax/"+"?fuckie="+fuckie;
  4. tab.load (url); 

反正还是一样,统统不 Work,几乎所有的都试了,都不 Work。搞了一天的朋友恼怒道:“Microsoft 应该快点倒闭吧,产品太烂了”。IE 的确是太烂了。

于是我用 IE9 的网页调试器可以看到点了 Ajax 的链接后,IE 对网站有 http 的 Ajax 请求,也可以看到请求返回了,但是就是不显示在我的页面上——jQuery 的 Ajax 的 responseText 为 undefined!

对于我这个老家伙,对 jQuery 也不熟,我只得开始调试 jQuery 的代码,想看看里面干了什么,报了什么错?调了一个小时,基本上把 jQuery 的 Ajax 的封装看懂了七七八八了,但是还是没找到为什么有问题。

于是,我只得架起原生态的 Ajax,看看 IE 的那个 Ajax 的 ActiveX 的对象干了什么事?写了下面的代码(当年写 Ajax 就是这么写的,所以也不费劲,况且网上还有例程可以抄):

  1. function InitAjax ()  
  2. {  
  3.     var ajax=false;  
  4.     try {  
  5.         ajax = new ActiveXObject ("Msxml2.XMLHTTP");  
  6.     } catch (e) {  
  7.         try {  
  8.             ajax = new ActiveXObject ("Microsoft.XMLHTTP");  
  9.         } catch (E) {  
  10.             ajax = false;  
  11.         }  
  12.     }  
  13.     if (!ajax && typeof XMLHttpRequest!='undefined') {  
  14.         ajax = new XMLHttpRequest ();  
  15.     }  
  16.     return ajax;  
  17. }  
  18.    
  19. var ajax = InitAjax ();  
  20. ajax.open ("GET", url, true);  
  21. ajax.onreadystatechange = function() {  
  22.     if (ajax.readyState == 4 && ajax.status == 200) {  
  23.         var show = document.getElementById ("HaoChenp") .value;  
  24.         show.innerHTML = ajax.responseText;  
  25.     }  
  26. }  
  27. ajax.send (null);  
  28.  

一运行,还是不行,没见 IE 报什么错,不过,可以确定这不是 jQuery 的问题了,估计还是我们自己程序的问题。不过此时的程序太好调试了,调试中,在 IE9 下调式发现原生的 IE 的 Ajax 对象在 onreadystatechange 函数里,其 responseText 是下面这个样子:

什么是“系统错误: -1072896658”?上 google 一查,一堆页面,基本上是说乱码了,也就是 ajax 的后端程序返回的网页编码不认识吧。需要在返回的 http header 里加上 charset=utf-8。

于是,修改后端的 Ajax 的后端程序,明确指定了返回的 HTTP Header 中的 charset,于是 IE 下就工作正常了,再切回 jQuery 的 load 代码,一切正常了。

举一反三,这个问题的原因就是因为我们没有按照规范去写网页。所以,举一反三,HTML 的规范还有哪些,太多了,记也记不住。但也许你会知道有一个叫 http://validator.w3.org 的网站可以帮你校验你网页中的很多不规范的东西。

后记

我把这个问题和过程分享出来,主要有这么几个目的,并抛出几个问题,大家可以思考一下:

1)这个问题网上有很多人都在报,但是基本上找不到答案(包括 StackOverflow),所以,我分享出来,填补一下空白。

2)我相信我们的程序员天天都在经历这样的事,我不知道大家在遇到这样的事情会怎么做?也许大多数人都在网上查各种解决方案,然后一个一个的试,直到试对了——散弹枪式的编程,呵呵。当然,大多数答案都是可能找到的。但当我们找到答案了后,我们还会深入去了解这个问题的具体原因并举一反三地去思考一其周边的东西吗?

3)另外,在今天这样N多框架,N多 lib,N多开源的年代下,不知道大家有没有失去了从零开始自己写代码的能力?比如上面的这个问题,不知道有多少人还会自己写原生态的 Ajax?不过,我还是建议大家能在使用各种框架的时候,明白那些最基础的知识,求甚解,知其然知其所以然,真的很重要。

我是从那个“吃糠的年代”过来的程序员,那些的程序员什么都要自己干,很辛苦,今天我和很多人说我以前的那些经历,会被笑话,但是我从这些什么都自己的干的年代过的经历,让我受益很多。我把我的想法分享给大家,希望对大家有用。

原文链接:http://news.cnblogs.com/n/155378/

【编辑推荐】

  1. AJAX调用方式总结

  2. 精品 jQuery Ajax 分页插件和教程

  3. 轻松掌握AJAX(jQuery)异步通信

  4. Jscex+jQuery UI打造游戏力度条

  5. 10条建议让你创建更好的jQuery插件

【责任编辑:张伟 TEL:(010)68476606】


点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

安全模式:J2EE、Web服务和身份管理最佳实践与策

本书全面阐述Java应用安全的基本知识并介绍一种强大的结构化安全设计方法;介绍独立于厂商的安全架构;列出详细的评估核对表以及23种经过实...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× Python最火的编程语言