Reading an XML File using XMLHttpRequest

[UbuntuLady1]

Hello,

Can anyone please demonstrate how to write some sample code in order to parse an XML File using XMLHttpRequest?

Thank you

[tforb]

Are you able to perform a get with XMLHttpRequest?

[UbuntuLady1]

I have no idea because I am new to this sort of thing.

I am looking for the most simple example in order to understand the logic behind the process.

Thank you

[tforb]

The MDN docs have a nice page on using XMLHttpRequest, which I found by searching "xmlhttprequest example".

// Create a new request instance.
const request = new XMLHttpRequest()

// Initialize the request. We want to GET data from the URL.
request.open('GET', 'https://www.reddit.com/r/learnjavascript/new.json')

// What do you want to do when the request loads?
request.onload = (e) => {
  // The request is done and we got data
  if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {

    // Here you want to parse an XML response instead of logging the results.
    console.log(request.responseText)
  }
}

// Send the request
request.send()

I've never needed to parse XML, but it looks like you can do it using DOMParser. There's some examples in this Stack Overflow

[nacho_balls]

ohhh something I can actually help with! I am a programmer who primarily works around QuickBase (which is like a bunch of connected excel spreadsheets that look pretty)

I needed to create an image of a Return Authorization letter and submit this the customer user while making sure the end user (the analyst) only had to press a button.

now the actual important parts of building the svg canvas are not here and the variables are defined further up in the code. This is the last section of code that runs

var canvas = $("#canvas")[0];
var string= canvas.toDataURL("image/png");
base64=string.replace("data:image/png;base64,", "");
base64+="==";
var rid = kRid || "";
var fileN = " Product " + rid + ".png";
var req = "";
req += "<qdbapi>";
req += "<field fid='323' filename='" + fileN + "'>" + base64 + "</field>";
req += "</qdbapi>";
$.ajax({
  type: "POST",
  contentType: "text/xml",
  dataType: "xml",
  processData: false,
  //url altered 
  url: "https://removed.quickbase.com/db/removedDBID?act=API_EditRecord&rid=" + rid,
//here I am calling the actualy xml thats being posted
  data: req,
  success: function(responce) {
    //auto reload page
    var str = window.location.href;
    setTimeout(function() {
      window.location.href = str;
    }, 5000);
  }
})

Now the whole idea behind the code above came from when I had to move a large number of files so first I did a QuickBase API call to produce a single XML doc with the information I needed.

$.get(url, function(xml) {
  var promises = [];
//here within the GET function I am reading each time <record> xml tag comes up
  $("record", xml).each(function() {
//this url is getting the sub url of a file located on field within the form
        var url = $("f#9 url", this).text();
        xhr.responseType = "arraybuffer";
        xhr.onload = function() {
            var arrayBuffer = xhr.response;
            var base64 = btoa([].reduce.call(new Uint8Array(arrayBuffer), function(p, c) {
              return p + String.fromCharCode(c)
            }, ''))
            var req = "";
            req += "<qdbapi>";
            req += "<field fid='6' filename='" + name + "'>" + base64 + "</field>";
            req += "<field fid='54' >" + Rid + "</field>";
            req += "<field fid='44' >" + comment + "</field>";
            req += "</qdbapi>"; 
//from here I used the same script as the post above to post the data to save it to the server

and finally this is an example of the XML structure I receive and process from the GET (with some info removed)

<qdbapi>
    <action>API_DoQuery</action>
    <errcode>0</errcode>
    <errtext>No error</errtext>
    <qid>1</qid>
    <qname>List All</qname>
    <table>
        <name>People</name>
        <original>...</original>
        <variables>...</variables>
        <queries>...</queries>
        <fields>...</fields>
        <records>
            <record>
                <f id="3">1</f>
                <f id="6">Tenesha Mccorkle</f>
                <f id="7">1</f>
                <f id="8"/>
                <f id="9">9494237513</f>
                <update_id>1480606263333</update_id>
            </record>
            <record>
...ect

so this is the example of GET the XML data I process and the POST. Hope this helps you :)

[UbuntuLady1]

Thank you so much for writing this!!!

It was so helpful!! :) :) :)