0

here is the my code code :

const http = new XMLHttpRequest();
const url  = 'http://page/';

http.open('get', url, false);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

http.onreadystatechange = function ()
{
  if(http.readyState === 4)
  {
    if(http.status === 200 || http.status == 0)
    {
        let str = (http.responseText);
        results = document.getElementById('test').value;
        alert(results)
    }
  }
}

http.send();

how i can sort the str into html so i can get the value using document.getElementById ?

i have tried 

var doc = document.implementation.createHTMLDocument("example");

doc.documentElement.innerHTML = http2.responseText; 

let test1 = doc.body.querySelector("#test").value;

it worked but it give me an empty value and when i looked at the response preview i found the value bar empty and the options are like in the factory default status . and when i looked in the html code of the page found the value in this line 

<script language=javascript>Transfer_meaning('test','\12345678');</script>
Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
mina nageh
  • 143
  • 2
  • 2
  • 13
  • If test is in the the response you would need to add the html to the document before calling getElementById – Patrick Evans Jun 20 '19 at 23:20
  • What kind of HTML element carries the id `test`? If it is eg. an `input` element, setting the `innerHTML` does not magically generate a `value`attribute ! Also check out what the response contains _and_ check out the mime type that is delivered ( `console.log('type: ' + responseType);` in JS ). – collapsar Jun 20 '19 at 23:39
  • so, you want to get this value `\12345678` ? – Mister Jojo Jun 20 '19 at 23:53
  • @MisterJojo yes but without that \ – mina nageh Jun 20 '19 at 23:59
  • @collapsar yes it's an input element – mina nageh Jun 21 '19 at 00:00
  • @collapsar i didn't know how to use this console.log('type: ' + responseType); but i looked at the page html and found this `` – mina nageh Jun 21 '19 at 00:04
  • @minanageh In that case use `let rawstr = http.responseText.replace("", "");`. Obviously you must be sure that the response will always be of the textual form given. – collapsar Jun 21 '19 at 00:06
  • @minanageh printing debug mesages in JS with `console.log` (instead of `alert`) as well as the use of the console window / dev tools is a basic tool; your development will benefit vastly from being familiar with these tools (say they are essential ... ;)) – collapsar Jun 21 '19 at 00:08
  • @minanageh The info in the `meta` tag refers to the original page loaded and _not_ the response from ajax calls. In fact you shouldn't trust it at all, better use a tool like Fiddler (local web proxy) to get this kind of information. – collapsar Jun 21 '19 at 00:10
  • @collapsar using that code gave me Uncaught SyntaxError: Invalid or unexpected token – mina nageh Jun 21 '19 at 00:36

2 Answers2

0

If responseText is a plain text HTML, you could do this

document.getElementById('test').innerHTML = str;
Julien
  • 832
  • 7
  • 15
  • i have tried it but didn't work `let str2 = (http2.responseText); document.querySelector("#test").innerHTML = str2;` got Cannot set property 'innerHTML' of null . while this worked ` var doc = document.implementation.createHTMLDocument("example"); doc.documentElement.innerHTML = http2.responseText; let test1 = doc.body.querySelector("#test").value;` but it give me an empty value ! and when i looked at the response preview i found the value bar empty and the options are like in the factory default status . and when i looked in the – mina nageh Jun 20 '19 at 23:32
  • 1
    We can't help you if you don't show us the code. What is inside http.responseText? – Julien Jun 20 '19 at 23:33
  • html code of the page found the value in this line `` – mina nageh Jun 20 '19 at 23:37
  • @MisterJojo what now ? – mina nageh Jun 20 '19 at 23:38
  • It's incomprehensible. – Julien Jun 20 '19 at 23:39
  • @Julien what does this even mean ? – mina nageh Jun 20 '19 at 23:41
  • The issue in your first snippet is that there are no elements with id "test". – Julien Jun 20 '19 at 23:42
  • @minanageh What the Ajax call returns is a script element containing JS code. You may integrate that in your existing page by adding it as a child of some element `test`but that will not set/modify the `value`attribute of that element. Iirc the JS snippet will not execute (which does not matter unless the `Transfer_meaning`function is defined and sets said attribute). – collapsar Jun 20 '19 at 23:43
  • @Julien maybe because "when i looked at the response preview i found the value bar empty and the options are like in the factory default status" and yes there wasn't elements with id "test" but when i load the page normally i don't face this problem . – mina nageh Jun 20 '19 at 23:45
  • @minanageh You should add the html and JS code of the web form that triggers the ajax call to your question to allow for spot-on help – collapsar Jun 20 '19 at 23:48
  • @collapsar how can i do that ? and yes i think it sets the value and sets said attribute .. cause i blocked the java script on that page and the value was gone and it's element too ... so i think the question should be how can i Parse an HTML & javascript response text of an XMLHttpRequest using js? – mina nageh Jun 20 '19 at 23:50
  • @minanageh Open the web page and right click on it in your browser. Choose 'view source' from the context menu which should show you the html and hopefully the important JS. This might be verbose - please trim it to a manageable size. Few people will wade though KBs of badly formatted html. – collapsar Jun 20 '19 at 23:55
  • @collapsar i am talking about "You may integrate that in your existing page by adding it as a child of some element testbut that will not set/modify the valueattribute of that element. Iirc the JS snippet will not execute" it seems i need the java script to execute. and about that "trim it to a manageable size" i don't know what to trim so i am trying to edit the page using inspect elements then save it but it saves the before edit version !! – mina nageh Jun 20 '19 at 23:59
  • @minanageh Re: 'how can i Parse an HTML & javascript response text of an XMLHttpRequest using js' - that would be a question of its own. **Please reconsider first whether you really want to do this**: The approach comes with loads of security issues, is inefficient, and most important unncessary for setting an html elements's attribute to some value. Do you have control over the server-side (ie. the component generating the response to the AJAX call) ? – collapsar Jun 20 '19 at 23:59
  • @minanageh Choose 'Edit as HTML' from the context menu of the element in the inspector window. That makes the HTML of the elment and its descendant editable as text: Copy that text. – collapsar Jun 21 '19 at 00:01
  • @collapsar "Edit as HTML" tried it but the value didn't show up in the edited value .. i don't know what i removed . – mina nageh Jun 21 '19 at 00:21
  • and no i am don't have control over the server-side . "approach comes with loads of security issues" no problem what is the fix ? – mina nageh Jun 21 '19 at 00:22
0

If you were using jquery:

Provided the response was something like:

let str = "<body><p>Paragraph Here</p><input id='test' value='foo'></body>";

Replace this line:

results = document.getElementById('test').value;

with this line:

let results = $('input#test', "<div>"+str+"</div>").val();

From this answer

Lucas Taulealea
  • 355
  • 2
  • 10