I am trying to get the source code of HTML by using an XMLHttpRequest with a URL. How can I do that?
I am new to programming and I am not too sure how can I do it without jQuery.
37 Answers
Use jQuery:
$.ajax({ url: 'your-url', success: function(data) { alert(data); } });This data is your HTML.
Without jQuery (just JavaScript):
function makeHttpObject() { try {return new XMLHttpRequest();} catch (error) {} try {return new ActiveXObject("Msxml2.XMLHTTP");} catch (error) {} try {return new ActiveXObject("Microsoft.XMLHTTP");} catch (error) {} throw new Error("Could not create HTTP request object.");
}
var request = makeHttpObject();
request.open("GET", "your_url", true);
request.send(null);
request.onreadystatechange = function() { if (request.readyState == 4) alert(request.responseText);
};You can use fetch to do that:
fetch('some_url') .then(function (response) { switch (response.status) { // status "OK" case 200: return response.text(); // status "Not Found" case 404: throw response; } }) .then(function (template) { console.log(template); }) .catch(function (response) { // "Not Found" console.log(response.statusText); });Asynchronous with arrow function version:
(async () => { var response = await fetch('some_url'); switch (response.status) { // status "OK" case 200: var template = await response.text(); console.log(template); break; // status "Not Found" case 404: console.log('Not Found'); break; }
})();There is a tutorial on how to use Ajax here:
This is an example code taken from that tutorial:
<html>
<head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari xmlhttp = new XMLHttpRequest(); } else { // Code for Internet Explorer 6 and Internet Explorer 5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "ajax_info.txt", true); xmlhttp.send(); } </script>
</head>
<body> <div><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>For an external (cross-site) solution, you can use: Get contents of a link tag with JavaScript - not CSS
It uses $.ajax() function, so it includes jquery.
I had problems with the fetch api and it seams that it always returns promise even when it returns text "return await response.text();" and to handle that promise with the text, it needs to be handled in async method by using .then.
<script> // Getting the HTML async function FetchHtml() { let response = await fetch('); return await response.text(); // Returns it as Promise } // Usaing the HTML async function Do() { let html = await FetchHtml().then(text => {return text}); // Get html from the promise alert(html); } // Exe Do();
</script>Edit: doesnt work yet...
Add this to your JS:
var src = fetch(')It saves the source of page.com to variable 'src'
First, you must know that you will never be able to get the source code of a page that is not on the same domain as your page in javascript. (See ).
In PHP, this is how you do it:
file_get_contents($theUrl);In javascript, there is three ways :
Firstly, by XMLHttpRequest :
var url="../635YY",xmlhttp;//Remember, same domain
if("XMLHttpRequest" in window)xmlhttp=new XMLHttpRequest();
if("ActiveXObject" in window)xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp.open('GET',url,true);
xmlhttp.onreadystatechange=function()
{ if(xmlhttp.readyState==4)alert(xmlhttp.responseText);
};
xmlhttp.send(null);Secondly, by iFrames :
var url="../XYjuX";//Remember, same domain
var iframe=document.createElement("iframe");
iframe.onload=function()
{ alert(iframe.contentWindow.document.body.innerHTML);
}
iframe.src=url;
iframe.style.display="none";
document.body.appendChild(iframe);Thirdly, by jQuery : [
$.get('../edggD',function(data)//Remember, same domain
{ alert(data);
});]4
