Web Programming JAvaScript Ajax Programming Web Programming /38

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

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

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

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

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

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

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

Web Programming /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.

Web Programming /38 Ajax Process

/38 Ajax Process

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

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

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

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

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

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