ajax 兼容性问题解决 集锦

这两天刚解决了ajax多浏览器兼容的问题，主要就针对Firefox的，开始还以为Firefox不支持ajax呢（别笑我呀，不怎么了解Firefox也没用过，呵呵），多亏看了下面的文章才让我了解ajax的适用范围。其实只要符合w3c的标准就可以在Firefox等这些浏览器上正常显示，所以还是应该好好了解一下w3c的标准规则呀。

不过要解决眼前的兼容问题首先注意以下几点：（这个也是网上找来的）

1,document.getElementById替代document.all（ie适用）
2,集合[]替代()（ie适用）
3,target替代srcElement;parentNode替代parentElement（parentNode ie适用）
4,node.parentNode.removeChild(node)替代removeNode(this)（ie适用）
5,DOMMouseScroll替代onmousewheel;-e.detail替代event.wheelDelta
6,addEventListener替代attachEvent;removeEventListener替代detachEvent
7e.preventDefault()替代event.returnValue=false;e.stopPropagation()替代event.cancelBubble=true
8,style.top、style.left等严格检查"px"单位（加"px" ie适用）
9,style="-moz-opacity:0.9"替代style="filter:alpha(opacity=90)";无其它filter
10,style.cursor="pointer"替代style.cursor="hand"（ie适用）
11,title替代alt（ie适用）

12.所有的空间在引用时都要这样引用：document.getElementById（“XX”）。

注:标明“ie适用”者为通用性建议写法,未标明者在ie里不适用。

 下面就是我看的那个关于ajax的文章很有用没看到作者，但无论如何感谢文章作者。

——————————————————————————————

简介

　　异步JavaScript＋XML（即Ajax），是一种创建交互式web应用程序的Web开发技术。这种程序使用JavaScript和XML从客户端提交服务器请求，且整个过程中仅需要交换少量的数据而不必提交整个web页面。因此，这样的程序将更快和更具响应性，并将成为新一代客户机-服务器系统的重要基础技术之一。你可以在站点http://www.google.com/webhp?complete=1&hl=en处看到一种良好的AJAX实践技术展示。在此页面中，如果你把任何字母输入到文本框内，那么随后就会出现一个下拉列表框，其中的内容直接来自于服务器而不必提交整个页面。AJAX的核心是XMLHttpRequest对象。客户端能够在后台检索并直接提交XML数据。为了把检索的XML数据转换成可生成的HTML内容，需要依赖于客户端文档对象模型(DOM)读取XML文档结点树并且组成用户看得见的HTML元素。其实，AJAX并非象HTML，DHTML等一样的单一技术，它结合了不同的技术：

　　·XMLHttpRequest对象被使用于与web服务器异步地交换数据。

　　·XML被普遍用作把数据传输回服务器的格式（尽管任何格式都能使用，例如普通文本，HTML等）。

　　·如果使用XML作为转换格式，那么DOM通常与如JavaScript这样的客户端脚本语言一起使用来动态地显示和描述交互信息。

　　·XHTML(或HTML)，CSS用于标记和信息格式化。

　　二、 XMLHttpRequest对象

　　从历史来看，是微软首先在其Internet Explorer 5 for Windows中以一个ActiveX对象形式实现了XMLHttpRequest对象。随后，由Mozilla工程的工程师实现了Mozilla 1.0（和Netscape 7）的一种兼容的本机版本；而稍后，苹果公司在其Safari 1.2上也实现了相同的工作。其实，在W3C标准的文档对象模型（DOM）Level 3加载与存储规范中，也提到了类似的功能。现在，它成为一种事实上的标准，并开始在以后发行的大多数浏览器中得到实现。

　　(一) 创建对象

　　XMLHttpRequest对象的创建方式因浏览器不同而有所不同。对于Safari和Mozilla来说，其创建方式如下所示：

              var req = new XMLHttpRequest();      

　　对于Internet Explorer 5.0＋（指5.0及更高版本），则要把对象名传递到ActiveX构造函数中：

              var req = new ActiveXObject("Microsoft.XMLHTTP");      

　　该对象的方法控制所有的操作，而其属性存储从服务器返回的各种数据片断，例如XMLHttpObject.responseText包含从服务器返回的xml或字符串值。

　　(二) 方法

