The term AJAX is a pseudo-acronym for "Asynchronous JavaScript And XML," (see footnote) but is now used much more broadly to cover all methods of communicating with a server using JavaScript. As we will see, Ajax (see footnote) is not always asynchronous and does not always involve XML.

The Purpose of Ajax

The main purpose of Ajax is to provide a simple and standard means for a web page to communicate with the server without a complete page refresh. To illustrate this, consider a simple registration form. You have very likely experienced the frustration of having to try multiple usernames when registering for some new website. You fill out the entire form, hit the submit button, wait for a second or so, and then get the same form right back with a message saying that the username you have chosen is not available. You try another easy-to-remember username and find it is also not available. You repeat this several times until finally you pick some obscure username. This process wouldn't be nearly as bad if you didn't have to wait for the entire page to refresh each time you tried a new username. (see footnote)
But that's a very simple example. Some web-based applications require constant interaction with a database through a middle-tier. Take, for example, an interface for updating employee records. The traditional way of doing this is illustrated below.

Traditional Web Application

First, the application shows a list of employees to pick from. (AjaxBasics/Demos/EmployeeAdmin.jsp)
When the user chooses an employee, the server returns a new page (FIRST REFRESH) and a form is displayed. (AjaxBasics/Demos/EditEmployee.jsp)
The user can then edit the employee data (e.g, change "Andrew" to "Andy") and submit the form. The server then returns the new page (SECOND REFRESH). (AjaxBasics/Demos/EditEmployee.jsp)
To get back to the employee list to begin the process of modifying another employee's data, the user would have to click on the "Employee List" link (THIRD REFRESH).

An Ajax Web Application

Ajax makes this process much simpler for the user. Records, and even individual fields of a record, can be edited one at a time without full page refreshes. This method is illustrated below.

Like with the traditional method, the Ajax application shows a list of employees to pick from. (AjaxBasics/Solutions/EmployeeAdmin.html)
When the user chooses an employee, the page doesn't reload. Instead, an Ajax call to the server is made, the server returns the HTML form and JavaScript is used to display the form on the page.
The user can then edit the form fields. Each time a changed form field loses focus the change is sent to the server with Ajax, the server-side code updates the data in the database and sends back the updated list of employees to the browser. JavaScript is again used to display the updated list on the page.
The employee list is updated to reflect the changes made. Notice "Andrew" has been changed to "Andy" in the list. A message is displayed letting the user know that the database was updated. (see footnote)

All this is accomplished without having to do even one complete refresh. This is the major benefit of Ajax.

The XMLHttpRequest Object

The mechanism for sending data to and retrieving data from the server with Ajax is the XMLHttpRequest object. Unfortunately, modern browsers that support XMLHttp requests have different methods for doing so. We'll examine the Mozilla method (see footnote) and the Internet Explorer method and then we'll abstract both methods with a single user-defined function.

Creating an XMLHttpRequest Object

Mozilla Method

The Mozilla method is the most straightforward of the two. It uses a simple XMLHttpRequest() constructor to create the object.

Code Sample: AjaxBasics/Demos/CreateXMLHttpRequest-moz.html

<html>
<head>
<title>XMLHttpRequest in Mozilla</title>
<script type="text/javascript"> 
function Start()
{
 try
 {
  xmlhttp = new XMLHttpRequest();
  document.getElementById("Content").innerHTML="<h1>Using XMLHttpRequest Object</h1>";
 }
 catch (e)
 {
  document.getElementById("Content").innerHTML="<h1>XMLHttp cannot be created!</h1>";
 }  
}
</script>
</head>
<body>
 <a href="javascript:Start()">Start</a>
 <div id="Content"></div>
</body>
</html>

Code Explanation

This code attempts to create an XMLHttpRequest object using the XMLHttpRequest() constructor. If it succeeds, it writes out "Using XMLHttpRequest Object" to the body of the page. If it fails, it writes out "XMLHttp cannot be created!"

