Update part of a web page using AJAX

Update part of a web page using AJAX
December 2, 2016 No Comments Uncategorized Vikram Patil

Update Part of a Web Page without reloading whole page

update part of a web page

Asynchronous JavaScript and XML

AJAX stands for Asynchronous JavaScript and XML. It is a client-side web technique, not a programming language. AJAX allows web pages to update parts of a web page, without reloading the whole page. It is use for creating better, faster and more interactive web applications. This application might use XML to transport data, but it is equally common to transport data as plain text or JSON text. Ajax uses HTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.


HTML/CSS – HTML/CSS is website markup language for defining web page layout, such as fonts style and colors.
JavaScript – JavaScript is a client-side scripting language. XMLHttpRequest which is object of JavaScript provides an easy way to retrieve data from web server without having to do full page refresh.
Document Object Model – Document Object Model (DOM) method provides a tree structure as a logical view of web page.
XML – XML is a format for retrieve any type of data. You can use other format such as palin text, JSON (JavaScript Object Notation) to retrieve data.
XMLHttpRequest – XMLHttpRequest object is an API for fetching any text base format data, including XML. All browsers support XMLHttpRequest object to make HTTP requests.
XMLHttpRequest object –
var abc = new XMLHttpRequest();
Working with XMLHttpRequest object:
1. Define instance of this XMLHttpRequest.
2. Create a asynchronous call to a server page, also defining a callback function that will automatically executewhen the server response is received.
3. Callback function getting server response.
4. DOM manipulate received data and added into live page.


XMLHttpRequest object Methods –
1. new XMLHttpRequest() : Creates a new XMLHttpRequest object.
2. abort() : It is used for cancel or abort the current request.
3. getAllResponseHeaders() : The server response with complete set of HTTP headers as a string.
4. getResponseHeader() : Returns the value of the specified HTTP header.
5. open(method,url,async,username,password) : Specifies the Request.
Method: This parameter specifies the HTTP method use to open the connection, such as GET or POST.
url : Specifies the location of the XML file or server-side wes service.
async : This parameter specifies true for asynchronous operation or
false for synchronous operation. If it is true send method returns immediately or it is false then the send method does not returns.
userame : This parameter specifies the name of user for authentication.
password : This parameter specifies the password for authentication.
6. Send() – This method Sends the HTTP request to the server and receives the response.
7. setRequestHeader() – It is specifies the name of the request header to send.

Example:
ajax


XMLHttpRequest object Properties –
1. onreadystatechange: An event handler that fires events when every state change.
2. readyState : readyState property returns the status of the request.
3. responseText: It returns the response as a string. Plain text, HTML, and JSON are all formats that use responseText.
4. responseXML: It returns the response only in a XML format.
5. responseBody: This property is use when XHR object created as a ActiveX component (for IE 5 & 6).
6. status: Server return the HTTP status code using status property.e.q. status code 200 for Ok, 404 for Request not found.
7. statusText: server return HTTP status string Request ok for 200,Request not found for 404.

 

Tags
About The Author

Leave a reply

Your email address will not be published. Required fields are marked *