　　在Windows IE 5.0＋、Safari 1.2和Mozila中支持的XMLHttpRequest对象的方法列举如下：

              方法          描述      
              abort()          取消当前的请求。如果你在一个不处理请求(readyState 0或4)的对象上调用它，"神秘的事情"发生了。      
              getResponseHeader("headerLabel")          返回单个头标签的字符串值      
              getAllResponseHeaders()          以一个串形式返回完整的头(标签和值)集合      
              open("method"，"URL"[，asyncFlag[， "userName"[，"password"]]])          指派目标URL、方法及一个悬挂请求的其它可选属性      
              send(content)          传输请求。（可选择地）其中可以加入可寄送的字符串或DOM对象数据      
              setRequestHeader("label"，"value")          把一个标签/值对指派给要发送的请求中的头部      

　　在上面的方法中，open和send方法是最重要的。下面，让我们首先从应用程序的观点来讨论open方法。

              var req;
………………………
req = new ActiveXObject("Microsoft.XMLHTTP");
……………
var url="AjaxServer.aspx?PubID="+ID;
……………
//打开一个到URL的GET请求
req.open("GET"，url，true);
//实际发送一个空请求
req.send(null);      

　　注意

　　在这个示例应用程序中，AjaxClient.aspx页面是用户接口，AjaxServer.aspx则负责提供每一个用户请求时的数据。要特别注意的是，AjaxServer.aspx页面不应该包含任何HTML。你可以测试一下如果页面包含HTML将会发生什么。

　　open方法的第一个参数（见上面表格中的Open函数）指示当前操作为一个GET操作或是POST操作。在进行简单的数据检索时，一般使用GET。当向外传输的数据包大于512字节且操作包括服务器端活动（如插入，更新等）时，一般使用Post。接下来，我们看一下"url"参数。这个参数可以是一个完整的url也可以是一个相对url。在上面例子中，使用的是相对的url。"asyncFlag"参数指示在执行send方法后是否立即处理到来的脚本（这意味着不必等待是否有响应）。最后两个参数分别是"username"和"password"，如果"url"中提供这些数据的话。

　　另一个重要的方法是send方法，它实际上使用一个消息体发送请求。对于本例而言，它只是发送一个空请求。

              [
//实际发送一个空请求
req.send(null);
]      

　　(三) 属性

              属性          描述      
              onreadystatechange          每当状态改变时激发的事件的事件处理器。其中，readyState对象状态整数含义如下：0=uninitialized1=loading2=loaded3=interactive4=complete      
              responseText          经服务器处理后返回的数据的字符串版本      
              responseXML          经服务器处理后返回的DOM兼容的数据文档对象      
              status          由服务器返回的数字代码，例如404代表"Not Found"，200代表"OK"      
              statusText          伴随着状态代码的字符串信息      

　　在此，应用程序中使用了onreadystatechange：

              //这是事件处理器机制;在本例中，"RequestProcessor"即是事件处理器。
req.onreadystatechange=RequestProcessor;      

　　对于这个应用程序来说，"RequestProcessor"是客户端的事件处理器。现在，在事件处理器内，使用readyState属性来获得各种状态。值4显示已经完成某种处理。现在，在处理结果前，你应该检查状态或statusText以决定操作成功与否。在这个应用程序中，我是以下面方式实现的：

              function RequestProcessor()
{
　//如果readyState处理"Ready"状态
　if(req.readyState == 4)
　{
　　//返回的状态代码200意味着一切顺利
　　if(req.status == 200)
　　{
　　　//如果responseText不空
　　　//req.responseText实际上是一个由AJAXServer.aspx的"Response.Write("" + sbXML.ToString() + "");"方法编写的字符串
　　　if(req.responseText != "")
　　　{
　　　　populateList(req.responseXML);
　　　}
　　　else
　　　{
　　　　clearSelect(publishedBooks);
　　　}
　　}
　}
　return true;
}      

　　注意 对象req被声明为一个页面级的变量：

              var req = new ActiveXObject("Microsoft.XMLHTTP");      

　　警告

　　请求目的的url必须与客户端脚本处于同一个域中。原因是，XMLHttpRequest对象采用与客户端脚本一致的封装技术。在大多数支持这种功能的浏览器上，拥有存取XMLHttpRequest对象的脚本的页面都需要使用http:协议检索。这意味着，你无法在一个本地硬盘上(file:协议)进行页面测试。

