Uncover the secrets of the Ajax Veil

Source: Internet
Author: User

AJAX, the abbreviation for "Asynchronous JavaScript and XML", can be translated into asynchronous JavaScript and XML technology. Its core is a class hosted in the browser named XMLHttpRequest. This allows you to connect to the server without submitting the form, and you can dynamically update portions of the page without refreshing the entire page. XMLHttpRequest usually use XML as a carrier of data interchange, but other vectors, such as plain text, can also be used. In short, it is through the XMLHttpRequest to send information to the server, the asynchronous receiving server processing and return information, and then dynamically update the page through JavaScript part of the content.

Although Ajax has been hot lately, Ajax is not a new technology, as its name shows, it's just JavaScript plus XML technology. And it's very simple to use.

The process of applying Ajax:

1. Define an event handler

2, get XMLHttpRequest, and register the event handler to it

3, connect with the server

4, send the information

5, the server returned processing information

6, whenever the state of XMLHttpRequest change, automatically trigger event handlers

7. Event Processor Dynamic Update page

This article uses a simple example to illustrate how to use AJAX techniques in IE6. In this example, the client retrieves a random string from the server for every 10 seconds and automatically updates part of the page content without refreshing the page. The example uses only two JSP files, client.jsp and server.jsp. For the convenience of illustration, I use server.jsp to replace the Server.java that should be used as a servlet.

First look at the client.jsp content:

<% @page contenttype= "text/html"%>
<% @page pageencoding= "gb2312"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title>ajax demo</title>
<script language= "JavaScript" >
var xmlHttp;
function Getgiftfromserver () {
var url = "Http://localhost:8084/ajax/server.jsp";
if (window. ActiveXObject) {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
Xmlhttp.onreadystatechange = Showgift;
Xmlhttp.open ("Get", url, True);
Xmlhttp.send (NULL);
SetTimeout ("Getgiftfromserver ()", 10000);
}
function Showgift () {
if (xmlhttp.readystate = = 4 | | xmlhttp.readystate = = "complete") {
document.getElementById ("Output"). InnerHTML = "for" + Xmlhttp.responsetext + ".";
}
}
</script>
<body onload= "Getgiftfromserver ()" >
<div id= "Output" ></div>
</body>

Related Article

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.