Ajax Programming Services, Ajax Development, Ajax Developers
AJAX Implementation
What is AJAX?
Ajax (Asynchronous JavaScript And XML) is a group of inter-related web development techniques used for creating interactive web applications. A primary characteristic is the increased responsiveness and interactivity of web pages achieved by exchanging small amounts of data with the server "behind the scenes" so that entire web pages do not have to be reloaded each time there is a need to fetch data from the server. This is intended to increase the web page's interactivity, speed, functionality and usability.
Ajax programming is a way of developing Web applications that combines:
- XHTML and CSS standards based presentation
- Interaction with the page through the DOM
- Data interchange with XML and XSLT
- Asynchronous data retrieval with XMLHttpRequest
- JavaScript to tie it all together
In the traditional Web application, the interaction between the customer and the server goes like this:
- Customer accesses Web application
- Server processes request and sends data to the browser while the customer waits
- Customer clicks on a link or interacts with the application
- Server processes request and sends data back to the browser while the customer waits
- etc....
There is a lot of customer waiting.
Ajax Acts as an Intermediary
The Ajax engine works within the Web browser (through JavaScript and the DOM) to render the Web application and handle any requests that the customer might have of the Web server. The beauty of it is that because the Ajax engine is handling the requests, it can hold most information in the engine itself, while allowing the interaction with the application and the customer to happen asynchronously and independently of any interaction with the server.
Asynchronous
This is the key. In standard Web applications, the interaction between the customer and the server is synchronous. This means that one has to happen after the other. If a customer clicks a link, the request is sent to the server, which then sends the results back.
With Ajax programming, the JavaScript that is loaded when the page loads handles most of the basic tasks such as data validation and manipulation, as well as display rendering the Ajax engine handles without a trip to the server. At the same time that it is making display changes for the customer, it is sending data back and forth to the server. But the data transfer is not dependent upon actions of the customer.
Why use AJAX?
- The interface is much more responsive, as explained before, because only a small part of the page is transferred at a time. The user has the feeling that changes are instantaneous.
- In a classic web application, when the web server sends a web page to the browser, it can use multiple connection threads to speed up delivery. However, this happens for content only – what is between the <body> tags. All script and CSS files linked in the page's <head> section are transferred using only one connection thread, which diminishes performance. With AJAX Programming, you only have to load the basic scripts and CSS files, and request the rest as content, through multiple connections.
- Waiting time is reduced – when the visitor submits a form, they no longer have to wait for the entire page to be rebuilt and re-transmitted by the server. Instead, only the relevant content changes, and in non-critical cases, the visitor can still work while the data is being submitted.
- If a page section encounters an error, other sections are not affected (if not logically linked) and the data already entered by the user is not lost. This way, the application fails graciously, without causing head-aches for the users.
- Traffic to and from the server is reduced considerably – because you do not have to send the entire page content (CSS, images, static sections), the bandwidth usage is most likely to decrease.
Code Snippet
Javascript:
//
//Call the server side function from the client end script
if (options == "" || options == null)
{
var response = forms_frmPivot.GetChoiceOptions(datasetId.value,questionId);
optionsArray[index] = response.value;
}
else
{
optionsArray[index] = options;
}
var optionsCountProcessArr = new Array();
optionsCountProcessArr = response.value.split("~");
C#:
[AjaxPro.AjaxMethod()]
public string GetChoiceOptions(string datasetId, string questionId)
{
QuestionMaintenance questMaint = new QuestionMaintenance();
Basedata.Questions question = new Basedata.Questions();
question.ProjectID = int.Parse(datasetId);
question.QuestionID = int.Parse(questionId);
DataTable objDataTable = questMaint.GetAllOption(question);
string options = "";
for (int index = 0; index < objDataTable.Rows.Count; index++)
{
options += objDataTable.Rows[index]["Description"].ToString() + "~";
}
return options;
}