jquery ajax functions part 2

8/12/2019 jQuery AJAX Functions Part 2

1/73

jQuery AJAX functions part 2get(), post(), getScript() and getJSON()

In this second post we will discuss some other jQuery AJAXfunctions .First of all, not that

these are jQuery functions (they operate directly on jQuery or $ and not on jQuery objects).

From an interview perspective, you may or may not be directly asked about these functions. It

might be disguised as a different question. For example, How can you send data back to theserver asynchronously? How do you get and parse JSON data from the server? And so on.

get(), post()

jQuery get() and post() can be used to fetch the content of a web page, pass in optional data

and also optionally invoke a callback. They are very similar in their signature to the load()

method we discussed previously. In addition to the data and callback, both these methods

also provide an optional 4th argumentthe datatype is used to specify the type of data you are

requesting back and is used before your callback is executed.

As their names imply, get() uses the HTTP GET protocol and post() uses the POST protocol.

// Request text and display it in an alert dialog

jQuery.get("errors.html", alert);

The official jQuery API page on get() athttp://api.jquery.com/jQuery.get/lists some great

examples some of which are shown below:

Example: Request the test.php page, but ignore the returnresults .

$.get("test.php");

Example: Request the test.php page and send some additional data along (while still ignoring

the returnresults ).

$.get("test.php", { name: "John", time: "2pm"} );

Example: pass arrays of data to the server (while still ignoring the returnresults ).
http://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://api.jquery.com/jQuery.get/http://api.jquery.com/jQuery.get/http://api.jquery.com/jQuery.get/http://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://api.jquery.com/jQuery.get/http://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.html


2/73

$.get("test.php", { 'choices[]': ["Jon", "Susan"]} );

The post() calls are pretty much the same as get(). A few examples from the official jQuery API

page are shown below.

Example: Request the test.php page, but ignore the return results.

$.post("test.php");

Example: Request the test.php page and send some additional data along (while still ignoringthe returnresults ).

$.post("test.php", { name: "John", time: "2pm"} );

Example: pass arrays of data to the server (while still ignoring the returnresults ).

$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

Example: send form data using ajax requests

$.post("test.php", $("#testform").serialize());

jQuery getScript() function
http://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.html


3/73

The jQuery.getScript() function takes the URL of a JavaScriptfile to load and then

asynchronously loads and executes that code in the global scope. A key point to note is that it

can work for both same-domain and cross-domain scripts.

// Dynamically load a script from some other server

jQuery.getScript("http://contoso.com/js/helpers.js" );

The getScript() function takes an optional second parameter which is a callback to be executed

on success.

// Load helpers and use it once it loads

jQuery.getScript("js/jquery.my.helpers.js", function() {

$('div').help(); // Use it

});

Note that the callback is only executed when the request succeeds. If you want to handle the

error case, you will need to use thebig brother the ajax() call.

jQuery getJSON() function

Our final function is getJSON(). This is very similar to getScript() but instead of executing the

contents after fetching (as is the case with getScript(), getJSON() parses it as JSON (using the

parseJSON() under the covers) and then passes the resultant JSON to the callback. You can

optionally send data back to the server as the second argument.

Again, to borrow an example from the official jQuery API page on getJSON() function -

http://api.jquery.com/jQuery.getJSON/,the code snippet below uses thefollowing JSON

structure to loop through the requested data, builds an unordered list, and appends it to thebody.

{

"one": "Singular sensation",

"two": "Beady little eyes",

"three": "Little birds pitch by my doorstep"

}
http://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://api.jquery.com/jQuery.getJSON/http://api.jquery.com/jQuery.getJSON/http://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://api.jquery.com/jQuery.getJSON/http://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.html


4/73

$.getJSON('ajax/test .json', function(data) {varitems = [];

$.each(data, function(key, val) {

items.push(''+ val + '');

});

$('', {

'class': 'my-new-list',

html: items.join('')

}).appendTo('body');

});

All these functions are shorthandAJAX functions and call also be invoked via the .ajax() call.

jQuery AJAX functions part 1the load() method

jQuery is rapidly gaining popularity in many webapplications and most of the modern

frameworks (including ASP.NET) are providing official support for this lightweight and powerful

framework. As such, most of the web developer and SDET interviews now make sure that the

interviewee knows and understands the jQuery concepts. This includes (but is not limited to)

selectors, getters, setters, events, effects, ajax, plugins and UI library concepts.

In thenext few posts, we will discuss the jQuery AJAX functions. There are 3 categories of

questions: Explain the basic jQuery load() method; Explain the jQuery utility functions; and

lastly, the king of all functions: Explain the jQuery ajax() function. In this post we will focus our

attention on the load() function.

Basic load() method

The simplest AJAX method in jQuery is the load() method; given a URL, it will asynchronously

load its contents and display it dynamically on the page (in the element specified). In its

simplest form, the load function looks something like this:

$('div').load('CurrentStatus.html');

A morecomplete example might be when you combine this functionality with a timer to

update some element on a periodic basis.
http://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-2get-post.html


5/73

// Load and display the current status every minute

setInterval(function() {

$("#currentStatus").load("CurrentStatus.html");

}, 60000);

The code above will get the entire contents of the specified web page. The load() function also

allows you to get partial page content. The trick is to add a space to the URL and follow it with a

jQuery selector. When the URL has loaded, the selector you specified will be used to select the

portions of the loaded HTML to be displayed:

// Load the temperature section of the weather report

$('#db_status').load("CurrentStatus.html #DB");

Thecomplete signature of the load() method takes in two additional optional parameters

.load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )

