Question

我有一些普通的文本链接，我希望能够点击它们并发送一个ajax请求来获取页面，所以当我收到html时，我可以动态地将它加载到父页面的不同部分从服务器返回。因为我很顽固，喜欢知道事情是如何完成的，所以我不想打扰jquery。我想用大锤的方式做这件事。但我找不到任何关于如何使用不使用JQuery来处理与ajax的链接的评论。我是一个巨大的新手，我将非常感谢你的帮助。

Answer 1

一个建议是将click处理程序附加到link元素并破坏默认行为，例如

<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。

Answer 2

您需要查看以下某些内容

Attach events至<a>代码
当您使用event.preventDefault()
Selecting attributes（如href）
如何在没有jquery的情况下使用ajax（这很简单）
如何使用innerHTML

实质上，选择您的<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();

Answer 3

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

ajax中的文本链接没有Jquery

3 个答案: