AJAX w3school 以及IE、Firefox、Chrome 的JS代码兼容注意事项

AJAX 实例

http://www.w3school.com.cn/example/ajax_examples.asp

AJAX - 服务器响应

• XHR 请求
• XHR readyState

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述

responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

responseText 属性

http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_response.asp

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

AJAX ResponseXML 实例

http://www.w3school.com.cn/ajax/ajax_responsexml.asp

与 responseText 以字符串返回 HTTP 响应不同，responseXML 以 XML 返回响应。

ResponseXML 属性返回 XML 文档对象，可使用 W3C DOM 节点树的方法和属性来检查和解析该对象。

===========================

 

 

     IE、Firefox、Chrome 的JS代码兼容注意事项

转自：

http://www.alonely.com.cn/Firefox/20161003/48172.html

 

    近日，公司的线软件产品由于用户原来越多并广受好评，公司决定由原来只支持IE，扩展到支持Firefox 和 Chrome，随身版更决定使用Chrome作为客户端，在代码兼容性升级的时候，碰到一些问题，姑且记录下来，供同事和朋友们参考。

1.  IE 的XMLHTTP 如果申请一个非XML格式的文件，XMLHttpObject.responseXML 是一个可用的对象。
     Firefox 和 Chrome 则会返回null
     IE我们可以直接 XMLHttpObject.responseXML.loadXML, Firefox 和 Chrome 要通过其他方法 

	var xmlHttp=getXMLHttpObj();   
	var text = xmlHttp.responseText.replaceAll('&','&');   
	var xD=xmlHttp.responseXML;   
	if(xD){   
		xD.loadXML(text);   
	}else{   
		var oParser = new DOMParser();   
		xD= oParser.parseFromString(text,"text/xml");   
		//alert(xD.getElementsByTagName("a"));   
	}

2. 还是XMLHttpObject , IE 和 Chrome 可以 支持 XMLHttpObject.send() 方法里面没有任何参数，Firefox 必须要求最少都要一个参数，即使参数值为null ，即：  

//要兼容多种浏览器，必须这样写，参数null不能省略：
XMLHttpObject.send(null);

 

3.Firefox 里面 HTMLElementObject.outerHTML 属性无效，IE和Chrome 就很正常，例如我们要删除一个DIV：  

// 这一句在IE和Chrome 运行很好
    $("DIV").outerHTML="";  //删除一个DIV
//firefox 不能则通过上面的语句实现，只能通过以下方法实现
$("DIV").parentNode.removeChild($("DIV"));
delete $("DIV"+n);

 

4. Firfox 不支持直接用HTMLElementObject 的id 取得该元素，IE和Chrome 则支持得很好。
    Firfox死板的坚持“标准”？！
    例如我们页面上有这样一段HTML代码：  

 <div id="DivObj">this is some text</div>

     IE和Chrome 可以直接用DivObj 就可以引用这个元素对象。
     Firfox 就在只能用 getElementById('DivObj') 或者著名的$('DivObj')函数了

5. javascript 操作styleSheet对象和rules对象，兼容的写法如下：      

var Rules=document.getElementById("xwincss").sheet||document.styleSheets["xwincss"];   
if(Rules.rules){   
  //IE   
   Rules=Rules.rules;   
}else{   
  //firefox   
   Rules=Rules.cssRules;   
}

6、firefox和ie事件event处理 
在ie中，事件对象是作为一个全局变量来保存和维护的。 所有的浏览器事件,不管是用户触发 
的，还是其他事件， 都会更新window.event 对象。 所以在代码中，只要轻松调用 window.event 
就可以轻松获取 事件对象， 再 event.srcElement 就可以取得触发事件的元素进行进一步处理 
在ff中， 事件对象却不是全局对象，一般情况下，是现场发生，现场使用，ff把事件对象自动传 
递给对应的事件处理函数。 在代码中，函数的第一个参数就是ff下的事件对象了。 
 

//<button id="btn4" onclick="foo4()">按钮4</button>    
function foo4(){    
var evt=getEvent()；    
var element=evt.srcElement || evt.target ；    
alert(element.id)    
}    
function getEvent()    
{ //同时兼容ie和ff的写法    
if(document.all) return window.event;    
func=getEvent.caller;    
while(func!=null){    
var arg0=func.arguments[0];    
if(arg0){    
if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){    
return arg0;    
}    
}    
func=func.caller;    
}    
return null;    
}

7、firefox和ie对手型指针cursor不兼容 
手型指针有cursor:hand和cursor:pointer两种写法,其中cursor:hand在ff中不支持,返回错误! 
只要使用cursor:pointer即可,ff和ie都支持!