Internet Explorer Method

Microsoft Internet Explorer uses an ActiveX control to implement an XMLHttpRequest object. New and improved versions of this control have been released over time, so our code should check for the latest version available on the user's machine and use that one.

Code Sample: AjaxBasics/Demos/CreateXMLHttpRequest-ie.html

<html>
<head>
<title>XMLHttpRequest in Internet Explorer</title>
<script type="text/javascript">
function Start()
{
 var ieXmlHttpVersions = new Array();
 ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.7.0";
 ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.6.0";
 ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.5.0";
 ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.4.0";
 ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.3.0";
 ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp";
 ieXmlHttpVersions[ieXmlHttpVersions.length] = "Microsoft.XMLHttp";

 var i;
 for (i=0; i < ieXmlHttpVersions.length; i++)
 {
  try
  {
   var xmlhttp = new ActiveXObject(ieXmlHttpVersions[i]);
   document.getElementById("Content").innerHTML="<h1>Using " + ieXmlHttpVersions[i] + "</h1>";
   break;
  }
  catch (exc)
  {
   alert(ieXmlHttpVersions[i] + " not supported.");
  }
 }

 if (typeof xmlhttp == "undefined")
  document.getElementById("Content").innerHTML="<h1>XMLHttp cannot be created!</h1>";
}
</script>
</head>
<body>
 <a href="javascript:Start()">Start</a>
 <div id="Content"></div>
</body>
</html>

Code Explanation

This code creates an array containing the names of all the different versions of Microsoft's XMLHttp ActiveX control, starting with the most recent. It then loops through the array and uses the first available control to create an xmlhttp object. As soon as it finds one, it writes out the version being used to the body of the page. If none of the versions is supported, it writes out "XMLHttp cannot be created!"

Cross-browser XMLHttpRequest Creation

The following code sample combines the previous two in one function that handles XMLHttpRequest creation in both browsers. It first tries the Mozilla method as it's much more likely that Internet Explorer will eventually adopt this method (see footnote) than it is that Mozilla and other browsers will support ActiveX controls.

Code Sample: AjaxBasics/Demos/CreateXMLHttpRequest.html

 ---- Code Omitted ---- <script type="text/javascript">
function Start()
{
 try
 {
  var xmlhttp = new XMLHttpRequest();
  document.getElementById("Content").innerHTML="<h1>Using XMLHttpRequest Object</h1>";
 }
 catch(err1)
 {
  var ieXmlHttpVersions = new Array();
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.7.0";
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.6.0";
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.5.0";
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.4.0";
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.3.0";
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp";
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "Microsoft.XMLHttp";

  var i;
  for (i=0; i < ieXmlHttpVersions.length; i++)
  {
   try
   {
    var xmlhttp = new ActiveXObject(ieXmlHttpVersions[i]);
    document.getElementById("Content").innerHTML="<h1>Using " + ieXmlHttpVersions[i] + "</h1>";
    break;
   }
   catch (err2)
   {
    alert(ieXmlHttpVersions[i] + " not supported.");
   }
  }
 }

 if (typeof xmlhttp == "undefined")
  document.getElementById("Content").innerHTML="<h1>XMLHttp cannot be created!</h1>";
}
</script> ---- Code Omitted ----

Using an XMLHttpRequest Object

So, now that we have an XMLHttpRequest object created, what do we do with it? We use it to make HTTP requests. To do so, we initialize the object with the open() method, which takes three arguments.

XMLHttpRequest open() Method Arguments
Method	Description
Request Type	String. Usually POST, GET, or HEAD
URL	String. The URL receiving the request.
Asynchronous	Boolean. Whether the request should be made asynchronously (true) or synchronously (false).

A typical open() method call is shown below.

xmlhttp.open("GET","Demo.xml",true);

Request Types

Although the HTTP specification identifies several methods of HTTP requests (see footnote), the most commonly supported (and used) methods are GET, POST and HEAD.