url - A string containing the URL to which the request is sent.

data - A map or string that is sent to the server with the request.complete(responseText, textStatus, XMLHttpRequest) - A callback function that is executed

when the request completes.

Passing data to the load() method

If you pass in a string as the data, it is appended as a query string parameter. On the other

hand, if you pass in an object, it is converted to name=value pairs. For example, the first call ispassed as query string data and the second example shows an object that is passed to the call.

// Load the status for a particular server

$('#status').load("CurrentStatus.html", "server=db01");

// pass an object as data specifying an interval of day
http://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.html


6/73

$('#status').load("CurrentStatus.html",

{ server:'DB01', interval:'1day'});

Executing a callback function

The second optional parameter is a callback function that will execute on completion of the

load()method .

$('#result').load('ajax/test .html', function() {

alert('Load was performed.');

});

One important fact to note is that the POSTmethod is used if data is provided as an object;otherwise, GET is assumed.

jQuery AJAX functions part 3ajax()

The $.ajax() function underlies all Ajax requests sent by jQuery. This is by far the most complexfunction in the jQuery library. In fact, the jQuery official documentationmarks this as a low-level function and recommends using one of the high level functions (such as get(), post(), etc.).This function accepts a single argument: a set of key/value pairs that configure the Ajax request.

From an interview perspective, it is important to understand how the other higher level functions

map to this function.

jQuery.Get()call is equivalent to thefollowing .ajax() call:

$.ajax({

url: url,

data: data,

success: success,

dataType: dataType

});

jQuery.Post()call maps out to thefollowing .ajax() call:

$.ajax({

type: 'POST',

url: url,

data: data,
http://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-1the-load.html


7/73

success: success

dataType: dataType

});

jQuery.GetJSON()maps to

$.ajax({

url: url,

dataType: 'json',

data: data,

success: callback

});

As you can see from the above, a consistent pattern is visible. If a typeis not specified, GET isused. A urlis almost always required. To pass in data, you use the data name. And, you canhave a callback for success. Of course, there are a lot more parameters that can be configured. Afew key ones are crossDomainfor cross domainaccess for JSONP, error for error handlingfunction,password for authenticated requests, and so on.

jQuery to select/deselect all items in a CheckBoxList

In modern day sites, the user sometimes is presented with multipleoptions and she can eitherselect individual options or all. The same thought also applies when deselecting the options. For

example, in the screen shot below, the user can select one or more options:

Now wouldnt it be nice that the user had a simple way to select/deselect all the containers in oneclick?

Question: Using jQuery, provide a simple way for the user to select and deselect all the

checkboxes in a checkboxlist.
http://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://lh4.ggpht.com/-1jF6N3Bly5c/TiHdlLByz0I/AAAAAAAAChY/vlMamil_psQ/s1600-h/image%255B2%255D.pnghttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://lh4.ggpht.com/-1jF6N3Bly5c/TiHdlLByz0I/AAAAAAAAChY/vlMamil_psQ/s1600-h/image%255B2%255D.pnghttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://lh4.ggpht.com/-1jF6N3Bly5c/TiHdlLByz0I/AAAAAAAAChY/vlMamil_psQ/s1600-h/image%255B2%255D.pnghttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://lh4.ggpht.com/-1jF6N3Bly5c/TiHdlLByz0I/AAAAAAAAChY/vlMamil_psQ/s1600-h/image%255B2%255D.pnghttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.htmlhttp://www.programminginterviews.info/2011/06/jquery-ajax-functions-part-3ajax.html


