I've this function to make an ajax request: I want to replace content in

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

in page1.php with the content of

page2.php#load

that is located in

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');

And It doesn't work.. My final process is similar to jquery load, but I wanna use only vanilla js and I've not found any documentation or article for load only one element of another page, but only full page load......

Please help me..

I've this function to make an ajax request: I want to replace content in

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

in page1.php with the content of

page2.php#load

that is located in

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');

And It doesn't work.. My final process is similar to jquery load, but I wanna use only vanilla js and I've not found any documentation or article for load only one element of another page, but only full page load......

Please help me..

• javascript
• ajax

Share Improve this question Follow asked Jan 29, 2014 at 15:47 Sergio PisoniSergio Pisoni 10733 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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;
}

arguments:

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

EX 1. (typical use) virtually grab the next page: when on http://www.codingforums./forumdisplay.php?f=2 show table from http://www.codingforums./forumdisplay.php?f=2&order=desc&page=2

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

notice how "#inlinemodform" is repeated? It's moving the same block to the same block on another page. You can omit the 2nd CSS selector when it's a duplicate, so the following is 100% equivalent to the above:

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

EX 2. (defaults) replace this whole page with another post :

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

EX 3. (external content) inject event listings from UIUC into the current page:

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

one difference from $.load() is that script tags on the remote page are not executed, which i rather like. Prototype.js has a good script-tag-finding regexp that you can use to eval inline scripts, and you can re-add the urls of any .src-based scripts if you need all that functionality. I also cache the fetch in sessionStorage, so if your external content rotates or updates, use a random query param or remove the sessionStorage check by changing the 2nd line to var cached="";

EDIT: fixed a really dumb bug i created when renaming the variables for public readability; forgetting one.