3

我有大量普通文本链接,我希望能够单击它们并发送 ajax 请求来获取页面,这样当我从服务器。因为我很固执,喜欢知道事情是如何艰难地完成的,所以我不想为 jquery 操心。我想用大锤的方式做到这一点。但是我找不到关于如何处理不使用 JQuery 的 ajax 链接的任何评论。我是一个巨大的新手,我很感激你的帮助。

4

3 回答 3

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

您需要查找以下一些内容

本质上,选择您的<a>标签,为其添加点击事件。防止点击事件触发链接的默认行为。让事件向您的链接指向的页面发出 AJAX 请求。将页面上某个元素的 innerHTML 设置为 AJAX 返回的内容。您可能还需要解析通过 ajax 返回的某些标签(<head>例如)。

就实际的 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

使用 javascript XMLHttpRequest 对象。 http://www.w3schools.com/ajax/ajax_xmlfile.asp

于 2012-09-06T22:57:53.773 回答