Question

我有这个函数来发出ajax请求：我想替换

中的内容

var dialog_body = document.querySelector('#dialog .body')

page1.php中的

，内容为

page2.php#load

位于

var href = 'page2.php'

.......

function load(div_where_change, url) {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        div_where_change.innerHTML=xmlhttp.responseText;
    }
}
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

load(dialog_body, ref+'#load');

它不起作用.. 我的最后一个过程类似于jquery load，但我想只使用vanilla js而且我没有找到任何文档或文章只加载另一个页面的一个元素，但只有整页加载......

请帮帮我..

Answer 1

function getPage(url, from, to) {
    var cached=sessionStorage[url];
    if(!from){from="body";} // default to grabbing body tag
    if(to && to.split){to=document.querySelector(to);} // a string TO turns into an element
    if(!to){to=document.querySelector(from);} // default re-using the source elm as the target elm
    if(cached){return to.innerHTML=cached;} // cache responses for instant re-use re-use

    var XHRt = new XMLHttpRequest; // new ajax
    XHRt.responseType='document';  // ajax2 context and onload() event
    XHRt.onload= function() { sessionStorage[url]=to.innerHTML= XHRt.response.querySelector(from).innerHTML;};
    XHRt.open("GET", url, true);
    XHRt.send();
    return XHRt;
}

参数：

getPage(
  URL :    Location of remote resource , 
  FROM : CSS selector of source tag on remote page , 
  TO:      CSS selector of destination tag
)

EX 1.（典型使用）虚拟抓住下一页：在http://www.codingforums.com/forumdisplay.php?f=2时显示来自http://www.codingforums.com/forumdisplay.php?f=2&order=desc&page=2

的表格

getPage("/forumdisplay.php?f=2&order=desc&page=2",
  "#inlinemodform", 
  "#inlinemodform" );

注意“＃inlinemodform”是如何重复的？它将同一个块移动到另一个页面上的同一个块。您可以在重复时省略第二个CSS选择器，因此以下内容与上述内容完全相同：

  getPage("/forumdisplay.php?f=2&order=desc&page=2",
   "#inlinemodform" );

EX 2.（默认值）用另一个帖子替换整个页面：

  getPage("http://www.codingforums.com/showthread.php?t=281163")

EX 3.（外部内容）将UIUC中的事件列表注入当前页面：

getPage("//www.it.illinois.edu/news/", ".list.events.vcard.clearfix", ".tcat" )

与$ .load（）的一个区别是远程页面上的脚本标签没有被执行，我更喜欢这样。 Prototype.js有一个很好的脚本标记查找正则表达式，您可以使用它来评估内联脚本，如果需要所有这些功能，您可以重新添加任何基于.src的脚本的URL。我还在sessionStorage中缓存提取，因此如果您的外部内容旋转或更新，请使用随机查询参数或通过将第二行更改为var cached =“”来删除sessionStorage检查;

编辑：修复了我在重命名变量时创建的一个非常愚蠢的错误，以便公开阅读;忘了一个。

使用vanilla js从另一个页面加载特定元素

1 个答案: