esempio completo
Transcript
esempio completo
<?xml version = "1.0" encoding = "utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 15.5: SwitchContent.html --> <!-- Asynchronously display content without reloading the page. --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .box { border: 1px solid black; padding: 10px } </style> <title>Switch Content Asynchronously</title> <script type = "text/javascript" language = "JavaScript"> <!-var asyncRequest; // variable to hold XMLHttpRequest object // set up and send the asynchronous request. function getContent( url ) { // attempt to create the XMLHttpRequest and make the request try { asyncRequest = new XMLHttpRequest(); // create request object // register event handler asyncRequest.onreadystatechange = stateChange; // // // // // // the stateChange function is the callback function, called when the client receives the response data this line registers the stageChange as the event handler the progress in the processing of the request is monitored by the readyState property which has a value from 0 to 4 whenever the request makes progress the XMLHttpRequest calls the onreadystatechange event handler this state is monitored by the 'readyState' property of the XMLHttpRequest object (see below) asyncRequest.open( 'GET', url, true ); // prepare the request -> prepare the asynchronous GET request, //in the example url is the address of an HTML document containing the description of a particular book // true means that the request is asynchronous asyncRequest.send( null ); // send the request to the server } // end try catch ( exception ) { alert( 'Request failed.' ); } // end catch } // end function getContent // displays the response data on the page function stateChange() { if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 ) { document.getElementById( 'contentArea' ).innerHTML = asyncRequest.responseText; // places text in contentArea } // end if } // end function stateChange // clear the content of the box function clearContent() { document.getElementById( 'contentArea' ).innerHTML = ''; } // end function clearContent // --> </script> </head> <body> <h1>Mouse over a book for more information.</h1> <img src = "http://test.deitel.com/examples/iw3htp4/ajax/thumbs/cpphtp6.jpg" onmouseover = 'getContent( "cpphtp6.html" )' onmouseout = 'clearContent()'/> <img src = "http://test.deitel.com/examples/iw3htp4/ajax/thumbs/iw3htp4.jpg" onmouseover = 'getContent( "iw3htp4.html" )' onmouseout = 'clearContent()'/> <img src = "http://test.deitel.com/examples/iw3htp4/ajax/thumbs/jhtp7.jpg" onmouseover = 'getContent( "jhtp7.html" )' onmouseout = 'clearContent()'/> <img src = "http://test.deitel.com/examples/iw3htp4/ajax/thumbs/vbhtp3.jpg" onmouseover = 'getContent( "vbhtp3.html" )' onmouseout = 'clearContent()'/> <img src = "http://test.deitel.com/examples/iw3htp4/ajax/thumbs/vcsharphtp2.jpg" onmouseover = 'getContent( "vcsharphtp2.html" )' onmouseout = 'clearContent()'/> <img src = "http://test.deitel.com/examples/iw3htp4/ajax/thumbs/chtp5.jpg" onmouseover = 'getContent( "chtp5.html" )' onmouseout = 'clearContent()'/> <div class = "box" id = "contentArea"> </div> </body> </html> <!-************************************************************************** * (C) Copyright 1992-2008 by Deitel & Associates, Inc. and * * Pearson Education, Inc. All Rights Reserved. * * * * DISCLAIMER: The authors and publisher of this book have used their * * best efforts in preparing the book. These efforts include the * * development, research, and testing of the theories and programs * * to determine their effectiveness. The authors and publisher make * * no warranty of any kind, expressed or implied, with regard to these * * programs or to the documentation contained in these books. The authors * * and publisher shall not be liable in any event for incidental or * * consequential damages in connection with, or arising out of, the * * furnishing, performance, or use of these programs. * ************************************************************************** --> //se la richiesta è stata completata //esegui la funzione di callback: nella fattispecie questa funzione //carica il test, 'responseText' obtains the response data // data are placed into the div "contentArea" using thet 'getElementById' // and the 'innerHTML' method of the document object
Documenti analoghi
Ajax, cenni - Dipartimento di Informatica
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else if (window.XMLHttpRequest) {
return(new XMLHttpRequest());
} else {
return(null);
es 4 rollover immagini
Posizionando il mouse sul nome di un’aula l’immagine deve essere sostituita dalla immagine che evidenzia la
posizione dell’aula indicata. Quando il mouse esce dal nome di un’aula deve essere visual...
Ajax - Programmazione it
Ajax
ja
function CreateXmlHttpReq(handler) {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
p = new Active...