Two ways to implement Ajax

Source: Internet
Author: User

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 infer whether 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 server
Xmlhttprequest.open ("POST", "Ajaxservlet", true);

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

When using post submission, you must call the following code, for example
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 descriptive narrative?
0 description Describes an "uninitialized" state; at this point, a XMLHttpRequest object has been created. But it hasn't been initialized yet.

?
1. Describe 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. Describe a "sending" state. At this point, a request has been sent to the server side by means of the Send () method, but no response has yet been received.

?
3. Describe a "receiving" state; at this point, the HTTP response header information has been received, but the body portion of the message has not been fully received.

?
4 description Describes a "loaded" state; At this point, the response has been fully received.

?
if (xmlhttprequest.status==200) {
var content = Xmlhttprequest.responsetext;
document.getElementById ("message"). InnerHTML = content;
}
}
}

Two ways to implement Ajax

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.