HEAD

The HEAD method is the least commonly used of the three; however, for simple requests, it can be all you need. It simply returns the meta-information contained in the HTTP headers. The call would look like this:

xmlhttp.open("HEAD","Demo.jsp",true);

And the response might look like this:

Server: Microsoft-IIS/5.1 
X-Powered-By: ASP.NET 
Date: Fri, 03 Mar 2006 17:47:47 GMT 
Content-Type: text/xml 
Accept-Ranges: bytes 
Last-Modified: Fri, 03 Mar 2006 14:07:51 GMT 
ETag: "50c59dccb3ec61:99e" 
Content-Length: 21

The XMLHttpRequest request is sent as follows:

xmlhttp.send(null);

We'll explain why null is passed in just a moment.

GET

The GET method is used to send information to the server as part of the URL. The server returns the same header information that the HEAD method returns, but it also returns the body of the message (i.e, the content of the page). Any name-value pairs to be processed by the receiving page should be passed along the querystring. The call would look like this:

xmlhttp.open("GET","Demo.jsp?FirstName=Nat&LastName=Dunn",true);

The response would be the same as the response shown for the HEAD method followed by the message body, which would typically be plain text, HTML or XML.
Again, the XMLHttpRequest request is sent as follows:

xmlhttp.send(null);

POST

The POST method is used to send information as an enclosed entity. The call would look like this:

xmlhttp.open("POST","Demo.jsp",true);

The response header is somewhat different in that it specifies that the returned content is not cacheable. Like with GET, the message body would typically be plain text, HTML or XML.
The XMLHttpRequest request is sent as follows:

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
xmlhttp.send("FirstName=Nat&LastName=Dunn");

As you can see, with POST, we first need to set the content type to "application/x-www-form-urlencoded;". This tells the server to expect form data. In the send method, we include name-value pairs. These name-value pairs are available to the receiving page for processing.
Nothing can be sent in this manner with the HEAD and GET methods, which is why null was passed in the previous examples.
We'll see later that we can also send data in other formats, such as raw XML, using the POST method.

Asynchronous vs. Synchronous Requests

The asynchronous argument should almost always be set to true. After all, that's the "A" in Ajax. Synchronous calls force the browser to wait for a response from the server before continuing. This leaves the user unable to interact with the browser until the response is complete. Asynchronous requests allow the browser to continue to process code while waiting for a response.

Handling the Response

When using asynchronous calls, we cannot be sure when the response will come, so we must write code that waits for the response and handles it when it arrives. We do this with a callback function. Callback functions are functions that are triggered by some event. In our case, the event we are looking for is a change in the state of the xmlhttp response. This event is captured by the xmlhttp object's onreadystatechange property. We can assign a callback function to this property like this:

xmlhttp.onreadystatechange=function() 
{
 //Do something here
}

The xmlhttp object's readyState property holds the current state of the response. There are five possible states (0-4), which are described below.

Values of the readyState Property
State	Description
0	uninitialized
1	loading
2	loaded
3	interactive
4	complete

This use of an inline function may be new to you. In JavaScript, functions are first-class objects and can be assigned to variables or properties of other objects. We could also create a named function and assign that function to xmlhttp.onreadystatechange.
The following sample file illustrates how the readystatechange event is handled.

Code Sample: AjaxBasics/Demos/ReadyStateChange.html

 ---- Code Omitted ---- function Start()
{ ---- Code Omitted ---- var ContentDiv = document.getElementById("Content");
 if (typeof xmlhttp == "undefined") 
 {
  ContentDiv.innerHTML = "<h1>XMLHttp cannot be created!</h1>";
 }
 else
 {
  xmlhttp.open("HEAD", "Demo.xml", true);
  xmlhttp.onreadystatechange=function() 
  {
   ContentDiv.innerHTML += "Ready State: " + xmlhttp.readyState + "<br/>";
  }
  xmlhttp.send(null);
 }
} ---- Code Omitted ----

