Ajax Interview Questions and Answers for Fresher

Question: What are the advantages of AJAX?

1. Quick Response.
2. Quick Response without loading page.
3. Save the Bandwidth
4. Client Server Interaction what user letting know (User will not get disturb)

Question: What are the dis Advantages of AJAX?

1. Dependency on JavaScript.
2. An simple js error, Ajax will not called.
3. Security issues Might comes, if not implemented securely.
4. Difficult in Debugging for beginner
5. Sometimes browser compatibility issues comes.

Question: What are top website, who uses Ajax?

1. Youtube
2. Google
3. Bing
4. Gmail
5. Twitter
6. Linkdin

Question: What are security issues in AJAX?

1. Ajax is visible in browser console
2. Request, Response, header and cookie are visiable in browser console.
3. Every time called ajax is purely visiable in Ajax
4. An Ajax request can be called by hackers OR unauthorized, It can damage the website if there are not properly security checks
5. Attackers can try the ajax call with different request parameter.

Question: What are the technologies used by AJAX?

1. Javascript
2. XMLHttpRequest
3. XML/JSON/HTML
4. DOM
5. You can also use third party libaraies like jQuery, mootools etc

Question: What are common AJAX Framework?

1. jQuery
2. MooTools
3. Prototype
4. YUI
5. Dojo Toolkit
6. 
   
7. Google Web Toolkit (GWT)

Question:What are Ajax applications?
The web applicable which use the more ajax calls are ajax application.


Question: What are different stage of XMLHttpRequest?

1. 0: request not initialized
2. 1: server connection established
3. 2: request received
4. 3: processing request
5. 4: request finished and response is ready

Question: In Ajax call, which method is more secure GET/Post?
POST is more secure as compare to Get Method.


Question: Can anyone send ajax request with POST Method ?
Yes, can send using CURL.


Question: What is the difference between JavaScript and AJAX?JavaScript an object-oriented computer programming language used in web browsers.
Ajax is set of web development techniques using JavaScript to send/receive the data from server without loading page.


Question: What is Asynchronous in Ajax?
We can set the Asynchronous value as true OR false.

Async=true

Ajax request execute independently, Its response can come earlier than other request which is execute later .

Async=false

Ajax request does not execute independently, Its response can comes when earlier request finished.


Question: How to submit entire form data with Ajax?

//serialize ajax Data
var formData = $('form#formId').serialize();
$.ajax({ 
        url: '/my/site',
         data: formData,
         type: 'post',
         success: function(result) {
                      console.log(result);
          }
});

Question:Give a simple example of JSONP with Ajax?

$.getJSON("http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=?", function(result){
   //Now result have response of ajax call
   console.log(result);
});

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

jQuery Ajax Interview Questions and Answers for Experienced

Question: What is the difference between jQuery.get() and jQuery.ajax()?

$.get( "/ajax/add-user", { name: "Arun", company: "web-technology-experts-notes.in", gender:"Male" } );

$.get executes an Ajax request with using of GET Method.

$.ajax({
    type: "POST",
    url: "/ajax",
    data: "name=Arun&company=web-technology-experts-notes.in&gender=male",
    success: function(msg){
       console.log(msg); 
       
    }
});

$.ajax you full control over the Ajax request. In this you can use any method like GET or POST. I think you should use this only, if the other methods did not fulfill your requirement.
You can do lot of customization in this like caching and Ajax method etc


Question: What is the use of jQuery load method?
It is AJAX method which is used to load the data from a server and assign the data into the element without loading the page.


Question:What are the security issues with AJAX?

1. Source code written in ajax easily visiable.
2. Attrackers can send the the data to same API Call
3. Attrackers can view the Request/Response in Ajax call.
4. Attacker can view the full response and can hit and trial.

Question: How many types of ready states in ajax?
0: Request not initialized
1: Server connection established
2: Request received
3: Processing request
4: Request finished and response is ready


Question: List Some Popular Ajax Frameworks?.

1. jQuery.
2. script.aculo.us
3. Prototype
4. MooTools
5. ExtJS
6. Qooxdoo
7. Yahoo! UI Library (YUI)
8. MochiKit
9. Midori
10. The Dojo Toolkit

Question: What exactly is the W3C DOM?
The W3C Document Object Model (DOM) is defined by the W3C.
The DOM is a platform and language-neutral interface that allows programs and scripts to dynamically access/update the content of a document.