8/73

Let us first build our ASP.NET page.The page will have 2 basic elements: A standaloneasp:CheckBox to enable select/deselect all option. An asp:CheckBoxList to hold our useroptions.

Select one or more containers:

Small

Large

Micro

Regular

Unknown

Other

Virtual

With our ASP.NET page defined, the jQuerypart is actually quite simple. All we need to do isto attach to the click() event of the standalone checkbox and copy its checked state to thecheckbox list.

Select/Deselect

1:

2:

3:

4: // hook to the document ready function

5: $(document).ready(function()

6: {

7: // find the select all checkbox

8: varselectAll = $('#');

9:

10: // hook onto select all checkbox's click event

11: selectAll.click(

12: function()

13: {

14: // for all inputtypes of checkbox

15: // for the container
http://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.html


9/73

16: // set the attribute to the value

17: // of select all checkbox

18: $("# input[type='checkbox']").

19: attr('checked', selectAll.is(':checked'));

20: }

21: );

22: });23:

Select one or more containers:

Small

Large

Micro

Regular

Unknown

Other

Virtual

jQuery to show big image on hover

One of the common tasks in the normal development cycle of web pages is to show an imagegallery .As with most web sites, an image gallery has a lot of thumbnails and when the userhovers the mouse over an image, we would like to show a big version of the image.

Question: Given a ASP.NET web page with lots of thumbnail images, write jQuery handler

to show an enlarged image when a user moves the mouse over an image.

To solve this problem, lets first define how our web page looks like. Basically, we will have a

bunch of thumbnails onthe page and an empty div element to contain the full image view ofthe selected thumbnail. By selected, I mean the image over which the user is hovering.

In addition, we will also define our thumbnail and full image size using CSS classes. These CSSclasses will also play an important role in jQuery selectors.

Our aspx page looks like the following so far:
http://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-selectdeselect-all-items-in.html


10/73

Image Gallery

.thumbnail {position:relative;width:100px;height:75px;}

.image {position:relative;width:400px;height:300px;}

Now lets see how we can achieve thisfull image effect on hover using jQuery. We will use theCSS selector to find all thumbnails. Now for this collection, we will tap into the hover() effectand change the opacity of all thumbnails to lets say 0.5. Now for more prettier UI, lets animateand bring back the opacity of the selected thumbnail to 1 in a slow motion. As the final step, letsset the image from the selected thumbnail in a new image tag in the fullImageDiv. To select theimage source for the current selected thumbnail, you can use $(this).attr("src").
http://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.html


11/73

When you use jQuery to chane the DOM on events, always make sure to clean up after the eventfinishes. In our case, we will hook to the mouseleave event and bring the opacity back to 1 for allthumnails and remove the image we added to the fullImageDiv.

The JQuery and the ASP.NET code in itsfull form looks like this now:

ImageGallery

$(document).ready(function()

{

// hook to the hover event

$(".thumbnail").hover(

function()

{

// "dim" the opacity for all thumbnails

$(".thumbnail").css("opacity", "0.5");// animate the opacity of the selected image

$(this).animate({ opacity: 1.0 }, 200);

// set the selected thumbnail image

// in the fullImageDiv

$("#fullImageDiv").append("");

},

// in the mouseleave event, cleanup

function()

{

// reset the thumbnail opacities

$(".thumbnail").css("opacity", "1.0");

// remove the image we just added

$(".image").remove();

}

);

});
http://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.html


12/73

.thumbnail {position:relative;width:100px;height:75px;}

.image {position:relative;width:400px;height:300px;}

AJAX Interview Questions and Answers with Example Notes

AJAX is a popular topic and most of the webapplications use AJAX. Most developers likeJava developers, PHP developers, Web developers, ASP.Net developers or any type of webdevelopers use AJAX to create successful applications. That's why, jobs like related to Java,PHP, Web development, ASP etc. interviews have at least some basic question of AJAX. Peopledo not ask very detail question during the interview but to answer those question, you may needthe clear basic idea about AJAX. This page has some interview questions which are veryimportant for preparation of interview. You will get all the answers of the AJAX answer at theend of each question. AJAX interview questions are marked with bold font. Moreover, there aresome good notes and example to use AJAX. Don't forget to practice them.

