使用Ajax而不使用jQuery更新頁面部分

頁面主要使用PHP，只是輕微使用任何JavaScript，因此我不希望在沒有它的情況下使用jQuery。我想更新頁面的一部分，但我對Ajax並不很有經驗。 jQuery的方法是在頁面後面使用「#sectionid」。使用Ajax而不使用jQuery更新頁面部分

來源

2012-05-21 Rhyono

你可能不想聽，只是使用jQuery。如果你擔心頁面重量，只需使用CDN的jQuery副本。如果你這樣做，可能性是你的客戶端已經有了jQuery緩存。 – HackedByChinese

jquery是javascript。它不過是JavaScript庫，所以你不會因爲使用它而破壞你的規則。 –

我知道jQuery是JavaScript。我只需要一小部分，因此不想加載多餘的庫。 – Rhyono

所有你需要知道的信息以手工卷自己是在這裏：

https://developer.mozilla.org/en/XMLHttpRequest

你會感興趣的的send，open，response，readyState和onreadystatechange節文檔。

onreadystatechange只要你的請求的readyState改變就會觸發。一旦您的readyState已更改爲done，您可以檢查收到的回覆。

確保當您打開以異步模式打開時。您不想通過發出同步http請求來凍結您的頁面。

如果你需要它運行在老版本的I.E.維基百科有一些好的信息： http://en.wikipedia.org/wiki/XMLHttpRequest#Support_in_Internet_Explorer_versions_5.2C_5.5_and_6

我假設你知道如何使用document.getElementById和element.innerHTML設置你的元素的內容。

編輯說幹就幹，並增加了一個基本的實現：

if (window.XMLHttpRequest) {// IE7+, Firefox, Webkit, Opera 
    window.xmlhttp = new XMLHttpRequest(); 
} else {// IE6, 5 
    window.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 

xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
    document.getElementById("someId").innerHTML = xmlhttp.responseText; 
    } 
} 

xmlhttp.open("GET", "pageUrl", true); 
xmlhttp.send();

來源

2012-05-21 00:23:49

使用Ajax而不使用jQuery更新頁面部分

回答

相關問題