jQuery : Talk to server with Ajax

Wildan Maulana | wildan [at] tobethink.com #8 jQuery: Talk to the server with Ajax Doc. v. 0.1 - 10/03/09

This Presentation Cover ,[object Object]

Loading pre-formatted HTML from the server

Making general GET and POST requests

Making requests with fine-grained control

Setting default ajax properties

A brief overview of Ajax ,[object Object]

Brusing up an Ajax ,[object Object]

Creating an XHR instance if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } else { throw new Error("Ajax is not supported by this browser"); }

XHR Methods and Properties Methods Description abort() Causes the currently executing request to be cancelled getAllResponseHeaders() Returns a single string containing the names and values of all response headers open(method, url, async, username, password) Return the value of the named response header send(content) Initiates the requests with the specified (optional) body content setRequestHeader(name, value) Sets a request header using the specified name and value

XHR Methods and Properties Methods Description onreadystatechange Assigns the event handler used when the state of the requests change readyState ,[object Object]

4 - Complete responseText The body content returned in the response responseXML If the body content is XML, the XML DOM created from the body content status Responses status code returned from the server. For example : 200 for success or 404 for not found statusText The status text message returned by the response

Initiating the Request ,[object Object],[object Object]

Provide the URL of the server-side resource to be contacted

Let the XHR instance know how it can inform us of its progress

Provide any body content for the POST request xhr.open('GET','/some/resource/url'); -> step 1 and 2 xhr.send(null); -> step 4 if get xhr.send('a=1&b=2&c=3'); -> step 4 if post

Keeping track of progress ,[object Object],xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300) { //success } else { //error } } } Ignores all but cempleted state Branches on responses status Executes on success Executes on failure

Getting the response ,[object Object]

Pain Points that page authors using Ajax need to deal with ,[object Object]

Ready handlers need to sift through a lot of uninteresting state changes.

Ready handlers don’t automatically get a reference to invoking XHR

The response body needs to be dealt with in numerous ways depending

Loading Content into elements ,[object Object],var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } else { throw new Error("Ajax is not supported by this browser"); } xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300) { document.getElementById('someContainer') .innerHTML = xhr.responseText; } } } xhr.open('GET','/serverResource'); xhr.send();

Loading Content with jQuery ,[object Object],load(url, parameters, callback) Initiates an Ajax request to the specified URL with optional parameters. A callback function can be specified that’s invoked when the request completes. The response text replaces the content of all matched elements. Parameters url (String) The URL of the server-side resource to which the request is sent. parameters (Object) An object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used. callback (Function) A callback function invoked after the response data has been loaded into the elements of the matched set. The parameters passed to this function are the response text, the status code, and the XHR instance. Returns The wrapped set

Filtering Response ,[object Object]

For example, to filter response elements so that only <div> instances are injected, we write : ,[object Object]

If the Request come from form control serialize() Creates a properly formatted and encoded query string from all successful form elements in the wrapped set. Parameters none Returns The formatted query string The serialize() method gather data in a query string, if we want get data in a JavaScript array, jQuery provides serializeArray() method described next ...

Get the form data in a JavaScript array serializeArray() Collects the values of all successful form controls into an array of objects containing the names and values of the controls Parameters none Returns The formatted query string

Loading dynamic inventory data

The HTML Markup <body id="bootCloset1"> <img id="banner" src="boot.closet.branding.png"/> <form action="" id="orderForm"> <div id="detailFormContainer"> <h1>Choose your boots</h1> <div> <label>Please choose a style:</label><br/> <select id="styleDropdown"> <option value="">Please choose a boot style</option> <option value="7177382">Caterpillar Tradesman Work Boot</option> <option value="7269643">Caterpillar Logger Boot</option> <option value="7141832">Chippewa 17" Engineer Boot</option> <option value="7141833">Chippewa 17" Snakeproof Boot</option> <option value="7173656">Chippewa 11" Engineer Boot</option> <option value="7141922">Chippewa Harness Boot</option> <option value="7141730">Danner Foreman Pro Work Boot</option> <option value="7257914">Danner Grouse GTX Boot</option> </select> </div> <div id="detailsDisplay"></div> </div> </form> </body> s Empty <div>

JQuery in Action $(function(){ $('#styleDropdown') .change(function(){ var styleValue = $(this).val(); $('#detailsDisplay').load( 'getDetails.jsp', { style: styleValue } ); }) .change(); }); Wraps style dropdown and binds change handler Loads data for selected style Trigers change handler

The server-side resource returns a pre-formatted fragment of HTML to display the boot information.

Making GET and POST requests ,[object Object]

POST requests—Can be non-idempotent; the data they send to the server can be used to change the model state of the application; for example, adding records to a database or removing information from the server.

Getting data with jQuery $.get(url,parameters,callback) ,[object Object],Parameters url (String) The URL of the server-side resource to contact via the GET method. parameters (Object|String) An object whose properties serve as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string. callback (Function) A function invoked when the request completes. The response callback body is passed as the first parameter to this callback, and the status as the second. Returns The XHR instance

$.get() example <html> <head> <title>$.get() Example</title> <link rel="stylesheet" type="text/css" href="../common.css"> <script type="text/javascript" src="../scripts/jquery-1.2.1.js"></script> <script type="text/javascript"> $(function(){ $('#testButton').click(function(){ $.get( 'reflectData.jsp', {a:1, b:2, c:3}, function(data) { alert(data); } ); }); }); </script> </head> <body> <button type="button" id="testButton"> Click me!</button> </body> </html> Gets data from server