What is AJAX?

means Asynchronous JavaScript and XML is not a single technology, but a group of technologies is not a new programming language, but a new way to use existing standards is the art of exchanging data with a server, and updating parts of a web page - without reloading

thewhole page

Ads by Easy%20%20DealsAd Options
http://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1FYXN5JTIwJTIwRGVhbHMmaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT0xNzAwJnM9MTA0NiZ3PXBsdXNtaW51cy5odWJwYWdlcy5jb20mYj1iZDImcmQ9JnJpPQ==http://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1FYXN5JTIwJTIwRGVhbHMmaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT0xNzAwJnM9MTA0NiZ3PXBsdXNtaW51cy5odWJwYWdlcy5jb20mYj1iZDImcmQ9JnJpPQ==http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1FYXN5JTIwJTIwRGVhbHMmaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT0xNzAwJnM9MTA0NiZ3PXBsdXNtaW51cy5odWJwYWdlcy5jb20mYj1iZDImcmQ9JnJpPQ==http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.htmlhttp://www.programminginterviews.info/2011/07/jquery-to-show-big-image-on-hover.html


13/73


14/73

HTML JSON object

What are the reasons to get the following type of errors?

1. XMLHttpRequest cannot load file:///C:/Tutorials/jQuery/practices/ajax/dataFile.txt. Crossorigin requests are only supported forHTTP .2. Uncaught NetworkError: A network error occurred.

AJAX request can not executed without server. To get reply, we need to execute the AJAXrequest into the server. So, if the requested object is missing into the server, theabove errorcould be also created.

What is the meaning of 404 or 500 status in AJAX?

It means that the AJAX call to the server is unsuccessful.

What is the meaning of status: 200 in AJAX?

status:200 means AJAX call is successful.

http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1FYXN5JTIwJTIwRGVhbHMmaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT0xNzAwJnM9MTA0NiZ3PXBsdXNtaW51cy5odWJwYWdlcy5jb20mYj1iZDImcmQ9JnJpPQ==http://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1FYXN5JTIwJTIwRGVhbHMmaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT0xNzAwJnM9MTA0NiZ3PXBsdXNtaW51cy5odWJwYWdlcy5jb20mYj1iZDImcmQ9JnJpPQ==http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1FYXN5JTIwJTIwRGVhbHMmaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT0xNzAwJnM9MTA0NiZ3PXBsdXNtaW51cy5odWJwYWdlcy5jb20mYj1iZDImcmQ9JnJpPQ==http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


15/73

What is the meaning of "false" in the following line of code?

request.open('GET', 'MyData.txt', false);

It means the request is synchronous request.

How to retrieve the state of the requested process?

By using the property readyStateof XMLHttpRequest object. readyState property uses numericvalues to represent the state.

What's the meaning if readyState has the value 0?

If the value of readyState has 0, it means the request hasn't been sent yet.


16/73

What's the meaning if readyState has the value 4?

When readyState's value reaches 4, it means the operation of sending and receiving the requestshas been completed.

What is XHR and what are the use of XHR?

XHR meansXMLHttpRequest. The use of XHR are the followings:

XHR object is used by JavaScript to transfer XML and other text data between client and server. TheXMLHttpRequestobject allows a client-side script to perform an HTTP request. AJAX applications use theXMLHttpRequestobject so that the browser can communicate to the

server without requiring a post-back of the entire page.

Note:

Earlier versions of Internet Explorer uses MSXML ActiveX component to provide thisfunctionality

Internet Explorer 7 and other browsers (Mozilla Firefox, Opera etc.)XMLHttpRequestis notliable to do this

What technologies are being used in AJAX?

AJAX uses the following four technologies:

JavaScript XHR (XMLHttpRequest) Document Object Model (DOM) Extensible HTML (XHTML) and Cascading Style Sheets (CSS)

Does AJAX request works on different domains?

No. AJAX request works only within the same domain.

Is AJAX request synchronous or asynchronous?

AJAX requests are asynchronous by nature, which means that they should run in the background

independently of other events.

What is JSON?

JSON refers JavaScript Object Notation. It is a safe and reliable data interchange format inJavaScript, which is easy to understand not only for the users but also for the machines.

