Application of Ajax in Javarss.com

Source: Internet
Author: User
Tags object http request window
Ajax|rss
"Guide" Ajax is an architecture (architecture) is not a technology, the author of this article describes how Ajax is a good application in www.JavaRSS.com.

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 www.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:

Click to see the original artwork

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.

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

function ProcessRequest () {

if (req.readystate = = 4) {

if (Req.status = = 200) {

Parsemessages ();

} else {

Alert ("Not able to retrieve description");

}

}

}

ReadyState = 4 The document is loaded.

ReadyState Status Codes:

0 = Uninitialized

1 = Loading

2 = Loaded

3 = Interactive

4 = 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= ' + 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);

}

function ProcessRequest () {

if (req.readystate = = 4) {

if (Req.status = = 200) {

Parsemessages ();

} else {

Alert ("Not able to retrieve description");

}

}

}

function Parsemessages () {

Response = Req.responseXML.documentElement;

ItemDescription = response.getelementsbytagname (' description ') [0].firstchild.data;

alert (itemdescription);

}



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.