Question: What is the XMLHttpRequest object in AJAX?
It is way to update the web content from server without reloading the page.


Question: How can we abort the current XMLHttpRequest in AJAX?
use abort() function. For Example:

var xhr;    
xhr = $.ajax({
    url: 'ajax/get-user-details/user_id/3',
    success: function(data) {
        console.log(data);
    }
})
    
fn();

//Abort the Ajax call
if(xhr && xhr.readystate != 4){
  xhr.abort();  
}

Question: How to cancel all the active ajax call?
Every time you create an ajax request you should use a variable to store it, you can use array object to store multiple ajax.
Now you can use abort() function to abort each ajax call.


Question: How to debug Ajax call
You can use debug tools of browser.
like firebug in Mozilla.
Inspect element in Google Chrome

Question: How to convert an object to a string?
var javascriptObject = {name: "Web", "URL": "http://www.web-technology-experts-notes.in/"};

JSON.stringify(javascriptObject, null, 2);

Question: How to convert an string to a object?
var javascriptObject = '{name: "Web", "URL": "http://www.web-technology-experts-notes.in/"}';

JSON.parse(javascriptObject, null, 2);

Question: How can I add a custom HTTP header to ajax request with js or jQuery?

$.ajax({
    url: '/ajax/get-user-details/user_id/3',
    headers: { 'x-my-custom-header': 'some value' },
    success: function(data) {
        console.log(data);
    }
});

Question: How to determine if ajax timeout error comes?

$.ajax({
     url: '/ajax/get-user-details/user_id/3',
    type: "GET",
    dataType: "json",
    timeout: 1000,
    success: function(data) { 
        console.log(data);
     },
    error: function(x, t, m) {
        if(t==="timeout") {
            console.log("got timeout");
        } else {
            console.log(t);
        }
    }
});?

Question:How to send an https ajax call on http page?
Add the Access-Control-Allow-Origin header from the server

Access-Control-Allow-Origin: https://www.myexample.com

Ajax interview questions and answers for 1 year experience

Question: How to set header in Ajax where they are using Get Method?
After jQuery 1.4, You can set the header data in $.ajax method.
You can set the header data in "headers" node, by default header value is empty {}.
See Example:

$.ajax({
    url: "/ajax/myfile.php",
     data: 'pro=web+technology+experts+notes',
     type: "GET",
     headers: {"X-Test-Header-Key": "header-value"}
});

Question: How to pass multiple parameter in Ajax call?
When you are using $.ajax method, we can pass multiple parameters in ajax call.
See Example:

$.ajax({
    url: "/ajax/myfile.php",
     data: JSON.stringify({ field1: 'value1', field2: 'value2',field3: 'value3' }),
     type: "GET",
     headers: {"X-Test-Header-Key": "header-value"},
    error: function(xhr, status, error) {
        // when ajax call (get OR POST), failed, this node will be called.
      //console.log(xhr);    
  
    }
});

Question: How to do error handling in Ajax Call?
Whenever ajax call failed due to any reason, you can get the error response in error node of ajax call.
See Example:

$.ajax({
    url: "/ajax/myfile.php",
     data: 'pro=web+technology+experts+notes',
     type: "GET",
     headers: {"X-Test-Header-Key": "header-value"},
    error: function(xhr, status, error) {
        // when ajax call (get OR POST), failed, this node will be called.
      //console.log(xhr);    
  
    }
});

Question: How to call multiple Ajax request in single click with callback function?
You can use $.when method of jQuery.
See Example:

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) )
  .then( myFunc, myFailure );

Question: How to Pass entire form as data in jQuery Ajax function?
To get the entire form data use following code:

var formData = $('form').serialize();

Now formData, have all the html form data.
You can pass this variable in ajax call.
See Example:

var formData = $('form').serialize();
$.ajax({
    url: "/ajax/myfile.php",
     data: formData,
     type: "GET",
     headers: {"X-Test-Header-Key": "header-value"},
    error: function(xhr, status, error) {
        // when ajax call (get OR POST), failed, this node will be called.
      //console.log(xhr);    
  
    }
});

Question: How is GMail Chat able to make AJAX requests without client interaction?
When we are using gmail inbox, we notice that emails are automatic refresh after some time. and also there are no ajax call.
This is possible with technique like comet.
Comet is a "web application model" in which a long-held HTTP request allows a web server to push data to a browser, without the browser explicitly requesting.