http://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1FYXN5JTIwJTIwRGVhbHMmaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT0xNzAwJnM9MTA0NiZ3PXBsdXNtaW51cy5odWJwYWdlcy5jb20mYj1iZDImcmQ9JnJpPQ==http://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1FYXN5JTIwJTIwRGVhbHMmaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT0xNzAwJnM9MTA0NiZ3PXBsdXNtaW51cy5odWJwYWdlcy5jb20mYj1iZDImcmQ9JnJpPQ==http://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1FYXN5JTIwJTIwRGVhbHMmaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT0xNzAwJnM9MTA0NiZ3PXBsdXNtaW51cy5odWJwYWdlcy5jb20mYj1iZDImcmQ9JnJpPQ==


17/73

What are the differences between AJAX and JavaScript?

AJAX JavaScript

Witing for

response

AJAX sends request to the server and does not

wait for the response. It performs other

operations on the page during that time

JavaScript makes a request to the

server and waits for response.

Necessity of ull

page refresh

AJAX does not require the page to refresh for

downloading the whole page

JavaScript manages and controls a

Web page after being downloaded

Server

overloadAJAX minimizes the overload on the server

JavaScript posts a request that updates

the script every time and so, it

increase server overload

Is AJAX code cross browser compatible?

Not totally. Most browsers offer a native XMLHttpRequest JavaScript object, while another one(Internet Explorer) require you to get it as an ActiveX object.

Is Ajax a technology platform or is it an architectural style?

Its both. Ajax is a set of technologies being used together in a particular way.

How to call server-side code from JavaScript?

To call the server-side code from JavaScript, we can use the techniques: page methods and Webservices

Where should we avoid to use AJAX?

We should not use AJAX for the following situations: If the browser does not support JavaScript, then we should not use AJAX. If we want to create a secureapplication ,we should avoid AJAX. If we want to show our webpages to major search engine like Google, Yahoo, Bing etc. then we

will not use AJAX.

Why should we avoid AJAX to build pages where our intention is to show thepage to search engine?

Web Crawler does not execute JavaScript code. AJAX is javaScript. So, we should not use that.

How to create AJAX object? What is it's syntax?

var myAJAZXOject = new AjaxObject("page_url");
http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


18/73

Example with some notes

In the following section, you will find some examples with full codes to use AJAX.

Example: a synchronous XHR request

In the following, you will get a simple but easy XHM example. This has the three files:

index.html: main HTMLfile which include the AJAX script MyScript.jsfile :all AJAX codes are there MyData.txtfile :normal data file

The output of thefile is that when index.html page will be requested, it will print the contentsof MyData.txt file into the browser. All the code and output of this example are the following:


Full code of index.html

?

1

2

3

4

5

6

7

8

9

10

Learning JavaScript AJAX [PlusMinus]

Full code of MyScript.js

?

1

2

for(vari = 0; i < 3; i++) {

varrequest = newXMLHttpRequest();
http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1FYXN5JTIwJTIwRGVhbHMmaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT0xNzAwJnM9MTA0NiZ3PXBsdXNtaW51cy5odWJwYWdlcy5jb20mYj1iZDImcmQ9JnJpPQ==http://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1FYXN5JTIwJTIwRGVhbHMmaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT0xNzAwJnM9MTA0NiZ3PXBsdXNtaW51cy5odWJwYWdlcy5jb20mYj1iZDImcmQ9JnJpPQ==http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://rvzr-a.akamaihd.net/sd/apps/adinfo-1.0-p/index.html?bj1FYXN5JTIwJTIwRGVhbHMmaD1ydnpyLWEuYWthbWFpaGQubmV0JmM9Z3JlZW4mbz13c2FyJmQ9JnQ9MTsyOzM7NDs1OzY7Nzs4Ozk7MTA7MTE7MTI7MTM7MTQmYT0xNzAwJnM9MTA0NiZ3PXBsdXNtaW51cy5odWJwYWdlcy5jb20mYj1iZDImcmQ9JnJpPQ==http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


19/73


20/73

Backward compatibility with AJAX

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

varrequest;

if(window.XMLHttpRequest) {

request = newXMLHttpRequest();

} else{

request = newActiveXObject("Microsoft.XMLHTTP");

}

request.open('GET', 'MyData.txt');

request.onreadystatechange = function() {

if((request.readyState === 4) && (request.status === 200)) {

console.log(request);

document.writeln(request.responseText);

}

}

request.send ();

Example: AJAX example for updating ID

Using AJAX, we canupdate the IDs. In the following we will define an ID into the index.html

file. Name of the id is like MyID and we will change the value of the ID with the value ofresponseText.

Updating ID (index.html file)

?

1
http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


21/73

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17


Updating ID (MyScript.js file)

?

1

2

3

4

5

6

7




varmodify = document.getElementById('myID');

modify.innerHTML = request.responseText;
http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


22/73


23/73


24/73

9

10

11

request.send ();

Example: AJAX example for GetElementsByTagName

We have a group of 3 ordered lists. Using AJAX, display the value of responseTextinto the 2ndordered group's 2nd list

index.html file

?

1

2

3
http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


25/73

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28



26/73

29

MyScript.js file

?

1

2

3

4

5

6

7

8

9

10

11




varmodify =

document.getElementsByTagName('ol')[1].getElementsByTagName('li');

modify[1].innerHTML = request.responseText;

}

