AJAX in Action

Source: Internet
Author: User
Tags object http request string tostring window

Like everyone else, I was amazed when I saw Ria apps, such as Google Maps and Google suggest. I want to know how it is achieved. Now, the mystery is uncovered, and that is Ajax. This was only known after I spent some time studying Ajax. Here's a good example of how AJAX can be used well in javarss.com.

What is Ajax:ajax is a schema (architecture) is not a technology. Ajax represents asynchronous JavaScript and XML.

Quip (Punch line): Deferred loading

Question: When the javarss.com home page loads, he also loads an introduction to all the entries (if you activate them in the settings). These descriptions are displayed only when you move the mouse over the item.

The problem now is that it is not possible for the user to move through all the entries, so preload all the introductions is not a good idea.

Solution: Using AJAX, the introduction of dynamically loading entries from the server when the mouse is moved.

Doing so will reduce the initial page load size by half or more, so that the page loads faster and can get a better user experience.

Timeline diagram:

We'll first call JavaScript function getdescription in the onmouseover event. Here is the HTML code:

<a href= "/" >java & Java EE news<a>

The following is the code for the GetDescription function:

    var url = ' http://localhost:8080/getDescription.jsp?channelId= ' + channelid + ' &itemid= ' + itemId;    if (window. XMLHttpRequest) {        req = new XMLHttpRequest ();    } else if (window. ActiveXObject) {        req = new ActiveXObject ("Microsoft.XMLHTTP");    }    Req.onreadystatechange = ProcessRequest;    Req.open ("Get", url, true);    Req.send (NULL);

The XMLHttpRequest object is used to make an HTTP connection and retrieve the XML document. We need to check if it is IE and create a XMLHttpRequest object.

    if (window. XMLHttpRequest) {        req = new XMLHttpRequest ();    } else if (window. ActiveXObject) {        req = new ActiveXObject ("Microsoft.XMLHTTP");    }

Sets the callback function and sends a "GET" request to the server to receive the XML document:

    Req.onreadystatechange = ProcessRequest;    Req.open ("Get", url, true);    Req.send (NULL);

The JSP creates an XML document with the appropriate description based on the proper entry number.

<--string Channelid = Request.getparameter ("Channelid"); String itemId = Request.getparameter ("ItemId");//string description = new Channel (channelid). Getitemdescription ( ITEMID); String Description = "This are the description for the Channelid:" + Channelid + "and itemId:" + itemid;if (description!) = null) {   response.setcontenttype ("Text/xml");   Response.setheader ("Cache-control", "No-cache");   Response.getwriter (). Write ("
     < description="">
   ");} else {   //nothing to show   Response.setstatus ( httpservletresponse.sc_no_content);} -->

Detects the HTTP request return status code with a status of 200, that is OK.

function ProcessRequest () {    if (req.readystate = 4) {        if (Req.status =) {          parsemessages ();        } el SE {  alert ("Not able to retrieve description");}}    

ReadyState = 4 The document is loaded.

ReadyState Status codes:0 = uninitialized1 = Loading2 = Loaded3 = Interactive4 = complete

Finally, we parse the XML document and display the introduction.

question: The only problem is the "&" character I encountered. "&" is not a valid character in an XML document. So I need to convert him to "&".

function Parsemessages () {Response  = Req.responsexml.documentelement;itemdescription = Response.getelementsbytagname (' description ') [0].firstchild.data;alert (ItemDescription);}

Here's all the code:

HTML Code:<a href= "/" >java & Java EE news<a>JavaScript Code:function GetDescription (channelid,itemid) {var url = ' http://localhost:8080/getDescription.jsp?channelId= ' + Channeli    D + ' &itemid= ' + itemId; if (window.    XMLHttpRequest) {req = new XMLHttpRequest (); else if (window.    ActiveXObject) {req = new ActiveXObject ("Microsoft.XMLHTTP");    } req.onreadystatechange = ProcessRequest;    Req.open ("Get", url, True); Req.send (null);}        function ProcessRequest () {if (req.readystate = 4) {if (Req.status =) {parsemessages ();    else {alert ("not able to retrieve description");} }}function parsemessages () {response = Req.responsexml.documentelement;itemdescription = Response.getelementsbytagname (' description ') [0].firstchild.data;alert (ItemDescription);}

AJAX in Action

"Font: Big Medium small" "Print this manuscript" 2006-5-3 15:57:08 www.okajax.com (264)

JSP Code: <--string channelid = Request.getparameter ("Channelid"); String itemId = Request.getparameter ("itemId");d escription = "This are the description for the Channelid:" + Channelid + " and itemId: "+ itemid;if (description!= null) {Response.setcontenttype (" text/xml "); Response.setheader ("Cache-control", "No-cache"); Response.getwriter (). Write (" < description=""> "); else {//nothing to show response.setstatus (httpservletresponse.sc_no_content);} -->

AJAX Java Blueprints Solutions Catalog
AJAX in Wikipedia
www HTTP Status codes

Google sites using Ajax:
Google suggest
Google Maps

about the Author: Jay has more than 10 years of it work experience and has been in touch with Java & EE since the day it was born.

translator :nicholas@nirvanastudio


Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.