Ajax. INFO/CS 2300: Intermediate Web Design and Programming

Transcription

1 Ajax INFO/CS 2300: Intermediate Web Design and Programming

2 Crash course Crash course on CSS Basic through mobile CSS Wednesday Feb. 19 (the day after break) 4:30 6:15 Carpenter Accel Red

3 Project 2 extension Make sure you test your work on the server. We re not releasing grades and feedback until about Feb 26. See Piazza for more details

4 Follow up In Monday s lecture there was a question about including parentheses when using a named function as a parameter () are not used here $myimgnode.mouseover(myfunction); A huge benefit of jquery is that different browsers implement some parts of JavaScript differently and jquery standardizes.

5 Questions In the HTML tree, the <p> node is the of the <div> node. A. parent B. sibling C. child D. ancestor p Hello! div img

6 How would we use jquery to add an onclick event handler to the image with id myimage that calls myfunction? A. $( myimage ).onclick(myfunction) B. <img id= myimage onclick= myfunction(); /> C. $( #myimage ).click(myfunction); D. $( #myimage ).click(myfunction());

7 Which code below uses an anonymous function? A. $( a ).click( function () { return false;} ); B. function anonymous() { return false;} C. anonymous function name(arg) { return false; }

8 Ajax: what is it?

9 Ajax isn t its own technology it s just shorthand for a cluster of technologies Asynchronous JavaScript and XML that help web applications work more like desktop applications

10 What does it do?

11 Typical web application Client Server Synchronous

12 Web application using Ajax Client Asynchronous Server

13 Request sent to server while user is still interacting with website. Using JavaScript and the DOM, we can update the page with results from the server.

14 The usual suspects Some of the web applications that gave lots of visibility to the idea of Ajax: Microsoft Outlook Webmail Google Suggest Google Maps

15 How does it work?

16 What kinds of things will we need to get something like this to work? Browser Server communication that isn t a whole page Format for the data exchange A trigger to initiate the exchange Browser processes server response without a page refresh

17 Steps for using Ajax 1. Tell JavaScript/jQuery we want to make an Ajax call. 2. State what program on the server we want to run (usually a PHP program). 3. Tell what data should be sent to the server. 4. Give a JavaScript function that should be called when the browser receives the response from the server.

18 Ajax with JavaScript Browsers implement the JavaScript call differently Examples: request = new XMLHttpRequest(); request = new ActiveXObject("Msxml2.XMLHTTP"); request = new ActiveXObject("Microsoft.XMLHTTP"); Without jquery, the Javascript had to be coded to accommodate different browsers

19 Ajax with jquery To make an Ajax call, we use request is now an object that can be used later request = $.ajax( { url : URL, type: get, data: data, datatype: json } ); if we want the return to be processed as json instead of text $ is jquery. $.ajax is a method of jquery or post where URL is the program on the server we want to run and data is the data we want to send it.

20 Sending data Data to send should be in the form var mydata = { var1 : val1, var2 : val2 }; then on the server, the variables will appear in $_GET as $_GET[ var1 ], $_GET[ var2 ]. or $_POST

21 Specifying a callback function Once we ve executed the Ajax, we can tell jquery what to do when the server is done by giving a callback function. E.g. request.done( myfunction ) jquery will call myfunction when the browser receives the server s response, and the data from the server s response will be in first argument of myfunction. function myfunction(result) {. } remember our request variable?

22 An example: directory lookup

23 directory.php/?netid=sm68 How it works Browser page Part of page to be loaded by ajax on keyup get netid from form Ajax call Callback function receives printed json and puts values in the proper nodes Server Use netid to find directory entry and print the result as json

24 The pieces 1. On keyup event, get input from field and use an Ajax call to send the field input to directory.php. 2. PHP program directory.php looks up netid in an internal array. Combine the looked up value into a json string, and return. 3. The callback function takes the returned information and puts all the data in the appropriate table entries.

25 The HTML file <form action="submits_by_jquery_instead.txt" method="get"> Net Id:<input type="text" id="netid" /> </form> <br /> <div style="color: red;"> <span id="error"> </span> </div> <br /> <div id="results"> <table class="datatable"> <tr> <td>first name:</td> <td id="first_name"> </td> </tr> <tr> <td>last name:</td> <td id="last_name"> </td> </tr> <tr> <td> </td> <td id=" "> </td> </tr> </table> </div> In a real application we would set action to a real value in case javascript is not working

26 Adding the event handler How do we set the onkeyup event handler on the netid input to the function findnetidinfo? $(document).ready( function () { Triggers once the html is loaded } );

27 $(document).ready( function () { } ); $("#netid").keyup(findnetidinfo);

28 findnetidinfo Now write function to use $.ajax to call directory.php with netid entered so far, set callback function to be displaynetidinfo. function findnetidinfo() { }

29 function findnetidinfo() { var netidfromform = $("#netid").val(); var getdata = { netid: netidfromform }; request = $.ajax( { url: directory.php", type: "get", data: getdata, datatype: json" } ); } request.done(displaynetidinfo);

30 directory.php Returns a string that looks like this: {"first_name":"steve", "last_name":"mohlke", " ":"smohlke@cornell.edu" } Index values correspond to the node id in the html This is the native JavaScript format and it can be looped through like an array

31 displaynetidinfo Finally, we need to handle the response from the server.

32 function displaynetidinfo(response) { }

33 function displaynetidinfo( response ) { var fields = Array( "error", "first_name", "last_name", " ); // Clear all the fields with a non-breaking space for ( i in fields ) { $( "# + fields[ i ] ).text( String.fromCharCode( 160 ) ); } } // Each json entry will be of the form "nodeid" : "value". // Use this fact to write the values in the json // into the node with the id specified in the json index. for ( i in response ) { $( "#" + i ).text( response[ i ] ); }

34 A word about JSON JSON stands for JavaScript Object Notation. We needed to tell the Ajax call that s what was coming back. request = $.ajax( { url: directory.php", type: "get", data: getdata, datatype: json } );

35 Instead of $.ajax there is shorthand request = $.getjson( URL, data, callback); E.g. request = $.getjson( directory.php, getdata, displaynetidinfo);

36 More Ajax possibilities

37 Review Ajax allows us to interact with the server, run code there and send answers back without forcing the user to wait for a response. This will become much more interesting once the server can start looking up information in a database