request.send ();
http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


27/73

Example: Using AJAX for Reading JSON data

In this example, we have a JSON datafile which contains some state lists of US. We will listall the state name using AJAX and read JSON data to output the state names into the browser.

Note:JSON parse is notavailable to all browsers.

[Solution of this problem: Use jQuery]

?

1
http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


28/73

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

JavaScript AJAX Learning

MyScript.js file

?

1

2

3

4

5

6

7

8

varrequest;



} else{


}

request.open('GET', 'USA_States.json');


http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


29/73

9

10

11

12

13

14

15

16

17

18

19

20

varlistOfStates = JSON.parse(request.responseText);

console .log(listOfStates);

varoutput = '';

for(varkey inlistOfStates) {

output += ''+ listOfStates[key].name + '';

}

output += '';

document.getElementById('usStates').innerHTML = output;

}

}

request.send ();

USA_States.json file

?

1

2

3

4

5

6

7

8

[

{ "name": "MARYLAND", "abbreviation": "MD"},

{ "name": "NEW JERSEY", "abbreviation": "NJ"},

{ "name": "NEW YORK", "abbreviation": "NY"},

{ "name": "VIRGINIA", "abbreviation": "VA"},

{ "name": "WASHINGTON", "abbreviation": "WA"}

]
http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


30/73


31/73

We can also use the ID to define the mouse click functionality on that id to display the abovescenario. If we would like to do that, we need to do thefollowing change to our codes:

?

1

2

3

4

5

6

7

8

9

10

View the states

?

1

2

3

4

5

6

7

8

9

10

11

varmybutton = document.getElementById('buttonID');

mybutton.onclick = function() {

varrequest;



} else{


}

request.open('GET', 'USA_States.json');


http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


32/73

12

13

14

15

16

17

18

19

20

21

22

23

24

25

varlistOfStates = JSON.parse(request.responseText);

console.log(listOfStates);

varoutput = '';

for(varkey inlistOfStates) {

output += ''+ listOfStates[key].name + '';

}

output += '';

document.getElementById('usStates').innerHTML = output;

}

}

request.send ();

}

Example: jQuery AJAX reading data from a JSON file

We will use .getJSON to read the JSON file and display it in this example. We need the jQueryjavaScript file to complete this example. This file can bedownloaded form jQuery officialwebsite.
http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


33/73

index.html file

?

1

2

3

4

5

6

7

8

9

10

11

States

MyScript.js file

?
http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


34/73

1

2

3

4

5

6

7

8

9

10

11

12

$.getJSON('USA_States.json', function(data ){

console.log(data );

varoutput = '';

$.each(data ,function(key, value) {

output += ''+ value.name + '';

});

output += '';

alert(output);

$('#usStatesID').html(output);

// $('#usStatesID').append(output);

// $('#usStatesID').prepend(output);

});

USA_States.json file

?

1

2

3

4

5

6

7

8

[

{ "name": "MARYLAND", "abbreviation": "MD"},

{ "name": "NEW JERSEY", "abbreviation": "NJ"},

{ "name": "NEW YORK", "abbreviation": "NY"},

{ "name": "VIRGINIA", "abbreviation": "VA"},

{ "name": "WASHINGTON", "abbreviation": "WA"}

]
http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answershttp://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers


35/73

