1. Web Programming JAvaScript Ajax Programming Web Programming 05 - 1/38

2. Web Programming 05 - 2/38 jQuery Event Methods jQuery Syntax For Event Methods $("p").click(); Or $("p").click(function(){ // action goes here!! });

3. Web Programming 05 - 3/38 jQuery Event Methods $("p").click(function(){ $(this).hide(); }); $("p").dblclick(function(){ $(this).hide(); }); $("#p1").mouseup(function(){ alert("Mouse up over p1!"); });

4. Web Programming 05 - 4/38 JQuery Selector The #id Selector $("#test") The.class Selector $(".test") The element Selector $("p")

5. Web Programming 05 - 5/38 JQuery The element Selector The #id Selector $("#test") Example $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });

6. Web Programming 05 - 6/38 JQuery The element Selector The.class Selector $(".test") Example $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });

7. Web Programming 05 - 7/38 JQuery The element Selector The element Selector $("p") Example $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });

8. Web Programming 05 - 8/38 Example $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); This is a heading This is a paragraph. This is another paragraph. Click me

9. Web Programming 05 - 9/38 Ajax ? AJAX = Asynchronous JavaScript and XML. AJAX is not a new programming language, but a new way to use existing standards. AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.

10. Web Programming 05 - 10/38 Ajax Process

11. 05 - 11/38 Ajax Process

12. Web Programming 05 - 12/38 Ajax Process by Java Script createXMLHttpRequest() Event open send Onready statechange //do somthing

13. Web Programming 05 - 13/38 createXMLHttpRequest() function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); }

14. Web Programming 05 - 14/38 Function Ajax function submitRunAjax(){ var url = “test.jsp"; createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChangeAjax; xmlHttp.open("POST", url, true); xmlHttp.send(null); }

15. Web Programming 05 - 15/38 Function Ajax function handleStateChangeAjax() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { //do somthing }else { alert("Error Xml in System"); return false; }

16. Web Programming 05 - 16/38 Function Ajax - > Do Somthing window.location.reload(); window.location = 'index.jsp';

17. Web Programming 05 - 17/38 Ajax with Jquery $("button").click(function(){ $.ajax({url: "test.jsp", success: function(result){ $("#div1").html(result); }}); });