JavaScript跨域請求和jsonp請求執行個體

標籤：ati   發送請求   send   als   else   tco   ade   href   var   

<script type="text/javascript" src="./whenReady.js"></script><script type="text/javascript">/** * 一：跨域請求 *  * 這個常見的JavaScript模組查詢有href屬性但沒有title屬性的所有<a>元素 * 並給他們註冊onmouseover事件處理常式 * 這個事件處理常式使用XMLHttpRequest HEAD請求取得連結資源的詳細資料 * 然後把這些詳細資料設定為連結的title屬性 * 這樣他們將會在工具提示中顯示 */whenReady(function(){//是否有機會使用跨域請求var supportCORS = (new XMLHttpRequest()).withCredentials !==undefined;//遍曆文檔中的所有連結var links = document.getElementsByTagName(‘a‘);for(var i = 0 ; i < links.length ; i++){var link = links[i];if(!link.href)continue;//跳過沒有超連結的錨點if(link.title)continue;//跳過已經有工具提示的連結//如果這是一個跨域連結if(link.host !== location.host || link.protocol !== location.protocol){link.title = "站外連結"; //假設我們不能得到任何資訊if(!supportCORS)continue;//如果沒有CORS支援就退出//否則，我們能瞭解這個連結的更多資訊//所以繼續前進，註冊事件處理常式，於是我們可以嘗試}//註冊事件處理常式，當滑鼠移至上方下載連結詳細資料if(link.addEventListener)link.addEventListener("mouseover",mouseoverHandler,false);elselink.attachEvent("mouseover",mouseoverHandler);}function mouseoverHandler(e){var link = e.target || e.srcElement; //<a>元素var url = link.href;//連結urlvar req = new XMLHttpRequest();//新請求req.open("HEAD",url);//僅僅詢問頭資訊req.onreadystatechange = function(){//事件處理常式if(req.readyState !== 4)return;//如果未完成，直接返回if(req.status ===200){//如果成功var type = req.getResponseHeader("Content-Type");//擷取連結的詳細情況var size = req.getResponseHeader("Content-Length");var data = req.getResponseHeader("Last-Modified");//在工具提示中顯示詳細資料link.title = "類型："+type+"\n"+"大小："+size+"\n"+"時間："+date;}else{//如果請求失敗，且連結沒有“站外連結”的工具提示//那麼顯示這個錯誤if(!link.title)link.title = "Couldn‘t fetch details:\n"+req.status+" "+req.statusText;}};req.send(null);//移除處理常式，僅想一次擷取這些頭資訊if(link.removeEventListener)link.removeEventListener("mouseover",mouseoverHandler,handler);elselink.detachEvent("onmouseover",mouseoverHandler);}});/** * 二：藉助<script>發送http請求：JSONP *根據指定的url發送一個JSONP請求 *然後把解析得到的響應資料傳遞給回呼函數 *在URL添加一個名為jsonp的查詢參數，用於指定請求的回呼函數的名稱 */function getJSONP(url,callback){//為本次請求建立一個唯一的回呼函數名稱var cbnum = "cb"+getJSONP.counter+++; //每次自增計數器var cbname = "getJSONP."+cbnum;//作為JSONP函數的屬性//將回呼函數名稱一以表單編碼的形式添加到URL的查詢部分中//使用jsonp作為參數名，一些支援JSONP的服務//可能使用其他的參數名，比如：callbackif(url.indexOf("?") === -1 ) //url沒有查詢部分url+="?jsonp="+cbname;//作為查詢部分添加參數else //否則url += "&jsonp"+cbname; //作為新的參數添加它//建立script元素用於發送請求var script = document.createElement("script");//定義將被指令碼執行的回呼函數getJSONP[cbnum] = function(response){try{callback(response);//處理響應資料}finally{//即使回呼函數或響應拋出錯誤deletegetJSONP[cbnum];//刪除給函數script.parentNode.removeChild(script);//移除script元素}};//立即出發http請求script.src = url;//設定指令碼的urldocument.body.appendChild(script);//把它添加都文檔中}getJSONP.counter = 0;//用於建立唯一回呼函數名稱的計數器</script>

　　

JavaScript跨域請求和jsonp請求執行個體