Getting JSON data : $.getJSON $.get(url,parameters,callback) ,[object Object],Parameters url (String) The URL of the server-side resource to contact via the GET method. parameters (Object|String) An object whose properties serve as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string. callback (Function) A function invoked when the request completes. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this callback, and the status as the second. Returns The XHR instance

Loading cascading dropdowns The initial state of the order form with the dependent dropdowns in an empty and disabled state

<body id=" bootCloset2 "> <img id="banner" src="boot.closet.branding.png"/> <form action="" id="orderForm"> <div id="detailFormContainer"> <h1>Choose your boots</h1> <div id="cascadingDropdowns"> <div> <label>Please choose a style:</label><br/> <select id="styleDropdown"> <option value="">Please choose a boot style</option> <option value="7177382"> Caterpillar Tradesman Work Boot</option> <option value="7269643">Caterpillar Logger Boot</option> <option value="7141832">Chippewa 17" Engineer Boot</option> <option value="7141833">Chippewa 17" Snakeproof Boot</option> <option value="7173656">Chippewa 11" Engineer Boot</option> <option value="7141922">Chippewa Harness Boot</option> <option value="7141730">Danner Foreman Pro Work Boot</option> <option value="7257914">Danner Grouse GTX Boot</option> </select> </div> <div> <label>Color:</label><br/> <select id="colorDropdown" disabled="disabled"></select> </div> <div> <label>Size:</label><br/> <select id="sizeDropdown" disabled="disabled"></select> </div> </div> <div id="detailsDisplay"></div> </div> </form> </body>

The New Ready Handler $(function(){ $('#styleDropdown') .change(function(){ var styleValue = $(this).val(); $('#detailsDisplay').load( 'getDetails.jsp', { style: styleValue } ); adjustColorDropdown(); }) .change(); $('#colorDropdown') .change(adjustSizeDropdown); }); Triggers state adjusments of color dropdown

adjustColorDropdown() [ {value:'',caption:'choose color'}, {value:'bk',caption:'Black Oil-tanned'}, {value:'br',caption:'Black Polishable'} ] function adjustColorDropdown() { var styleValue = $('#styleDropdown').val(); var dropdownSet = $('#colorDropdown'); if (styleValue.length == 0) { dropdownSet.attr("disabled",true); $(dropdownSet).emptySelect(); adjustSizeDropdown(); } else { dropdownSet.attr("disabled",false); $.getJSON( 'getColors.jsp', {style:styleValue}, function(data){ $(dropdownSet).loadSelect(data); adjustSizeDropdown(); } ); } } Enables or disables the color dropdown Empties disabled dropdown and clears dependent drop down Gets color values based on style Triggers adjusments of dependent dropdown We will create this function later .. @_@ A typical JSON construct returned from getColors.jsp

adjustSizeDropdown() function adjustSizeDropdown() { var styleValue = $('#styleDropdown').val(); var colorValue = $('#colorDropdown').val(); var dropdownSet = $('#sizeDropdown'); if ((styleValue.length == 0)||(colorValue.length == 0) ) { dropdownSet.attr("disabled",true); $(dropdownSet).emptySelect(); }else { dropdownSet.attr("disabled",false); $.getJSON( 'getSizes.jsp', {style:styleValue,color:colorValue}, function(data){$(dropdownSet).loadSelect(data)} ); } }

Writing the custom commands emptySelect() : $.fn.emptySelect = function() { return this.each(function(){ if (this.tagName=='SELECT') this.options.length = 0; }); } loadSelect() : $.fn.loadSelect = function(optionsDataArray) { return this.emptySelect().each(function(){ if (this.tagName=='SELECT') { var selectElement = this; $.each(optionsDataArray,function(index,optionData){ var option = new Option(optionData.caption, optionData.value); if ($.browser.msie) { selectElement.add(option); } else { selectElement.add(option,null); } }); } }); }

The Implementation of our custom select command (function($) { $.fn.emptySelect = function() { return this.each(function(){ if (this.tagName=='SELECT') this.options.length = 0; }); } $.fn.loadSelect = function(optionsDataArray) { return this.emptySelect().each(function(){ if (this.tagName=='SELECT') { var selectElement = this; $.each(optionsDataArray,function(index,optionData){ var option = new Option(optionData.caption, optionData.value); if ($.browser.msie) { selectElement.add(option); } else { selectElement.add(option,null); } }); } }); } })(jQuery);

GET is not enough ! Between $.get() and $.getJSON() , jQuery gives us some powerful tools when it comes to making GET requests, but man does not live by GETs alone!

Making POST request : $.post $.post(url,parameters,callback) ,[object Object],Parameters url (String) The URL of the server-side resource to contact via the POST method. parameters (Object|String) An object whose properties serve as the name/value pairs parameters used to construct the body of the request, or a preformatted and encoded query string. callback ,[object Object],Returns The XHR instance

Taking full control of an Ajax request ,[object Object]

jQuery : Talk to server with Ajax

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to jQuery : Talk to server with Ajax

Similar to jQuery : Talk to server with Ajax (20)

More from Wildan Maulana

More from Wildan Maulana (20)

Recently uploaded

Recently uploaded (20)

jQuery : Talk to server with Ajax