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');
}

Web Technology Experts Notes

Monday 13 April 2015