3

通常のテキストリンクがたくさんあり、それらをクリックしてajaxリクエストを送信してページをフェッチできるようにしたいので、HTMLを受け取ったときに親ページの別の部分に動的に読み込むことができます。サーバ。私は頑固で、物事が困難な方法でどのように行われるかを知りたいので、jqueryに煩わされたくありません。私はこれを大ハンマーの方法でやりたいと思っています。しかし、JQueryを使用せずにajaxでリンクを処理する方法についてのコメントは見つかりません。私はこれらすべてを備えた巨大な初心者です。あなたの助けをいただければ幸いです。

4

3 に答える 3

1

次のいくつかを調べる必要があります

<a>基本的に、タグを選択し、クリックイベントを追加します。そのクリックイベントがリンクのデフォルトの動作をトリガーしないようにします。イベントに、リンクが指すページへのAJAXリクエストを発生させます。ページ上のいくつかの要素のinnerHTMLを、AJAXによって返されるコンテンツに設定します。<head>また、おそらくajaxを介して返された特定のタグ（たとえば）を解析する必要があります。

実際のajaxリクエストに関しては、次のようになります。

//Taken (with modifications) from https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

/**
 * 'standard' way
 */
if (window.XMLHttpRequest) {
    httpRequest = new XMLHttpRequest();
}
/**
 * IE way
 */
else if (window.ActiveXObject) { // IE
    try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
        try {
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {}
    }
}

if (!httpRequest) {
    alert('Giving up :( Cannot create an XMLHTTP instance');
    return false;
}

function testFunction(data) {
    alert(data);
}

httpRequest.onreadystatechange = testFunction;
httpRequest.open('GET', url);
httpRequest.send();
于 2012-09-06T23:13:06.057 に答える
1

1つの提案は、クリックハンドラーをリンク要素にアタッチし、デフォルトの動作を覆すことです。

<div id="links_container">
    <a href="http://example.com/page" class="ajax_link">Page</a>
    <!-- etc -->
</div>

とJavaScriptで。

// define the click handler
var ajaxLinkHandler = function(e) {

    e.preventDefault();// prevent browser from following link
    var link = e.target;
    var url = link.href;

    // I won't take the time to rehash standard JS AJAX here
};

// now attach the handler
var container = document.getElementById("links_container");
var ajaxLinks = container.getElementsByClassName("ajax_link");

for (var i=0; i < ajaxLinks.length; i++) {
    ajaxLinks[i].onclick = ajaxLinkHandler;
}

あなたのHTMLがおかしなものにならないので、私はこのアプローチが好きです。

  • 純粋なJSのAJAXについては、MDNを参照してください。
于 2012-09-06T23:10:12.173 に答える
-1

javascriptXMLHttpRequestオブジェクトを使用します。 http://www.w3schools.com/ajax/ajax_xmlfile.asp

于 2012-09-06T22:57:53.773 に答える