HTML-code ophalen met JavaScript met een URL

Ik probeer de broncode van HTML te verkrijgen door een XMLHttpRequestmet een URL te gebruiken. Hoe kan ik dat doen?

Ik ben nieuw in programmeren en ik weet niet zo goed hoe ik het kan doen zonder jQuery.


Antwoord 1, autoriteit 100%

Gebruik jQuery:

$.ajax({ url: 'your-url', success: function(data) { alert(data); } });

Deze gegevens zijn uw HTML.

Zonder jQuery (alleen 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);
};

Antwoord 2, autoriteit 26%

Er is een tutorial over het gebruik van Ajax hier: https://www.w3schools. com/xml/ajax_intro.asp

Dit is een voorbeeldcode uit die 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 id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>

Antwoord 3, autoriteit 24%

Je kunt ophalengebruiken om dat te doen:

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

Asynchrone versie met pijlfunctie:

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

Antwoord 4, autoriteit 6%

Voor een externe (cross-site) oplossing kunt u gebruik maken van: Inhoud van een link-tag ophalen met JavaScript – niet CSS

Het gebruikt de functie $.ajax(), dus het bevat jQuery.


Antwoord 5, autoriteit 6%

Ik had problemen met de fetch-api en het lijkt erop dat het altijd belofte retourneert, zelfs wanneer het de tekst "return await response.text();"retourneert en om die belofte met de tekst af te handelen, is het moet worden afgehandeld in de asynchrone methode met behulp van .then.

    <script>
                // Getting the HTML
                async function FetchHtml() 
                {
                    let response = await fetch('https://address.com');
                    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>

Antwoord 6, autoriteit 3%

Bewerken: werkt nog niet…

Voeg dit toe aan je JS:

var src = fetch('https://page.com')

Het slaat de bron van page.com op in variabele ‘src’


Antwoord 7, autoriteit 3%

Eerst moet u weten dat u nooit in staat zult zijn om de broncode van een pagina te krijgen die niet op hetzelfde domein staat als uw pagina in JavaScript. (Zie http://en.wikipedia.org/wiki/same_origin_policy ).

in PHP, dit is hoe u het doet:

file_get_contents($theUrl);

in JavaScript, er zijn drie manieren:

Ten eerste, door xmlhttprequest: http://jsfiddle.net/635YY/ 1 /

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

Ten tweede, door IFRAMES: http://jsfiddle.net/xyjux/ 1 /

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

Ten derde, door jQuery: [http://jsfiddle.net/edgd/2/

$.get('../edggD',function(data)//Remember, same domain
{
    alert(data);
});

]4

Other episodes