1. IE7以後對xmlHttpRequest 對象的創建在不同瀏覽器上是兼容的。下面的方法是考慮兼容性的,實際項目中一般使用Jquery的ajax請求,可以不考慮兼容性問題。
function getHttpObject() { var xhr=false; if (windows.XMLHttpRequest) xhr=new XMLHttpRequest(); else if (window.ActiveXObject) { xhr=new ActiveXObject("Microsoft.XMLHttp"); } return xhr; }
2. XMLHttpRequest的屬性及方法
屬性 | 描述 |
onreadystatechange | 每個狀態改變都會觸發,通常會調用一個javascript函數 |
readyState | 請求的狀態,5個值; 0:爲初始化,1:正在加載;2:已經加載,3:交互中,4:完成 |
responseText | 服務器的響應,表示爲字符串 |
responseXML | 服務器的響應,表示爲XML,可以解析爲DOM對象 |
status | 服務器的HTTP狀態碼(200:ok,304:not modified,404:Not Found 等) |
statusText | Http狀態碼的相應文本(ok或Not Found) |
方法 | 描述 |
abort() | 停止當前請求 |
getAllResponseHeaders() | 把HTTP請求的所有響應首部作爲鍵/值對返回 |
getResponseHeader(“header”) | 返回指定鍵的首部串值 |
open(“method”,”url”) | 建立對服務器的調用,Method可以是GET,POST或PUT,URL可以是相對或絕對URL |
send(content) | 向服務器發送請求 |
setRequestHeader(“header”,”value”) | 把指定首部設置爲所提供的值。在設置任何首部之前必須調用open() |
手寫一個Ajax請求的例子:
$(function(){ $("#id").onclick(tunction(){ var request=new XMLHttpRequest(); var url="http://www.baidu.com"; var method="GET"; request.open(method,url); request.send(null); request.onreadystatechange=function(){ if (request.readyState==4&&(request.status==200 || request.status==304)) alert (request.reponseText);
//如果返回的是html 標籤,則可以使用
//$(“#id2”).innerHtml=request.reponseText;
//如果返回的xml格式,則需要將結果通過getElementByTagName(“”)[index]解析
//alert(request.reponseXML.getElementByTagName(“”)[index]) } }) })
這裏再插入一下window.onload 和$(function(){})($(document).ready(function(){}))的區別:
1. window.onload 必須等到頁面內包括圖片的所有元素加載完畢才能執行
$(function(){}) 是DOM結構繪製完畢後就執行,不必等到加載完畢。
2. 編寫個數不同
window.onload 不能同時編寫多個,如果有多個window.onload方法,只會執行一個
$(function(){}) 可以同時編寫多個,並且都會得到執行
3. 簡化寫法
window.onload 沒有簡寫方法,但可以使用$(window).load(function(){})代替
$(function(){})實際是$(document).ready(function(){})的縮寫方法
$(window).load(function(){})一般情況下都會在$(function(){})之後執行,但是如果使用了Iframe的話
可能不一樣,附上jquery 1.8.2的源碼,IE只有在不是frame的情況下才和其他瀏覽器一樣,先執行$(function(){})
對於嵌入frame中的頁面,是綁定到 load 事件中,因此會先執行load 事件。
jQuery.ready.promise = function( obj ) { if ( !readyList ) { readyList = jQuery.Deferred(); // Catch cases where $(document).ready() is called after the browser event has already occurred. // we once tried to use readyState "interactive" here, but it caused issues like the one // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15 if ( document.readyState === "complete" ) { // Handle it asynchronously to allow scripts the opportunity to delay ready setTimeout( jQuery.ready, 1 ); // Standards-based browsers support DOMContentLoaded } else if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); // A fallback to window.onload, that will always work window.addEventListener( "load", jQuery.ready, false ); // If IE event model is used } else { // Ensure firing before onload, maybe late but safe also for iframes document.attachEvent( "onreadystatechange", DOMContentLoaded ); // A fallback to window.onload, that will always work window.attachEvent( "onload", jQuery.ready ); // If IE and not a frame // continually check to see if the document is ready var top = false; try { top = window.frameElement == null && document.documentElement; } catch(e) {} if ( top && top.doScroll ) { (function doScrollCheck() { if ( !jQuery.isReady ) { try { // Use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ top.doScroll("left"); } catch(e) { return setTimeout( doScrollCheck, 50 ); } // and execute any waiting functions jQuery.ready(); } })(); } } } return readyList.promise( obj ); };