Question: What are JSON security best practices?
1. Don't use uses cookies for authentication.
2. Don't pass sensitive information in JSON Response.
3. You can use POST Method.
4. Add http referer check in server side, means server return response, only if request from same domain.


Question: How to upload images with ajax?
Today's lot of js framework plugins are available for uploading images, text file, videos with ajax, means upload files without page refreshing.
See Below Example:
http://js1.hotblocks.nl/tests/ajax/file-drag-drop.html
http://www.uploadify.com/demos/




Question: How to load data on scroll down?
When user scroll data the page, scipt will compare the height of whole page vs scrolled page, If there is now less space at bottom. Ajax call will sent to server with page number and append that result into current page.
We have create same script for you.
See Example Below

var page=0;
$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        page++;

        $.ajax({
            url: "/ajax/load-data.php?page="+page,//this must return the html instead of json             
             type: "GET",
             success:function(data){
                 //Here data will be all the new html, you need to append this to existing page like below
                    $('#container').append(data);
            }
            error: function(xhr, status, error) {
                // when ajax call (get OR POST), failed, this node will be called.
              //console.log(xhr);    

            }
        });



    }
});

Question: How to parse json data with jquery / javascript in ajax call and in Normal text?In ajax call, if response is coming in JSON format, then we must set datatype as JSON in ajax. See Example below:

$.ajax({
    url: "/ajax/load-data.php",
     type: "GET",
     dataType: 'json',
     success:function(data){         
        //Now you can handle JSON Response
    }
    error: function(xhr, status, error) {
    //Error handling here 

    }
});

If there are data in normal text and we want to parse the text with use of parseJSON method. See Example:

$.parseJSON(planTextData);

Question: How to check, if string is JSON OR NOT?
We can use JSON.parse method to check JSON is valid OR NOT.

var stringData='{json:data}';
try
{
   var json = JSON.parse(stringData);
}
catch(e)
{
   //console.log('invalid json');
}

Ajax Interview Questions and Answers for 3 Year Experienced

Question: How to send ajax request to another domain using JSONP?
JSONP is simple way to overcome XMLHttpRequest same domain policy. With use of JSONP you can send the request to another domain. JSONP is "JSON with Padding", In JSONP we include another domain URL with a parameter i.e callback.
callback's value have a function name which must be present in your webpage.
See Example:

<script>
function myCalllbackFunction(data){
  console.log(data);
} 
</script>

 <script src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCalllbackFunction" type="text/javascript"></script>

Question: CanAJAX requests retain PHP login info?
Yes, I can be.


Question: How can I detect that the Internet connection?
Very simple.
Make a ajax call to reliable server which always return data. To check the Internet connection, request the data to the server. If ajax call return data, internet connection is working else not. But make sure, ajax response must not come from browser cache. For this set the cache:false in ajax call.


Question: How to send Query string(If query string is full URL) in Ajax call?
use encodeURIComponent() before sending query string.
var url=encodeURIComponent(url);


Question: How to send ajax call with https on http page (Suppose, both https and http are same domain)?
If both protocall have same domain, then you can send all ajax request with https on both (https and https page).
Add Following in ajax Header

Access-Control-Allow-Origin: https://www.youwebsitedomain.com

Question: How to get response header of AJax Call?

$.ajax({
    url: '/ajax',
    success:function(data, textStatus, request){
      console.log(request.getResponseHeader('some_header'));
    
    }
});   

Question: Can I handle the redirection of xmlhttprequest in Ajax Call?
No,


Question: How can I get the values of all sected checkbox?

$("input:checkbox[name=type]:checked").each(function()
{
//JS array of selected checkbox
    
});

Question: How to pass entire form data in Ajax?

   function onSubmitFunction(){
    $.ajax({
        type: "POST",
        url: "/ajax",
        data: $('#mytestForm').serialize(),
        success: function(msg){
            //console.log(msg); 
        }
    });
    return false;
}

Question: How to get the error messages in jQuery Ajax?

   function onSubmitFunction(){
    $.ajax({
        type: "POST",
        url: "/ajax",
        data: $('#mytestForm').serialize(),
        success: function(msg){
            //console.log(msg); 
        },
       error: function (request, error) {
              console.log(arguments);              
          }
    });
    return false;
}