Two ways to implement Ajax

The jquery implementation of Ajax
function Aclick () {
Alert ("Test One");
var name = $ ("#userName"). Val ();
alert (name);
$.get ("servlet/ajaxservlet?name=" + Name, null,back);
}


function back (data) {
alert (data);
$ ("#message"). HTML (data);
}




Common implementations of Ajax
var xmlhttprequest = null; JavaScript's browser built-in object, the XMLHttpRequest object is the technical foundation for all of today's Ajax and Web 2.0 applications
function Ajaxrequest () {
Alert ("Test Two");
if (window. ActiveXObject)//ie Browser to determine if the browser supports ActiveX controls
{
XMLHttpRequest = new ActiveXObject ("Microsoft.XMLHTTP"); Create a XMLHttpRequest Object
}else if (window. XMLHttpRequest)//browser other than IE
{
XMLHttpRequest = new XMLHttpRequest ();
}
if (null! = XMLHttpRequest)
{
var v1 = document.getElementById ("UserName"). Value;
var v2 = document.getElementById ("UserName"). Value;

Preparing to make a request to the server

Get mode makes a request
Xmlhttprequest.open ("GET", "servlet/ajaxservlet?name=" + v1, true);

Post method sends a request to the server
Xmlhttprequest.open ("POST", "Ajaxservlet", true);

Call the callback function when a turntable transformation occurs
Xmlhttprequest.onreadystatechange = Ajaxcallback;

The following code must be called when using post submission
Xmlhttprequest.setrequestheader ("Content-type", "application/x-www-form-urlencoded");

Make a request to the server
Xmlhttprequest.send ("name=" +v1+ "&v2=" +v2);
}
}


function Ajaxcallback () {
if (xmlhttprequest.readystate==4) {
ReadyState Value Description
0 describes an "uninitialized" state, in which a XMLHttpRequest object has been created, but has not yet been initialized.
1 describes a "send" state; At this point, the code has called the XMLHttpRequest Open () method and XMLHttpRequest is ready to send a request to the server.
2 describes a "send" state; At this point, a request has been sent to the server side by means of the Send () method, but no response has been received.
3 describes a "receiving" state, at which point the HTTP response header information has been received, but the body portion of the message has not yet fully received the end.
4 describes a "loaded" state, at which time the response has been fully received.
if (xmlhttprequest.status==200) {
var content = Xmlhttprequest.responsetext;
document.getElementById ("message"). InnerHTML = content;
}
}
}

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Two ways to implement Ajax