Code Explanation

The output will look something like this. The actual ready states returned will depend on your setup.

In practice, before doing anything with the xmlhttp response data, we want to make sure the readyState is complete (4), so we put a condition inside our function to check for this:

xmlhttp.onreadystatechange=function() 
{
 if (xmlhttp.readyState==4) 
 {
  //Do something here
 }
}

Now we're ready to do something with the data returned. Before looking at an example, let's take a look at the properties and methods of the xmlhttp object, so we know what's available to us.

XMLHttpRequest Object Properties
Property	Description
onreadystatechange	Specifies the callback function to be triggered when the ready state changes.
readyState	Holds the state of the response.
responseText	Holds the message body as a string.
responseXML	Holds the message body as an XML object.
status	Holds the status code returned from the server (e.g, 200 for success, 404 for page not found, etc.).
statusText	Holds the status text returned from the server.

XMLHttpRequest Object Methods
Method	Description
abort()	Aborts the xmlhttp request.
getAllResponseHeaders()	Retrieves the values of all the HTTP headers as a string.
getResponseHeader(header)	Retrieves the value of the specified HTTP header as a string.
open(Method,URL,Async)	Initializes the XMLHttpRequest object.
send(postData)	Sends the HTTP request to the server.
setRequestHeader(header,value)	Specifies the name and value of an HTTP header.

A common application is to check the status property to make sure that the request was successful and then to output the message body to a div on the HTML page. The following sample file demonstrates this.

Code Sample: AjaxBasics/Demos/UsingXMLHttpRequest-Get.html

 ---- Code Omitted ---- else
 {
  xmlhttp.open("GET", "Demo.jsp?FirstName=Nat&LastName=Dunn", true);
  xmlhttp.onreadystatechange=function() 
  {
   if (xmlhttp.readyState==4 && xmlhttp.status==200) 
   {
    ContentDiv.innerHTML=xmlhttp.responseText;
   }
  }
  xmlhttp.send(null);
 } ---- Code Omitted ----

Code Explanation

This page simply "copies" the response text (xmlhttp.responseText) and "pastes" it into the "Content" div on the page.

Exercise: Ajax using the POST method

Duration: 10 to 15 minutes.

In this exercise, you will modify the code from the last demonstration to send data using the POST method. You will need to use the setRequestHeader() method to alert the server to expect form data.

Open AjaxBasics/Exercises/UsingXMLHttpRequest-Post.html in your editor.
Modify the code to make the request using the POST method shown earlier.
Test your solution in a browser.

Code Sample: AjaxBasics/Exercises/UsingXMLHttpRequest-Post.html

<html>
<head>
<title>XMLHttpRequest Request Using GET Method</title>
<script type="text/javascript">
function Start()
{ ---- Code Omitted ---- var ContentDiv = document.getElementById("Content");
 if (typeof xmlhttp == "undefined") 
 {
  ContentDiv.innerHTML="<h1>XMLHttp cannot be created!</h1>";
 }
 else
 {
  xmlhttp.open("GET", "Demo.jsp?FirstName=Nat&LastName=Dunn", true);
  xmlhttp.onreadystatechange=function() 
  {
   if (xmlhttp.readyState==4 && xmlhttp.status==200) 
   {
    ContentDiv.innerHTML=xmlhttp.responseText;
   }
  }
  xmlhttp.send(null);
 }
}
</script>
</head>
<body>
 <a href="javascript:Start()">Start</a>
 <div id="Content"></div>
</body>
</html>

Write out all the response headers to the end of the same "Content" div.

Where is the solution?

Exercise: Displaying and Updating Records

Duration: 30 to 40 minutes.

In this exercise, you will create a mini-application for displaying and updating employee records. The server-side files are already created and much of the JavaScript is written for you. You will have to finish the Ajax portions of the code.