Pin It
http://pinterest.com/pin/create/bookmarklet/?media=http://s1.hubimg.com/u/8601190_f520.jpg&url=http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers&is_video=false&description=http://pinterest.com/pin/create/bookmarklet/?media=http://s1.hubimg.com/u/8601190_f520.jpg&url=http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers&is_video=false&description=http://pinterest.com/pin/create/bookmarklet/?media=http://s1.hubimg.com/u/8601190_f520.jpg&url=http://plusminus.hubpages.com/hub/Ajax-Interview-Questions-with-Answers&is_video=false&description=


36/73

jax interview questions and answers

Ajax interview questions for experience

What is AJAX and what problem does it solve?

Answer - Ajax is a set of client side technologies that allows asynchronouscommunication between...............Read answer

What are the benefits of AJAX over Java applet?

The following are the benefits of AJAX over Java applet: AJAXapplications areloaded in seconds, where as Applets takes longer time. The reason is, Appletapplications are tend to load large libraries..................

Read answer

What is the disadvantage of AJAX?

The disadvantages of AJAX are: Search engines would not be able to index anAJAXapplication ..............Read answer

How is encoding handled in AJAX?

AJAX encoding can be done in two ways: encodeActionURL() method is used forfull page refresh.............Read answer

Why is AJAX a comfortable fit with JAVA?

AJAX is a comfortable fit because, using Java Enterprise Edition the followingtasks can be performed:.............Read answer

What is synchronous request in AJAX?

Synchronous AJAX is a process that makes a java script to halt or stop theprocessing anapplication until a result is sent by a server. The browser is frozen,while the request...............Read answer

When should I use a Java applet instead of AJAX?

Latest

placement

tests

ASP.NET

C#.NET

C++ Sql

Serve

r

Linux Java Oracl

e

Networking

Mysql

PHP Data

Struc

ture

More100

tests.

...

Latest links

Howto

write

a

goodCV

15com

mon

job

interv

