我有大量普通文本链接,我希望能够单击它们并发送 ajax 请求来获取页面,这样当我从服务器。因为我很固执,喜欢知道事情是如何艰难地完成的,所以我不想为 jquery 操心。我想用大锤的方式做到这一点。但是我找不到关于如何处理不使用 JQuery 的 ajax 链接的任何评论。我是一个巨大的新手,我很感激你的帮助。
问问题
147 次
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>
标签 - 当您使用事件.preventDefault()单击链接时如何防止链接进入页面
- 从元素中选择属性(如 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();
于 2012-09-06T23:13:06.057 回答
-1
使用 javascript XMLHttpRequest 对象。 http://www.w3schools.com/ajax/ajax_xmlfile.asp
于 2012-09-06T22:57:53.773 回答