Open AjaxBasics/Exercises/EmployeeList.jsp in your editor and review the code. This page returns a list of the employees as links. When the links are clicked, the GetEmployeeForm() function is called with EmployeeForm.jsp and the EmployeeID as passed parameters. The first generated list item is shown below:
```
<li>
 <a href="javascript:void(0)" 
  onclick="GetEmployeeForm('EmployeeForm.jsp',1)">Nancy Davolio</a>
</li>
```

Open AjaxBasics/Exercises/EmployeeForm.jsp in your editor and review the code. This page returns a form filled out with the data of the employee whose id was passed in over the querystring. To see this, in your browser navigate to AjaxBasics/Exercises/EmployeeForm.jsp?eid=1. The returned code is shown below:

<h2>Edit Employee</h2>
<form onsubmit="return false">
 <table>
  <tr>
   <td>First Name:</td>
   <td>
    <input type="text" name="FirstName" value="Nancy" onchange="UpdateEmployee('EditEmployee.jsp','FirstName',this.value,1);"/>
   </td>
  </tr>
  <tr>
   <td>Last Name:</td>
   <td>
    <input type="text" name="LastName" value="Davolio" onchange="UpdateEmployee('EditEmployee.jsp','LastName',this.value,1);"/>
   </td>
  </tr>
  <tr>
   <td>Title:</td>
   <td>
    <input type="text" name="Title" value="Sales Representative" onchange="UpdateEmployee('EditEmployee.jsp','Title',this.value,1);"/>
   </td>
  </tr>
  <tr>
   <td>Extension:</td>
   <td>
    <input type="text" name="Extension" value="5467" onchange="UpdateEmployee('EditEmployee.jsp','Extension',this.value,1);"/>
   </td>
  </tr>
 </table>
</form>

As a standalone page, it would appear as follows:

Open AjaxBasics/Exercises/EditEmployee.jsp in your editor and review the code. This page updates the database and redirects to EmployeeForm.jsp so that the form gets returned.
Open AjaxBasics/Exercises/Scripts/Ajax.js in your editor and review the code. This page just contains the function for creating the XMLHttpRequest object. The function is called createXHR().
Open AjaxBasics/Exercises/EmployeeAdmin.html for editing. This is where you'll do your work.
1. In the GetEmployeeList() function where the comment is:
  - open an XMLHttpRequest using the POST method.
    - Use the passed in URL.
  - When the state of the request changes, call the Display() method.
  - Send the request.
2. In the Display() function:
  - Set the innerHTML property of OutputDiv to the responseText of the returned xmlhttp object.
  - Test your solution to this piece by opening AjaxBasics/Exercises/EmployeeAdmin.html in your browser. You should see a list of the employees. If you do not, check your GetEmployeeList() and Display() functions.
3. In the GetEmployeeForm() function:
  - Open an XMLHttpRequest using the POST method.
    - Use the passed in URL.
    - Make sure to pass in the EmployeeID as "eid" on the querystring.
  - When the state of the request changes, call the Display() method.
  - Send the request.
4. In the UpdateEmployee() function:
  - Open an XMLHttpRequest using the POST method.
    - Use the passed in URL.
    - Make sure to pass in the EmployeeID as "eid", the field being changed as "field" and the new field value as "value" on the querystring.
  - When the state of the request changes, call the EmployeeUpdated() method.
  - Send the request.

Code Sample: AjaxBasics/Exercises/EmployeeAdmin.html

