Home > Developer > Web Develop
We start with the basics of Ajax: Using XMLHttpRequest objects to get and display data from the server.
Step1: Writing HTML page 01.HTML:
<! DOCTYPE html>
<title>my First Ajax script</title>
<script src= "Script01.js" ></script>
<body>
<p>
<!--/web-inf/is not recognized in the <a > tag, so it's taken out individually--
<a id= "Maketextrequest" href= "GAddress.txt" >request a text file</a><br>
<a id= "Makexmlrequest" href= "Us-states.xml" >request an XML file</a>
</p>
<div id= "Updatearea" > </div>
</body>
Step2: Write JavaScript file script01.js:
/**
* The Initall () function is called when the page is loaded
*/
Window.onload = Initall;
/**
* var xhr = false;
* The XHR variable in script 13-2 is a variable that you will see frequently in this chapter. It is a XMLHttpRequest object (or
* will become the XMLHttpRequest object after initialization). For now, we just need to create it outside of any function to make it a global variable.
*/
var xhr = false;
function Initall () {
document.getElementById ("Maketextrequest"). onclick = Getnewfile;
document.getElementById ("Makexmlrequest"). onclick = Getnewfile;
}
function Getnewfile () {
MakeRequest (THIS.HREF);
return false;
}
function makerequest (URL) {
/**
* These codes are in MakeRequest (), which is an interesting place. Modern browsers support a native XMLHttpRequest to
* Like, this object is a property of window. So, we check if this property exists, and if it does, create a new
*xmlhttprequest Object
*/
if (window. XMLHttpRequest) {
XHR = new XMLHttpRequest ();
}
else {
/**
* Although Microsoft's IE (version 5.5 and version 6) supports XMLHttpRequest,
* But there is no native version of this object. In this case, you must check whether the browser supports ActiveX.
* If supported, check if you are able to create from ActiveX
The *xmlhttprequest object (using the Try/catch exception handling structure). If you can, just do it.
*/
if (window. ActiveXObject) {
try {
XHR = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (XHR) {
/**
* ? Sets the onReadyStateChange event handler for XHR. Whenever the Xhr.readystate property value changes,
* This handler will be triggered. Call Open () and pass 3 parameters: an HTTP request method (such as "GET", "POST" or "HEAD"),
* The URL of the previous file on the server and a Boolean value that tells the server whether the request is asynchronous (that is, whether we will wait for the request to complete).
* Finally, we send the request we just created with Send (). If you want to request a post, pass the parameters given here.
*/
Xhr.onreadystatechange = showcontents;
Xhr.open ("GET", url, True);
Xhr.send (NULL);
}
else {
document.getElementById ("Updatearea"). InnerHTML = "Sorry, but I couldn ' t create an XMLHttpRequest";
}
}
function showcontents () {
if (xhr.readystate = = 4) {
if (Xhr.status = = 200) {
if (xhr.responsexml && xhr.responseXML.childNodes.length > 0) {
var outmsg = GetText (Xhr.responseXML.getElementsByTagName ("choices") [0]);
}
else {
var outmsg = Xhr.responsetext;
}
}
else {
var outmsg = "There is a problem with the request" + Xhr.status;
}
document.getElementById ("Updatearea"). InnerHTML = outmsg;
}
}
function GetText (inval) {
if (inval.textcontent) {
return inval.textcontent;
}
return inval.text;
}
Step3: Write the request text file Gaddress.text:
Four score and seven years ago we fathers brought forth on this continent, a new nation, conceived in Liberty,
? and dedicated to the proposition, all men is created equal.
Now we is engaged in a great civil war,testing whether this nation, or any nation so conceived and so dedicated,
? can long endure. We are met in a great battle-field of that war. We have come to dedicate a portion of that
? field, as a final resting place for those who is here gave their lives this that nation might live. It is altogether
Fitting and proper that we should does this.
But with a larger sense, we can not dedicate--we can not consecrate--we can not hallow--this ground. The
? Brave men,living and dead, who struggled here, has consecrated it, far above we poor power to add or detract.
? The world would little note, nor long remember what we say here,but it can never forget what they do here.
? It's For us the living, Rather,to being dedicated here's the unfinished work which they who fought here has
? Thus far and nobly advanced. It is rather for us-be-dedicated to the great task remaining before us
?--that from these honored dead we take increased devotion to that cause for which they gave
? measure of Devotion–that We here highly resolve, these dead shall not having died in vain – that's
Nation, under God, shall has a new birth of freedom--and that government of the people, by the people,
? For the People,shall not perish from the earth.
STEP4: Write XML file Us_states.xml:
<?xml version= "1.0" encoding= "UTF-8"?>
<choices xml:lang= "EN" >
<item><label>Alabama</label><value>AL</value></item>
<item><label>Alaska</label><value>AK</value></item>
<item><label>Arizona</label><value>AZ</value></item>
<item><label>Arkansas</label><value>AR</value></item>
<item><label>California</label><value>CA</value></item>
<item><label>Colorado</label><value>CO</value></item>
<item><label>Connecticut</label><value>CT</value></item>
<item><label>Delaware</label><value>DE</value></item>
<item><label>Florida</label><value>FL</value></item>
<item><label>Georgia</label><value>GA</value></item>
<item><label>Hawaii</label><value>HI</value></item>
<item><label>Idaho</label><value>ID</value></item>
<item><label>Illinois</label><value>IL</value></item>
<item><label>Indiana</label><value>IN</value></item>
<item><label>Iowa</label><value>IA</value></item>
<item><label>Kansas</label><value>KS</value></item>
<item><label>Kentucky</label><value>KY</value></item>
<item><label>Louisiana</label><value>LA</value></item>
<item><label>Maine</label><value>ME</value></item>
<item><label>Maryland</label><value>MD</value></item>
<item><label>Massachusetts</label><value>MA</value></item>
<item><label>Michigan</label><value>MI</value></item>
<item><label>Minnesota</label><value>MN</value></item>
<item><label>Mississippi</label><value>MS</value></item>
<item><label>Missouri</label><value>MO</value></item>
<item><label>Montana</label><value>MT</value></item>
<item><label>Nebraska</label><value>NE</value></item>
<item><label>Nevada</label><value>NV</value></item>
<item><label>new hampshire</label><value>nh</value></item>
<item><label>new jersey</label><value>nj</value></item>
<item><label>new mexico</label><value>nm</value></item>
<item><label>new york</label><value>ny</value></item>
<item><label>north carolina</label><value>nc</value></item>
<item><label>north dakota</label><value>nd</value></item>
<item><label>Ohio</label><value>OH</value></item>
<item><label>Oklahoma</label><value>OK</value></item>
<item><label>Oregon</label><value>OR</value></item>
<item><label>Pennsylvania</label><value>PA</value></item>
<item><label>rhode island</label><value>ri</value></item>
<item><label>south carolina</label><value>sc</value></item>
<item><label>south dakota</label><value>sd</value></item>
<item><label>Tennessee</label><value>TN</value></item>
<item><label>Texas</label><value>TX</value></item>
<item><label>Utah</label><value>UT</value></item>
<item><label>Vermont</label><value>VT</value></item>
<item><label>Virginia</label><value>VA</value></item>
<item><label>Washington</label><value>WA</value></item>
<item><label>west virginia</label><value>wv</value></item>
<item><label>Wisconsin</label><value>WI</value></item>
<item><label>Wyoming</label><value>WY</value></item>
</choices>
Ajax Learning Read Server data 1
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
