摘要:兼容跨平臺解決方案目前對于的支持,是比較完善的,很多開發(fā)平臺也借助于內(nèi)核,所以使用開發(fā)是一個很不錯的選中。當(dāng)異步請求時,的這個值是至關(guān)重要的,它表示請求響應(yīng)過程的當(dāng)前活動階段。狀態(tài)為時,為成功的標(biāo)志。
[TOC]
兼容IE跨平臺解決方案事件兼容目前對于es5的支持,chrome是比較完善的,很多開發(fā)平臺也借助于webkit內(nèi)核,所以使用chrome開發(fā)是一個很不錯的選中。但是ie8-多個版本的兼容性也是讓無數(shù)程序員頭疼的事,那么下面會針對幾種比較典型的兼容做下總結(jié),該總結(jié)多數(shù)參考js高級編程內(nèi)部源碼和自身遇到的一些兼容問題,剛開始撰寫此類博客,希望大家多多指出問題。
code如下
window.ct = {}; (function(NS){ var EventUtil = { addHandler:function(element, type, handler){ if(element.addEventListener){ element.addEventListener(type,handler,false);//Chrome支持 } else if(element.attachEvent){ element.attacheEvent("on" + type, handler);//IE9+支持 }else{ element["on" + type] = handler;//IE8-支持 } }, removeHandler:function(element, type, handler){ if(element.removeEventListener){ element.removeEventListener(type, handler, false);//Chrome支持 }else if(element.detachEvent){ element.detachEvent("on" + type, handler);//IE9+支持 }else{ element["on" + type] = null;//IE8-支持 } }, getEvent:function(event){ return event ? event : window.event; }, getTarget:function(event){ return event.target || event.srcElement; }, preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } } } NS.EventUtil = EventUtil; })(window.ct);XPath兼容
window.ct = {}; (function(NS){ var createDocument = function(){ if(typeof arguments.callee.activeXArg != "string"){ var versions = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument"], i, len; for(i=0, len=versions.length; i< len; i++){ try{ new ActiveXObject(versions[i]); arguments.callee.activeXArg = versions[i]; break; }catch(e){ //step } } } return new ActiveXObject(arguments.callee.ActiveXArg); } var parseXml = function(xml){ var xmldom = null; if(typeof DOMParser != "undefined"){ xmldom = (new DOMParser()).parseFromString(xml,"text/xml"); var errors = xmldom.getElementsByTagName("parsererror"); if(errors.length){ throw new Error("XML parsing error: " + error[0].textContent); } }else if(typeof ActiveXObject != "undefined"){ xmldom = createDocument(); xmldom.loadXML(xml); if(xmldom.parseError != 0){ throw new Error("XML parsing error: " + xmldom.parserError.reason); } }else{ throw new Error("No XML parser avaiable"); } return xmldom; } var serializeXml = function(xmldom){ if(typeof XMLSerializer != "undefined"){ return (new XMLSerializer()).serialToString(xmldom); }else if(typeof xmldom.xml != "undefined"){ return xmldom.xml; }else{ throw new Error("Could not serialize XML DOM."); } } var selectSingleNode = function(context, expression, namespaces){ var doc = (context.nodeType != 9 ? context.ownerDocument : context); if(typeof doc.evaluate != "undefined"){ var nsresolver = null; if(namespaces instanceof Objectt){ nsresolver = function(prefix){ return namespaces[prefix]; } } var result = doc.evaluate(expression, context, nsresolver, XPathResult.FIRST_ORDERED_NODE_TYPE, null); return (result != null ? result.singleNodeValue : null); } } var selectNodes = function(context, expression, namespaces){ var doc = (context.nodeType != 9 ? context.ownerDocument : context); if(typeof doc.evaluate != "undefined"){ var nsresolver = null; if(namespaces instanceof Object){ nsresolver = function(prefix){ return namespaces[prefix]; } } var result = doc.evaluate(expression, context, nsresolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); var nodes = new Array(); if(result != null){ for(var i=0,len=result.snapshotLength;iXMLRequestHttp兼容 XMLRequestHttp各個瀏覽器支持情況
IE7+,Firefox,Opera,Chrome和Safari支持原生XMLRequestHttponreadystatechange運(yùn)行
下面的代碼中onreadystatechange中會直接使用XHR,這樣的處理方式是DOM0級方法為XHR對象添加了事件處理程序,原因是并不是所有的瀏覽器都輝支持DOM2級方法,所以有的瀏覽器內(nèi)部處理此事件時,可能不會向其傳遞event事件對象,那么為了所有平臺都兼容,最好的處理方式就是使用XHR對象本身來確定下一步應(yīng)該會怎么做。注意:此方法建議在open之前調(diào)用readyState幾種狀態(tài)的講解
對于XHR請求,絕大多數(shù)情況下都會使用異步請求。 當(dāng)異步請求時,readyState的這個值是至關(guān)重要的,它表示請求響應(yīng)過程的當(dāng)前活動階段。0:未初始化,尚未調(diào)用open方法;1:啟動,已經(jīng)調(diào)用open方法,但未調(diào)用send方法;2:發(fā)送 已經(jīng)調(diào)用send方法,但尚未接到服務(wù)端相應(yīng); 3:接收,但是只接收了部分響應(yīng);4:完成,已經(jīng)接收了全部響應(yīng)數(shù)據(jù),二期已經(jīng)可以在客戶端使用了state幾種狀態(tài)值的講解
在接收響應(yīng)后,我們認(rèn)為是readyState數(shù)值為4時為最佳判斷state時機(jī)。這時不得不普及一下HTTP響應(yīng)值state的意義。狀態(tài)為200時,為成功的標(biāo)志。此時responseText的內(nèi)容已經(jīng)準(zhǔn)備就緒,而且在內(nèi)容類型正確的情況下,responseXML也應(yīng)該能夠訪問了。如果狀態(tài)代碼304標(biāo)識請求的資源并沒有被修改,可以直接使用瀏覽器的緩存版本。open方法的講解
接受3個參數(shù),第一個是請求類型get或者post;第二個是url;第三個表示是否異步。另外需要說明兩點(diǎn):意識URL相對于執(zhí)行代碼的當(dāng)前頁面(可以使用絕對路徑);而是open方法并不會真正發(fā)送請求。send方法的講解
send方法只接受一個參數(shù),作為請求主體發(fā)送的數(shù)據(jù),如果不需要通過請求主體(即post),則必須傳入null,這個參數(shù)對于瀏覽器是必須的。調(diào)用send后,請求會發(fā)送到服務(wù)器上進(jìn)行處理。window.ct = {}; (function(NS){ var createXHR = function(){ if(typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ if(typeof arguments.callee.activeXString != "string"){ var versions = ["MSXML.XMLHttp.6.0","MSXML.XMLHttp.3.0","MSXML.XMLHttp"], i,len; for(i=0,len=version.length;i= 200 && xhr.status < 300 || xhr.status == 304){ console.info("successful responseText: " + xhr.responseText) }else{ console.error("Request was unsuccessful: " + xhr.status); } } } xhr.open("get","url",true); xhr.send(null); })(window.ct);
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/86641.html
摘要:也能使用更復(fù)雜的,更頁面增加更強(qiáng)的效果。這是因為當(dāng)頂級頁面設(shè)置為或,里面的頁面設(shè)置不起作用,它的文檔模式顯示的是。參考參考使用來搞定瀏覽器兼容模式強(qiáng)制標(biāo)準(zhǔn)模式標(biāo)準(zhǔn)模式與兼容模式設(shè)置背景 因為歷史原因,之前很多的系統(tǒng)都會是 頂級頁面+Iframe來加載子級頁面的這種模式構(gòu)件系統(tǒng),而且系統(tǒng)都只能運(yùn)行在IE6或者IE 高版本兼容模式下(IE 7模式)。 隨著現(xiàn)在的審美原來越高,腳本能里越來越強(qiáng),...
摘要:此模塊包含的設(shè)計思路即為預(yù)以匹配降級方案。沒有默認(rèn)編譯該模塊,以及利用該模塊判斷后提供平臺相關(guān)邏輯的主要原因在于其設(shè)計原則的代碼完成核心的功能。此處,也引出了代碼實(shí)現(xiàn)的另一個基本原則面向功能標(biāo)準(zhǔn),先功能覆蓋再優(yōu)雅降級。 在進(jìn)入 Zepto Core 模塊代碼之前,本節(jié)簡略列舉 Zepto 及其他開源庫中一些 Polyfill 的設(shè)計思路與實(shí)現(xiàn)技巧。 涉及模塊:IE/IOS 3/Dete...
閱讀 3056·2021-11-16 11:51
閱讀 2664·2021-09-22 15:02
閱讀 3823·2021-08-04 10:21
閱讀 3711·2019-08-30 15:43
閱讀 2015·2019-08-30 11:04
閱讀 3657·2019-08-29 17:14
閱讀 556·2019-08-29 12:16
閱讀 2989·2019-08-28 18:31