How to extract data from AJAX's responseText?

Question

When I use responseText, I get all the data. From <HTML> to </HTML>. How to I extract specific parts of it? For example, I have this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tester</title>
    </head>

    <body>

        <table>
            <tr>
                <td><a name="Name"></a>Name</td>
                <td>John</td>
            </tr>
            <tr>
                <td><a name="Email"></a>Email</td>
                <td>john@aol.com</td>
            </tr>
            <tr>
                <td><a name="Address"></a>Address</td>
                <td>123 Elm Street</td>
            </tr>
            <tr>
                <td><a name="City"></a>City</td>
                <td>Los Angeles</td>
            </tr>
            <tr>
                <td><a name="State"></a>State</td>
                <td>CA</td>
            </tr>
        </table>

    </body>
</html>

And Then I need to just extract like the city part Los Angeles. How would I go about doing this? I can't do responseText.getElementByTagName, or anything like that.

Here's the AJAX call:

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)
    {
    var pageContents = xmlhttp.responseText;
    document.getElementById("myDiv").innerText = pageContents;

    }
  }
xmlhttp.open("GET","content.html",false);
xmlhttp.send();

perhaps you should post your ajax call as well. Not many people on this site like guessing what you're doing with your js. — Kai Qing, Feb 03 '12 at 22:04
Maybe I don't understand your question... but why can't you? You can initiate a variable in your calling page that is global scope, set the value with the ajax page, and then make your ajax page execute whatever you script you want from the calling page. — phpmeh, Feb 03 '12 at 22:04
Check this: http://stackoverflow.com/questions/888875/how-to-parse-html-from-javascript-in-firefox — Malk, Feb 03 '12 at 22:15

pete · Accepted Answer · 2012-02-04T00:37:39.697

1

For a pure JavaScript solution, try (untested):

var city = responseXML.getElementsByName('City').parentNode.nextElementSibling.childNodes[0].getAttribute('textContent');

That said, a JavaScript library, like jQuery, to do the heavy lifting sure makes your code a lot easier to read (as well as cross-browser friendly).

edited Feb 04 '12 at 00:37

answered Feb 03 '12 at 22:38

pete

24,141
4
37
51

`getElementsByTagName` will get `` elements, not elements with the name `City`. You want `getElementsByName`. – gen_Eric Feb 03 '12 at 22:41
Hmm, see every time I try adding getElementsByName or ID to the xmlhttp.responseText I get Object doesn't support this property in IE and FF doesn't show anything. – zen Feb 06 '12 at 13:35
Use `responseXML`, NOT `responseText`. – pete Feb 06 '12 at 14:19

score 0 · Answer 2 · answered Feb 03 '12 at 22:16

0

jQuery names this (sort of) easy:

alert($('table').find('tr').eq(3).find('td').eq(1).html()) ---> Los Angeles

answered Feb 03 '12 at 22:16

Diodeus - James MacFarlane

112,730
33
157
176

How to extract data from AJAX's responseText?

2 Answers2