Top 10 Ajax interview Questions and Answers

Question 1: Give basic example of JSONP with Ajax?
Full Form of JSONP is JSON with padding.
JSONP is a simply way to overcome the XMLHttpRequest same domain policy. (As we know, we can't send Ajax request to a different domain.)
But with use of JSONP we can do the same.

$.getJSON("http://example.com/file.json?callback=?", function(result){
   console.log(result); //Here response will comes   
});

Question 2: How to add header in Ajax call?
Way 1: Add Header in Ajax call

$.ajax({
    url: '/aja/ajax-call',
    headers: {
        'Authorization':'Basic xxxxxxxxxxxxx',
        'X_CSRF_TOKEN':'xxxxxxxxxxxxxxxxxxxx',
        'Content-Type':'application/json'
    },
    method: 'POST',
    dataType: 'json',
    data: 'name=test&age=20&gender=m',
    success: function(data){
      console.log(data);
    }
  });

Way 2: Add Header Before send the Ajax call

$.ajax({
    url: '/aja/ajax-call',
    beforeSend: function (request){
       request.setRequestHeader("Authority", authorizationToken);
    },
    method: 'POST',
    dataType: 'json',
    data: 'name=test&age=20&gender=m',
    success: function(data){
      console.log(data);
    }
  });

Question 3: URL Encode a string before sending in Ajax call?

$.ajax({
    url: '/aja/ajax-call', 
    method: 'POST',
    dataType: 'json',
   data: 'name=test&age=20&gender=m&url='+encodeURIComponent('http://web-technology-experts-notes.in'),
    success: function(data){
      console.log(data);
    }
  });

Question: Do AJAX requests retain PHP Session info?
Yes,

Question 4: What should i do when i didn't get result in Ajax Call? use error:, I ajax code. For Example:

$.ajax({
    url: '/aja/ajax-call', 
    dataType: 'json',
   data: 'name=test&age=20&gender=m',
    success: function(data){
      console.log(data);
    },
    error: function ( jqXHR, textStatus, errorThrown ) {
        console.log(jqXHR+'-'+textStatus+'-'+errorThrown);
      },
  });

Question 5: How to send ajax request synchronously? set async as false, for Example

$.ajax({
    url: '/aja/ajax-call', 
    dataType: 'json',
   data: 'name=test&age=20&gender=m',
    success: function(data){
      console.log(data);
    },
    async:false ,
  });

Question 6: Can we send post data with JSONP?
No, we can get only results with JSONP

Question 7: How to get the jQuery $.ajax error response text?
Add following node, in $.ajax,

error: function(xhr, status, error) {
  var err = xhr.responseText;
}

Question 8: How to pass entire form in Ajax call?
First serialize the form data and pass in ajax call. For Example.

$.ajax({
    url: '/aja/ajax-call', 
    dataType: 'json',
   data: $('form#formId').serialize(), /* Must be serialized **/
    success: function(data){
      console.log(data);
    },
    error: function ( jqXHR, textStatus, errorThrown ) {
        console.log(jqXHR+'-'+textStatus+'-'+errorThrown);
      },
  });

Question 9: What are different readyStates in XHLHttpRequest?
State Description
0- The request is not initialized
1- The request has been set up
2- The request has been sent
3- The request is in process
4- The request is complete

Question 10: How we can upload the image with Ajax?
use uploadify plugin.
http://www.uploadify.com/demos

Web Technology Experts Notes

Friday 20 November 2015