三、 实际问题

　　在AJAX中，如果网络或远程服务器出现中断，会发生什么呢？实际上，存在两个主要问题；默认地，它们并没有在XMLHttpRequest对象中得到解决。这两个主要问题是：

　　1.处理延迟：如果网络或远程服务器耗费较多时间，那么这个问题如何与你的AJAX应用程序相联系呢?

　　2.响应顺序：潜在地，网络(或服务器)会不断变化。这意味着，响应可能不会以与请求相同的顺序返回。

　　为了处理上面这两个问题，程序员必须编写代码来解决这个问题。对于第一个问题，一种可能的方案如下所示：

              function callInProgress(xmlhttp) {
　switch ( xmlhttp.readyState ) {
　　case 1，2，3:
　　　return true;
　　　break;
　　　//Case 4和0
　　default:
　　　return false;
　　　break;
　}
}      

　　现在，在调用send()前，我可以先检查一下是否该对象正处于忙态：

              if ( !callInProgress(xmlhttp) ) {
　xmlhttp.send(null);
} else {
　alert("I'm busy. Wait a moment");
}      

　　(一) 支持Ajax技术的浏览器

　　·微软Internet Explorer版本5.0及以上版本，和基于它的浏览器（Mac OS版本不支持）

　　·基于Gecko的浏览器，如Mozilla，Mozilla Firefox，SeaMonkey，Epiphany，Galeon和Netscape版本7.1及以上版本

　　·实现KHTML API版本3.2及以上版本的浏览器，包括Konqueror版本3.2及以上版本，还有Apple Safari版本1.2及以上版本

　　·Opera浏览器版本8.0及以上版本，包括Opera Mobile浏览器版本8.0及以上版本

　　(二) 不支持Ajax技术的浏览器

　　·Opera 7及以下版本

　　·微软Internet Explorer 4.0及以下版本

　　·基于文本的浏览器，如Lynx和Links

　　·没有可视化实现的浏览器

　　·1997年以前的浏览器

　　(三) 本文示例应用程序特定需求

　　软件要求：

　　1.ASP.Net 2.0；

　　2.MS SQL Server 2000，并要求相应的pubs数据库设置；

　　3.改变web.config文件中的DB连接字符串("CONN_STRING"键)。

              ＜APPSETTINGS＞
＜ADD value="data source=cal-slcu2-196;Database=pubs;User=sa;PWD=sa" key="CONN_STRING" /＞
＜/APPSETTINGS＞      

　　变量或类名应该象上面这样被包括到＜code＞标记中。

　　四、 总结

　　本文概括性地归纳了基于AJAX技术构建下一代流行Web应用程序的主要技术及有关概念，并给出一个完整示例程序的关键片断的分析。



【javascript】火狐浏览器兼容原则
url：http://blog.csdn.net/Donny_zhang/archive/2008/12/01/3420508.aspx
1,document.getElementById替代document.all（ie适用）
2,集合[]替代()（ie适用）
3,target替代srcElement;parentNode替代parentElement（parentNode ie适用）
4,node.parentNode.removeChild(node)替代removeNode(this)（ie适用）
5,有空白文本节点
6,无outerHTML属性
7,事件局部变量e替代事件全局变量event
8,e.button键值有别于event.button,只有3个键值而无组合键值
9,无ondrag事件
10,DOMMouseScroll替代onmousewheel;-e.detail替代event.wheelDelta
11,addEventListener替代attachEvent;removeEventListener替代detachEvent
12,e.preventDefault()替代event.returnValue=false;e.stopPropagation()替代event.cancelBubble=true
13,style.top、style.left等严格检查"px"单位（加"px" ie适用）
14,style="-moz-opacity:0.9"替代style="filter:alpha(opacity=90)";无其它filter
15,style.cursor="pointer"替代style.cursor="hand"（ie适用）
16,title替代alt（ie适用）
17,状态栏默认不可修改,需调整ff设置
18,内置绘图功能以canvas或者SVG替代vml
19,代码出错时经常不报错（想来也是ff的无奈之举吧,如果每个ie独有的表达方式换在它里面都报错的话,怕是报都报不过来吧）
20,对缓存的清理非常不好
注:标明“ie适用”者为通用性建议写法,未标明者在ie里不适用。 
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/Donny_zhang/archive/2008/12/01/3420508.aspx



