Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and to allow the user to interact with the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.
Sample source code for Javascript AJAX GET HTTP request ajaxget.html
<html> <head> <title>Ajax GET HTTP Request</title> <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> function ajaxRequest(){ var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]; //activeX versions to check for in IE if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) for (var i=0; i<activexmodes.length; i++){ try{ return new ActiveXObject(activexmodes[i]); } catch(e){ //suppress error } } } else if (window.XMLHttpRequest) // if Mozilla, Safari etc return new XMLHttpRequest(); else return false; } function ajaxget(){ var mygetrequest=new ajaxRequest(); mygetrequest.onreadystatechange=function(){ if (mygetrequest.readyState==4){ if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){ document.getElementById("result").innerHTML = mygetrequest.responseText; } else{ alert("An error has occured making the request"); } } } var userId = encodeURIComponent(document.getElementById("userId").value); var password = encodeURIComponent(document.getElementById("password").value); mygetrequest.open("GET", "http://localhost:8080/AjaxTest/Login?userId="+userId+"&password="+password, true); mygetrequest.send(null); } </SCRIPT> </head> <body> <form method="get" action=""> <table> <tr> <td>User Id:</td> <td><input type="text" id="userId" name="userId" size="30" /> </td> </tr> <tr> <td>Password:</td> <td><input type="password" id="password" name="password" size="30" /> </td> </tr> <tr> <td> </td> <td><input type="button" value="submit" onClick="ajaxget()" /> </td> </tr> </table> </form> <div id="result"></div> </body> </html>
Sample source code for Javascript AJAX POST HTTP request ajaxpost.html
<html> <head> <title>Ajax POST HTTP Request</title> <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> function ajaxRequest(){ var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]; //activeX versions to check for in IE if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) for (var i=0; i<activexmodes.length; i++){ try{ return new ActiveXObject(activexmodes[i]); } catch(e){ //suppress error } } } else if (window.XMLHttpRequest) // if Mozilla, Safari etc return new XMLHttpRequest(); else return false; } function ajaxpost(){ var mypostrequest=new ajaxRequest(); mypostrequest.onreadystatechange=function(){ if (mypostrequest.readyState==4){ if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1){ document.getElementById("result").innerHTML = mypostrequest.responseText; } else{ alert("An error has occured making the request"); } } } var userId = encodeURIComponent(document.getElementById("userId").value); var password = encodeURIComponent(document.getElementById("password").value); var parameters="userId="+userId+"&password="+password; mypostrequest.open("POST", "http://localhost:8080/AjaxTest/Login", true); mypostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); mypostrequest.send(parameters); } </SCRIPT> </head> <body> <form method="get" action=""> <table> <tr> <td>User Id:</td> <td><input type="text" id="userId" name="userId" size="30" /> </td> </tr> <tr> <td>Password:</td> <td><input type="password" id="password" name="password" size="30" /> </td> </tr> <tr> <td> </td> <td><input type="button" value="submit" onClick="ajaxpost()" /> </td> </tr> </table> </form> <div id="result"></div> </body> </html>
Click here for Login Servlet Source code
XMLHttpRequest Object
- Properties
- readyState A number representing the current state of the request:
- 0 - UNINITIALIZED
- 1 - LOADING
- 2 - LOADED
- 3 - INTERACTIVE
- 4 - COMPLETE
- status
- The numeric HTTP status code returned by the web server.
- statusText
- The text associated with the above HTTP status code. For example, 200 means "OK" and 404 means "Not found".
- responseText
- A string containing the response data returned from the web server.
- responseXML
- If the web server returns an XML document, this will be a DOM document object representing the parsed XML.
- Methods
- open(method, url, asynch, username, password)
- Initializes a new request. method is the HTTP request verb, usually "GET" or "POST". The last three options are optional: asynch defaults to true, username and password may be specified if the web server requires authentication.
- setRequestHeader(name, value)
- Sets a the named request header.
- send(data)
- Makes the request. optionally passing data.
- abort()
- Aborts an active request.
- getResponseHeader(name)
- Returns the value of the named response header.
- getAllResponseHeaders()
- Returns a string containg all the response headers.
- Events
- onreadystatechange
- Raised anytime the readystate property changes.
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.