jquery ajax links work/not work時間通りに動作します。

Question

pls help、なぜAjaxリンクが動作するのか理解していますか？ それは時間

限り、私はあなたが にhrefにURLにAjaxリクエストを行いますすべてのアンカー要素を、クリックハンドラをバインドしようとしている、既存のコードから言うことができるように

window.onload = function(){ 
    function getXmlHttp(){ 
     ...... // simply ajax 
    } 
    var cont = document.getElementById('wrapper1'); 
    var As = document.getElementsByTagName("A"); // get links 
    for(var i = 0, l = As.length; i < l; i ++){ 
     As[i].onclick = function(href){ // code 
      As[i].addEventListener('click', false); // code 
      return function(e){ 
       e.preventDefault(); 
       var xmlhttp = getXmlHttp() 
       xmlhttp.open('GET', href, false); 
       xmlhttp.send(null); 
       if(xmlhttp.status == 200) {cont.innerHTML = xmlhttp.responseText;} 
      } 
     }(As[i].href); 

     As[i].href = "javascript: void 0"; // right code ? 
    } 
} 

Answer 1

を介して動作属性を入力し、結果をid="wrapper1"要素に表示します。

あなたのコードは、任意のインデントなしで少し混乱ですが、それはあなたがonreadystatechange eventを待たずにAjaxのレスポンスを利用するようにしようとしていることを除いて、ほとんどOKに見える - あなたはとしてハンドラでそのif(xmlhttp.status)...行をラップする必要があります次の：

var xmlhttp = getXmlHttp() 
xmlhttp.open('GET', href, false); 
xmlhttp.send(null); 
xmlhttp.onreadystatechange = function() { // <---- add this 
    if(xmlhttp.status == 200) {cont.innerHTML = xmlhttp.responseText;} 
}; 

また

、この行：

As[i].addEventListener('click', false); 

...間違っていaddEventListener()が第2引数としての機能のリファレンスを期待しているため、 .onclick = ...で要素のクリックハンドラを設定しているときには、それを呼び出すのは意味がありません。あなたはjQueryを使ってあなたの質問をタグ付けしている考える

は、ここではかなり短い代替実装です：

$(document).ready(function() {   // when DOM is ready 
    var $cont = $("#wrapper1");   // save reference to output element 

    $("a").click(function(e) {    // bind click to all anchors 
    e.preventDefault();     // prevent default click behavior 
    $.get(this.href, function(result) { // Ajax get request to href URL 
     $cont.html(result);    // put result in output element 
    }); 
    }); 
});