web programming javascript ajax programming web programming 05 - 1/38
DESCRIPTION
Web Programming /38 jQuery Event Methods $("p").click(function(){ $(this).hide(); }); $("p").dblclick(function(){ $(this).hide(); }); $("#p1").mouseup(function(){ alert("Mouse up over p1!"); });TRANSCRIPT
Web Programming JAvaScript Ajax Programming
Web Programming
05 - 1/38
Web Programming
05 - 2/38
jQuery Event Methods
jQuery Syntax For Event Methods$("p").click();Or$("p").click(function(){ // action goes here!!});
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!");});
Web Programming
05 - 4/38
JQuery SelectorThe #id Selector
$("#test")
The .class Selector
$(".test")
The element Selector
$("p")
Web Programming
05 - 5/38
JQuery The element SelectorThe #id Selector
$("#test")
Example
$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); });});
Web Programming
05 - 6/38
JQuery The element SelectorThe .class Selector
$(".test")
Example
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); });});
Web Programming
05 - 7/38
JQuery The element SelectorThe element Selector
$("p")
Example
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });});
Web Programming
05 - 8/38
Example<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p id="test">This is another paragraph.</p><button>Click me</button></body></html>
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.
Web Programming
05 - 10/38
Ajax Process
05 - 11/38
Ajax Process
Web Programming
05 - 12/38
Ajax Process by Java ScriptcreateXMLHttpRequest()
Event
opensend
Onreadystatechange
//do somthing
Web Programming
05 - 13/38
createXMLHttpRequest()
function createXMLHttpRequest() {if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();}
}
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);
}
Web Programming
05 - 15/38
Function Ajaxfunction handleStateChangeAjax() {
if(xmlHttp.readyState == 4) {if(xmlHttp.status == 200) {
//do somthing}else {
alert("Error Xml in System");return false;
}}
}
Web Programming
05 - 16/38
Function Ajax - > Do Somthing
window.location.reload();
window.location = 'index.jsp';
Web Programming
05 - 17/38
Ajax with Jquery
$("button").click(function(){ $.ajax({url: "test.jsp", success: function(result){ $("#div1").html(result); }});});