How to get the response of XMLHttpRequest

Question

I d like to know how to use XMLHttpRequest to load the content of a remote URL and have the HTML of the accessed site stored in a JS variable   Say  if I wanted to load and alert   the HTML of http   foo com bar php  how would I do that

User · Answer

The simple way to use XMLHttpRequest with pure JavaScript  You can set custom header but it s optional used based on requirement   1  Using POST Method   window onload   function        var request   new XMLHttpRequest        var params    UID CORS amp name CORS        request onreadystatechange   function             if  this readyState    4  amp  amp  this status    200                console log this responseText                         request open  POST    https   www example com api createUser   true       request setRequestHeader  api-key    your-api-key        request setRequestHeader  Content-type    application x-www-form-urlencoded        request send params       You can send params using POST method   2  Using GET Method   Please run below example and will get an JSON response    x000D   x000D  window onload   function    x000D      var request   new XMLHttpRequest    x000D   x000D      request onreadystatechange   function     x000D          if  this readyState    4  amp  amp  this status    200    x000D              console log this responseText   x000D            x000D         x000D   x000D      request open  GET    https   jsonplaceholder typicode com users 1    x000D      request send    x000D    x000D   x000D   x000D

User · Answer

You can get it by XMLHttpRequest responseText in XMLHttpRequest onreadystatechange when XMLHttpRequest readyState equals to XMLHttpRequest DONE   Here s an example  not compatible with IE6 7    var xhr   new XMLHttpRequest    xhr onreadystatechange   function         if  xhr readyState    XMLHttpRequest DONE            alert xhr responseText           xhr open  GET    http   example com   true   xhr send null     For better crossbrowser compatibility  not only with IE6 7  but also to cover some browser-specific memory leaks or bugs  and also for less verbosity with firing ajaxical requests  you could use jQuery     get  http   example com   function responseText        alert responseText         Note that you ve to take the Same origin policy for JavaScript into account when not running at localhost  You may want to consider to create a proxy script at your domain

User · Answer

I d suggest looking into fetch  It is the ES5 equivalent and uses Promises  It is much more readable and easily customizable   x000D   x000D  const url    https   stackoverflow com   fetch url       then          response   gt  response text       json    etc             same as function response   return response text           then          html   gt  console log html         x000D   x000D   x000D   In Node js  you ll need to import fetch using  const fetch   require  quot node-fetch quot     If you want to use it synchronously  doesn t work in top scope   const json   await fetch url     then response   gt  response json       catch  e    gt        More Info  Mozilla Documentation Can I Use  95  Feb 2020  Matt Walsh Tutorial

User · Answer

In XMLHttpRequest  using XMLHttpRequest responseText may raise the exception like below    Failed to read the   responseText   property from   XMLHttpRequest      The value is only accessible if the object  s   responseType   is        or   text    was   arraybuffer      Best way to access the response from XHR as follows  function readBody xhr        var data      if   xhr responseType    xhr responseType      text             data   xhr responseText        else if  xhr responseType      document             data   xhr responseXML        else           data   xhr response            return data     var xhr   new XMLHttpRequest    xhr onreadystatechange   function         if  xhr readyState    4            console log readBody xhr            xhr open  GET    http   www google com   true   xhr send null

[javascript] How to get the response of XMLHttpRequest?

1. Using POST Method:

2. Using GET Method:

Examples related to javascript

Examples related to xmlhttprequest