ajax中的文本链接不带Jquery

Text links in ajax WITHOUT Jquery

本文关键字：Jquery 链接 文本 ajax      更新时间：2023-09-26

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

一个建议是在链接元素上附加一个点击处理程序，并破坏默认行为，例如

<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

您需要查找以下

  • 将事件附加到<a>标签
  • 如何在使用事件.prventDefault（）单击链接时阻止链接进入页面
  • 从元素中选择属性（如href）
  • 如何在没有jquery的情况下使用ajax（相当简单）
  • 如何使用innerHTML将返回的html添加到当前页面

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

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

相关文章：