<html>
<head>
<title>Employee Administration</title>
<link rel="stylesheet" type="text/css" href="Styles/Main.css">
<script type="text/javascript" src="Scripts/Ajax.js"></script>
<script type="text/javascript" src="Scripts/Effects.js"></script>
<script type="text/javascript">
 var xmlhttp = createXHR();
 var OutputDiv;
 function GetEmployeeList(URL)
 {
  OutputDiv = document.getElementById("EmployeeList");
  OutputDiv.innerHTML="<h2>Loading...</h2>";
  /*
   Open an XMLHttpRequest using the POST method.
    Use the passed in URL.
   When the state of the request changes, call the Display() method.
   Send the request.
  */
 }

 function Display()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   OutputDiv.style.display="block";
   if (xmlhttp.responseText.indexOf("Failed") == 0)
   {
    OutputDiv.className="Warning";
    OutputDiv.innerHTML=xmlhttp.responseText;
   }
   else
   {
    //Set the innerHTML property of OutputDiv to the responseText of the xmlhttp object.
   }
  }
 }

 function GetEmployeeForm(URL,EID)
 {
  OutputDiv = document.getElementById("FormDiv");
  OutputDiv.innerHTML="Loading...";
  /*
   Open an XMLHttpRequest using the POST method.
    Use the passed in URL.
    Make sure to pass in the EmployeeID as "eid" on the querystring.
   When the state of the request changes, call the Display() method.
   Send the request.
  */
 }

 function UpdateEmployee(URL,FIELD,VALUE,EID)
 {
  /*
   Open an XMLHttpRequest using the POST method.
    Use the passed in URL.
    Make sure to pass in the EmployeeID as "eid", the field being changed as "field" and the new field value as "value" on the querystring.
   When the state of the request changes, call the EmployeeUpdated() method.
   Send the request.
  */
 }

 function EmployeeUpdated()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   var MessageDiv = document.getElementById("MessageDiv");
   if (xmlhttp.responseText.indexOf("Failed") == 0)
   {
    MessageDiv.className = "Warning";
    MessageDiv.innerHTML=xmlhttp.responseText;
   }
   else
   {
    MessageDiv.innerHTML="Updated!";
    FadeElem(MessageDiv,255,255,0,255,255,255);
    setTimeout(function() { GetEmployeeList('EmployeeList.jsp') },"1000");
     //Call to GetEmployeeList is delayed to give the database a chance to update.
   }
  }
 }

 window.onload = function()
 {
  GetEmployeeList("EmployeeList.jsp");
 }
</script>
</head>

<body>
 <h1>Employee Administration</h1>
 <p>Click employee name to modify.</p>
 <div id="EmployeeList"></div>
 <div id="FormDiv"></div>
 <div id="MessageDiv"></div>
</body>
</html>

Where is the solution?

Ajax Basics Conclusion

In this lesson of the Ajax tutorial, you have learned the purpose of Ajax and the basic foundation for creating Ajax applications.

Posted in: tutorial web

Ilmu Komputer & Software Gratis

Friends

Wednesday, October 26, 2011

Ajax Basics

The Purpose of Ajax

Traditional Web Application

An Ajax Web Application

The XMLHttpRequest Object

Creating an XMLHttpRequest Object

Mozilla Method

Code Sample: AjaxBasics/Demos/CreateXMLHttpRequest-moz.html

Internet Explorer Method

Code Sample: AjaxBasics/Demos/CreateXMLHttpRequest-ie.html

Cross-browser XMLHttpRequest Creation

Code Sample: AjaxBasics/Demos/CreateXMLHttpRequest.html

Using an XMLHttpRequest Object

Request Types

HEAD

GET

POST

Asynchronous vs. Synchronous Requests

Handling the Response

Code Sample: AjaxBasics/Demos/ReadyStateChange.html

Code Sample: AjaxBasics/Demos/UsingXMLHttpRequest-Get.html

Exercise: Ajax using the POST method

Code Sample: AjaxBasics/Exercises/UsingXMLHttpRequest-Post.html

Exercise: Displaying and Updating Records

Code Sample: AjaxBasics/Exercises/EmployeeAdmin.html

Ajax Basics Conclusion

0 comments:

Post a Comment

Followers

Labels

Blog Archive

Total Pageviews

Popular Posts

Blogger Tricks

Blogger Themes

Download

Footer Widget 1

Footer Widget 2

Footer Widget 3