how to use ajax request without jquery

Question

function imageHandler(myToDo,myimageId)
{ 
    $.get('{{path('imageHandler')}}',
        {imageId: myimageId, toDo: myToDo},  
        function(response) {
            if(response.code == 100 && response.success) {
                //success
                alert(myToDo+' was sent');
            }
            else if(response.code == 200) {
                //code 200 = user not logged in
            }; 
        }, "json");
}

This is the working ajax code for a symfony2 application im writing.

I'm using $.get from jquery to send the data, how is it possible to write this function without jQuery?, I have already looked into other similar questions but I don't understand the answers.

Already tried this

function imageHandler(myToDo,myimageId)
{ 
    var hr = new XMLHttpRequest(); 
    var vars = {imageId: myimageId, toDo: myToDo};

    hr.open("GET", "{{path('imageHandler')}}", true); 
    hr.setRequestHeader("Content-type", "application/json"); 
    hr.onreadystatechange = function() 
    {
      if(hr.code == 100 && hr.success)
      {
        //success
      }
       else if(hr.code == 200) 
       {
        //code 200 = user not logged in
       }
    } 
    hr.send(vars);  
}

here is the answer:

A co-worker just answered the question. Thanks for your help, here is the answer

function imageHandler(myToDo,myimageId)
{ 
    var xml = new XMLHttpRequest();  
    xml.open("GET", "{{path('imageHandler')}}", true); 
    xml.setRequestHeader("Content-type", "application/json"); 

    xml.onreadystatechange = function() 
    {
       var serverResponse = JSON.parse(xml.responseText);

       if(serverResponse.code == 100 && serverResponse.success)
       {
        //success 
       }
       else if(serverResponse.code == 200) 
       {
          //not logged in

       }

        xml.send({imageId: myimageId, toDo: myToDo});   
   }
}

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest — Quentin, Jan 30 '14 at 10:58
I already tried that, but the code doesn't respond, I would appreciate if you would check my edited question — Gabriel ThaKid, Jan 30 '14 at 11:11
What do you mean with *"but the code doesn't respond"*? Overall I don't think you have *really* read the documentation. — Felix Kling, Jan 30 '14 at 11:14
doesn't respond = button that triggers the "imagehandler" function does nothing, also the console shows no errors — Gabriel ThaKid, Jan 30 '14 at 11:19

score 1 · Accepted Answer · edited May 23 '17 at 11:53

Get your HTTP verb right

hr.open("GET", "{{path('imageHandler')}}", true);

You are making a GET request but trying to send a request with a body. You need to use POST (or maybe PUT), not GET.

hr.open("POST", "{{path('imageHandler')}}", true);

Alternatively: The jQuery code you wrote is making a GET request and encoding the data as a query string. You could do that instead.

Send the data format you claim you are sending

hr.setRequestHeader("Content-type", "application/json");

You say you are sending JSON but…

var vars = {imageId: myimageId, toDo: myToDo};
hr.send(vars);

… vars is a JavaScript object. When converted to a string, it will look something like `"[Object object]". If you want to send JSON, you need to make JSON.

var vars = {imageId: myimageId, toDo: myToDo};
hr.send(JSON.stringify(vars));

Note that the server side program that processes the data will need to be set up to handle JSON requests.

Alternatively: The jQuery code you wrote is sending the data encoded as a query string and not as JSON. You could do that instead.

You need to check the response status correctly

  if(hr.code == 100 && hr.success)

Where does the code property come from? Where does the success property come from? Neither of them appear in the documentation you said you read.

If you are processing the data using onreadystatechange then you need to test if:

The ready state is DONE
The HTTP Status is OK

Such:

if (hr.readyState == 4 && hr.status == 200)

Thanks for answering, the code and success variables are returned from a symfony2 controller like this $response = array("code"=>200,"success"=>false); return new Response(json_encode($response)); — Gabriel ThaKid, Jan 30 '14 at 11:30
Then, after you've established the status of the response is OK, you need to parse the text content of the response to a JavaScript object and then run your original `if` statement on *that*, not the XHR object. — Quentin, Jan 30 '14 at 11:31

Freelance PHP Programmer · Answer 2 · 2014-01-30T11:17:01.073

0

in javascript, here's something you can try:

req = new XMLHttpRequest();
req.onreadystatechange=function() { 
    status = req.status; //this is your response.code
 responseHtml = req.responseText; }

req.open("GET","your ajax file here",true);
req.send();

This is just an idea about ajax request in javascript. more info here.

edited Jan 30 '14 at 11:17

answered Jan 30 '14 at 11:11

Freelance PHP Programmer

370
1
7

The `responseHtml = req.responseText;` looks misplaced. – Felix Kling Jan 30 '14 at 11:15
thank you for answering, your suggestion looks like the code I've already tried () I would be thankful if you could compare the jquery and javascript to see why they aren't responding the same – Gabriel ThaKid Jan 30 '14 at 11:15
@FelixKling: I wrote that just as an idea, thanks for correction! – Freelance PHP Programmer Jan 30 '14 at 11:17

how to use ajax request without jquery

2 Answers2