Web Programming Language CHAP TER 11 Asynchronous Java
Web Programming Language CHAP TER 11
Asynchronous Java. Script and Jquery UI • Introducing AJAX • JQuery and AJAX • JQuery UI
AJAX • Asynchronous Java. Script and XML • used for making asynchronous web applications, which means that different parts of the page can be loaded at different times
Looking back in History • Early websites loaded a new HTML file when a page was requested • But why not just update part of the page • Heard of Frames? • Frames were used to break a page down into sections, and each frame could load a different HTML file. • But, search engines found it difficult to index pages. • Different devices responded differently to frames. • The Back button didn’t always work as expected. • There is a better way!
AJAX • Allows the browser to communicate with the server, by letting Java. Script use the XMLHttp. Request object to request data from the server. • When an event occurs, Java. Script can create an instance of the XMLHttp. Request object, send it to the server, which sends a response in XML, or more commonly now JSON.
Basic AJAX Call
XMLHttp. Request Object • Comes with the browser (mostly) • IE 7+
Classic AJAX • <html> <body> <p id="demo" onclick="Update. Content()">Original Page Content. </p> <script> function Update. Content() { var xhttp = new XMLHttp. Request(); xhttp. onreadystatechange = function() { if (this. ready. State == 4 && this. status == 200) { document. get. Element. By. Id("demo"). inner. HTML = this. response. Text; } }; xhttp. open("GET", "newdata. txt", true); xhttp. send(); } </script> </body> </html>
Ready. State? 0 Request not initialized 1 Server connection established 2 Request received 3 Processing request 4 Request finished and response is ready
JQuery and AJAX • JQuery offers a few methods that makes AJAX simple! • The load() method • $(“#div 1”). load(“data. txt”); • This would load the contents of a text file into div 1. • $(“#div 1”). load(“data. htm #news”); • This would load a section of an html file into div 1. • Any file could be loaded, including a PHP file.
$. get() method • The get() method uses a callback function to be executed after data is returned from the server using the GET method. • $(“#p 1”). click(function(){ $. get(“data. txt”, function(data, status){ console. log(data + “: status : “ + status ); });
$. post() method • The post() method posts data to the server using the post method • $(“#p 1”). click(function(){ $. post(“add_student. php”, { name: “Ken”, id: “ 1234” }, function(data, status){ console. log(data + “: status : “ + status ); }); • The data here could then be added to a database using a script in add_student. php
$. ajax() method • If $. post() and $. get() aren’t enough, Jquery also has a $. ajax() method. • $(“#p 1”). click(function(){ $. ajax({ url: “add_student. php”, data: { name: “Ken”, id: “ 1234” }, method: POST }). done(function(html){ console. log(html); });
JQuery UI • A set of tools to help improve the user interface. • Download and include • <link rel=”stylesheet” href=”jquery-ui. min. css”> <script src=”external/jquery. js”></script> <script src=”jquery-ui. min. js”></script>
JQuery UI Date Picker • HTML 5 includes a date input type: • <input type="date"> Chrome Edge
Consistency in Date Picking! • <script> $( function() { $("#date"). datepicker(); }); </script> Date: <input type="text" id="date">
JQuery UI Dialog Boxes • <html> <head> <script src="https: //ajax. googleapis. com/ajax/libs/jquery/3. 3. 1/jquery. min. js"></script> <link rel="stylesheet" href="ui/jquery-ui. min. css"> <script src="https: //code. jquery. com/jquery-1. 12. 4. js"></script> <script src="https: //code. jquery. com/ui/1. 12. 1/jquery-ui. js"></script> <script> $(document). ready(function() { $("#appointment"). click(function() { $("#dialog"). dialog(); }); </script> </head> <body> <div id="appointment">Click here for details</div> <div id="dialog" style="display: none"> <p>Web Programming Final Exam at 12: 00 pm</p> </div> </body> </html>
JQuery UI Draggables & Droppables • <html> <head> <link rel="stylesheet" type="text/css" href="jquery-ui. css"> <script src="jquery. min. js"></script> <script type="text/javascript" src="jquery-ui. min. js"></script> <style type="text/css"> #draggable { width: 50 px; height: 50 px; background: black; } #droppable { position: absolute; left: 100 px; top: 100 px; width: 55 px; height: 55 px; background: gray; } </style> <script> $(document). ready(function() { $("#draggable"). draggable(); $("#droppable"). droppable({ drop: function() { alert('dropped'); } }); </script> </head> <body> <div id="droppable"></div> <div id="draggable"></div> </body> </html>
Key Points • Asynchronous Java. Script allows the browser to get updates from the server and change parts of the page independently. • An XMLHttp. Request object is used by the browser to send a request to the server. • JQuery makes AJAX simpler using its load(), get() and post() methods. • If those methods aren’t enough, the versatile ajax() method can be used. • The JQuery UI extension can be used to improve the user interface, it includes several features including a date picker, dialog boxes, draggables and droppables.
- Slides: 19