针对不同的浏览器版本，new ActiveXObject()一共有多少种？
例如ActiveXObject("Microsoft.XMLHTTP");
能一一列举并说明是针对什么浏览器吗？ 
url:http://zhidao.baidu.com/question/98830922.html?fr=ala1



var xmlHttp = new XMLHttpRequest();
这行简单的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中，创建了 XMLHttpRequest 对象。但是对于市场占有率达到70%的IE来说，这种方法是不行的，而不同的IE版本还有不同的创建方法，所以我们需要在IE下面使用下面两种创建对象的办法：

try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//针对较新的浏览器
} catch (err) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//针对较老的浏览器
} catch (err2) {
xmlHttp = false;
}
}
即使这样，我们也无法预料有些浏览器可能无法创建这个对象，所以在创建不成功的情况下，我们还要加上一句：

if (!xmlHttp){
alert("无法创建 XMLHttpRequest 对象！");
}
结合起来就是：

var xmlHttp = false;
 try {
  xmlHttp = new XMLHttpRequest();
    } catch (trymicrosoft) {
      try {
       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (othermicrosoft) {
        try {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (failed) {
         xmlHttp = false;
        }
      }
    }
if (!xmlHttp){
alert("无法创建 XMLHttpRequest 对象！");
} 

AJAX浏览器兼容代码

url：http://wang.zhen.kai.blog.163.com/blog/static/3777221520099170385372/


<script language="javascript">
 var http_request = false
 function send_request(name) {//初始化、指定处理函数、发送请求的函数
     var date = new Date()
  http_request = false;
  //开始初始化XMLHttpRequest对象
  if(window.XMLHttpRequest) { //Mozilla 浏览器
   http_request = new XMLHttpRequest();
   if (http_request.overrideMimeType) {//设置MiME类别
    http_request.overrideMimeType('text/xml');
   }
  }
  else if (window.ActiveXObject) { // IE浏览器
   try {
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     http_request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
  if (!http_request) { // 异常，创建对象实例失败
   window.alert("不能创建XMLHttpRequest对象实例.");
   return false;
  }
  http_request.onreadystatechange = processRequest;
  http_request.open("GET","Merch_Update.asp?act="+date+"&name="+name, true);
  http_request.send(null);
 }
 // 处理返回信息的函数
    function processRequest() {
   if (http_request.readyState != 4) { // 判断对象状态
      document.getElementById('MerchName').innerHTML="正在加载数据……"; 
   }
   else {
            if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
    var strHTML = http_request.responseText;
    document.getElementById('MerchName').innerHTML=strHTML;
            } else { //页面不正常
                alert("您所请求的页面有异常。");
            }
         }
    }

function onMerchName() {
    if (document.form1.SelectMerchName.value==-1) {
       document.getElementById("MerchName").innerHTML="<input name='SelectMerchName' type='text' onChange='txtMerchName()' >*请输入商品名称"
    document.form1.SelectMerchName.focus();
 }
}

function txtMerchName() {
    send_request(document.form1.SelectMerchName.value);
}
</script>









JS 中 Navigator appName 和 Navigator appCodeName

url：http://hi.baidu.com/catprayer/blog/item/be7f2242b52da41872f05d39.html



navigator.appName


功能：返回浏览器的名称。该属性是一个只读的字符串。

语法：navigator.appName

在基于Netscape的浏览器中，这个属性的值是"Netscape"。在IE中，这个属性的值是"Microsoft Internet Explorer"。其他浏览器可以正确地表示自己或者伪装成其他的浏览器以达到兼容性。



navigator.appCodeName


功能：返回浏览器的代码名。该属性是一个只读的字符串。

语法：navigator.appCodeName

在所有以Netscape代码为基础的浏览器中，它的值是"Mozilla"。为了兼容起见，在Microsoft的浏览器中，它的值也是"Mozilla"。



实例1


获取浏览器的名称和代码名。

<script type="text/javascript">
document.write( "浏览器名称："+navigator.appName );
document.write( "<br />" );
document.write( "代码："+navigator.appCodeName );
</script>

这段代码的效果为：


浏览器名称：Netscape
代码：Mozilla