iew
http://www.careerride.com/ajax-interview-questions-for-experience.aspxhttp://www.careerride.com/ajax-interview-questions-for-experience.aspxhttp://www.careerride.com/Ajax-Defined.aspxhttp://www.careerride.com/Ajax-Defined.aspxhttp://www.careerride.com/Ajax-Defined.aspxhttp://www.careerride.com/Ajax-Defined.aspxhttp://www.careerride.com/AJAX-benefits-over-java.aspxhttp://www.careerride.com/AJAX-benefits-over-java.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-benefits-over-java.aspxhttp://www.careerride.com/AJAX-benefits-over-java.aspxhttp://www.careerride.com/AJAX-disadvantages.aspxhttp://www.careerride.com/AJAX-disadvantages.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-disadvantages.aspxhttp://www.careerride.com/AJAX-disadvantages.aspxhttp://www.careerride.com/AJAX-how-is-encoding-handled.aspxhttp://www.careerride.com/AJAX-how-is-encoding-handled.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-how-is-encoding-handled.aspxhttp://www.careerride.com/AJAX-how-is-encoding-handled.aspxhttp://www.careerride.com/AJAX-why-is-it-a-comfortable-fit-with-JAVA.aspxhttp://www.careerride.com/AJAX-why-is-it-a-comfortable-fit-with-JAVA.aspxhttp://www.careerride.com/AJAX-why-is-it-a-comfortable-fit-with-JAVA.aspxhttp://www.careerride.com/AJAX-why-is-it-a-comfortable-fit-with-JAVA.aspxhttp://www.careerride.com/AJAX-what-is-synchronous-request.aspxhttp://www.careerride.com/AJAX-what-is-synchronous-request.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-what-is-synchronous-request.aspxhttp://www.careerride.com/AJAX-what-is-synchronous-request.aspxhttp://www.careerride.com/AJAX-vs-Java-applet.aspxhttp://www.careerride.com/AJAX-vs-Java-applet.aspxhttp://www.careerride.com/asp-net-multiple-choice-questions.aspxhttp://www.careerride.com/asp-net-multiple-choice-questions.aspxhttp://www.careerride.com/asp-net-multiple-choice-questions.aspxhttp://www.careerride.com/asp-net-multiple-choice-questions.aspxhttp://www.careerride.com/asp-net-multiple-choice-questions.aspxhttp://www.careerride.com/csharp-multiple-choice-questions.aspxhttp://www.careerride.com/csharp-multiple-choice-questions.aspxhttp://www.careerride.com/csharp-multiple-choice-questions.aspxhttp://www.careerride.com/csharp-multiple-choice-questions.aspxhttp://www.careerride.com/csharp-multiple-choice-questions.aspxhttp://www.careerride.com/c++-multiple-choice-questions.aspxhttp://www.careerride.com/c++-multiple-choice-questions.aspxhttp://www.careerride.com/sql-server-multiple-choice-questions.aspxhttp://www.careerride.com/sql-server-multiple-choice-questions.aspxhttp://www.careerride.com/sql-server-multiple-choice-questions.aspxhttp://www.careerride.com/sql-server-multiple-choice-questions.aspxhttp://www.careerride.com/sql-server-multiple-choice-questions.aspxhttp://www.careerride.com/sql-server-multiple-choice-questions.aspxhttp://www.careerride.com/linux-multiple-choice-questions.aspxhttp://www.careerride.com/linux-multiple-choice-questions.aspxhttp://www.careerride.com/java-multiple-choice-questions.aspxhttp://www.careerride.com/java-multiple-choice-questions.aspxhttp://www.careerride.com/oracle-multiple-choice-questions.aspxhttp://www.careerride.com/oracle-multiple-choice-questions.aspxhttp://www.careerride.com/oracle-multiple-choice-questions.aspxhttp://www.careerride.com/oracle-multiple-choice-questions.aspxhttp://www.careerride.com/oracle-multiple-choice-questions.aspxhttp://www.careerride.com/networking-multiple-choice-questions.aspxhttp://www.careerride.com/networking-multiple-choice-questions.aspxhttp://www.careerride.com/networking-multiple-choice-questions.aspxhttp://www.careerride.com/networking-multiple-choice-questions.aspxhttp://www.careerride.com/networking-multiple-choice-questions.aspxhttp://www.careerride.com/networking-multiple-choice-questions.aspxhttp://www.careerride.com/mysql-multiple-choice-questions.aspxhttp://www.careerride.com/mysql-multiple-choice-questions.aspxhttp://www.careerride.com/mysql-multiple-choice-questions.aspxhttp://www.careerride.com/mysql-multiple-choice-questions.aspxhttp://www.careerride.com/mysql-multiple-choice-questions.aspxhttp://www.careerride.com/php-multiple-choice-questions.aspxhttp://www.careerride.com/php-multiple-choice-questions.aspxhttp://www.careerride.com/data-structure-multiple-choice-questions.aspxhttp://www.careerride.com/data-structure-multiple-choice-questions.aspxhttp://www.careerride.com/data-structure-multiple-choice-questions.aspxhttp://www.careerride.com/data-structure-multiple-choice-questions.aspxhttp://www.careerride.com/data-structure-multiple-choice-questions.aspxhttp://www.careerride.com/data-structure-multiple-choice-questions.aspxhttp://www.careerride.com/Online-practice-test.aspxhttp://www.careerride.com/Online-practice-test.aspxhttp://www.careerride.com/Online-practice-test.aspxhttp://www.careerride.com/Online-practice-test.aspxhttp://www.careerride.com/Online-practice-test.aspxhttp://www.careerride.com/Online-practice-test.aspxhttp://www.careerride.com/Online-practice-test.aspxhttp://www.careerride.com/how-to-write-CV.aspxhttp://www.careerride.com/how-to-write-CV.aspxhttp://www.careerride.com/how-to-write-CV.aspxhttp://www.careerride.com/how-to-write-CV.aspxhttp://www.careerride.com/how-to-write-CV.aspxhttp://www.careerride.com/how-to-write-CV.aspxhttp://www.careerride.com/how-to-write-CV.aspxhttp://www.careerride.com/how-to-write-CV.aspxhttp://www.careerride.com/how-to-write-CV.aspxhttp://www.careerride.com/job-interview-questions.aspxhttp://www.careerride.com/job-interview-questions.aspxhttp://www.careerride.com/job-interview-questions.aspxhttp://www.careerride.com/job-interview-questions.aspxhttp://www.careerride.com/job-interview-questions.aspxhttp://www.careerride.com/job-interview-questions.aspxhttp://www.careerride.com/job-interview-questions.aspxhttp://www.careerride.com/job-interview-questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questions.aspxhttp://www.careerride.com/AJAX-Interview-Questio

jquery ajax functions part 2

Documents