Introduction
AJAX = Asynchronous JavaScript and XML
AJAX is not a new programming language, but a new technique for creating better, faster, and more interactive web applications.
AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.
The AJAX technique makes Internet applications smaller, faster and more user-friendly.
With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.
Main
AJAX uses the XMLHttpRequest object
With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object.
With the XMLHttpRequest object, a web page can make a request to, and get a response from a web server - without reloading the page.
The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.
XMLHttpRequest Properties:
-
onreadystatechange
The XMLHttpRequest object has a special property called onreadystatechange. onreadystatechange stores the function that will process the response from the server.
Ex :
Create a function that will receive data sent from the server
ajaxRequest.
onreadystatechange = function(){// We still need to write some code here}
- readyState
The XMLHttpRequest object has another property called readyState. This is where the status of our server's response is stored. The response can be processing, downloading or completed. Each time the readyState changes then our onreadystatechange function executes.
Here are the possible values for the readyState propery:
| State | Description |
| 0 | The request is not initialized |
| 1 | The request has been set up |
| 2 | The request has been sent |
| 3 | The request is in process |
| 4 | The request is completed |
readyState=0 after you have created the XMLHttpRequest object, but before you have called the open() method.
readyState=1 after you have called the open() method, but before you have called send().
readyState=2 after you have called send().
readyState=3 after the browser has established a communication with the server, but before the server has completed the response.
readyState=4 after the request has been completed, and the response data have been completely received from the server.
Ex : Create a function that will receive data sent from the server
ajaxRequest.
onreadystatechange = function()
{if(ajaxRequest.readyState == 4)
{// Get the data from the server's response}
}
-
responseText
Returns the response as a string.
Ex :
Create a function that will receive data sent from the server
ajaxRequest.
onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{document.myForm.time.value = ajaxRequest.responseText;}
}
-
responseXML
Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.
-
status
Returns the status as a number (e.g. 404 for "Not Found" and 200 for "OK").
-
statusText
Returns the status as a string (e.g. "Not Found" or "OK").
Ajax Security : Server Side
AJAX-based Web applications use the same serverside security schemes of regular Web applications.
-
You specify authentication, authorization, and data protection requirements in your web.xml file (declarative) or in your program (programatic).
-
AJAX-based Web applications are subject to the same security threats as regular Web applications.
Ajax Security : Client Side-
JavaScript code is visible to a user/hacker. Hacker can use the JavaScript code for inferring server side weaknesses.
-
JavaScript code is downloaded from the server and executed ("eval") at the client and can compromise the client by mal-intended code.
-
Downloaded JavaScript code is constrained by sand-box security model and can be relaxed for signed JavaScript.
Now, i will make one simple application using Ajax. Let's we see the code and the output.
The first step, we make a design form.
<form id="form1" runat="server">
<div>
<div>
Header Company<br>
<asp:Label ID="Label2" runat="server"></asp:Label><br>
</div>
<hr />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" ontextchanged="TextBox1_TextChanged">
</asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="your information will be placed in here">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<hr />
<div>
Footer Company
</div>
</div>
</form>
After we write that code, we describe code behind. Like this:
namespace WebApplication3
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Label2.Text = DateTime.Now.ToString();
}
protected void TextBox1_TextChanged(object sender, EventArgs e)
{
if (TextBox1.Text == "harddisk")
{
Label1.Text = "We have 20 harddisk in our shop.";
}
else if (TextBox1.Text == "monitor")
{
Label1.Text = "We have 15 monitor in our shop.";
}
else if (TextBox1.Text == "printer")
{
Label1.Text = "We have 30 printer in our shop.";
}
else
{
Label1.Text = "Sori, we don't have stock of "+TextBox1.Text;
}
}
}
}
The output from this application is :
On this image, we have refresh all page. The time has changed with the system time.
explain: We use ajax code only in the middle row. On header and footer web, we only use asp.net without Ajax. The advantage of Ajax code, we can submit without press button and we request to the server without refresh all page.
Conclusion
I hope this article can explain you a basic using Ajax. You can change all design and output as you want.
References
- Search Engine
- ASP.NET Resources
- code project
Download Source Code