Friday, October 24, 2014

Ajax code simplified (and a video)

An HTTP request consists of four parts:
the HTTP request method or "verb" (GET or POST)
the URL being requested
an optional set of request headers, which may include authentication information
an optional request body

The "GET" and "POST" methods are universally supported. "GET" is used for most "regular" requests, and it is appropriate when the URL completely specifies the requested resource, when the request has no side effects on the server, and when the server’s response is cacheable. The "POST" method is what is typically used by HTML forms. The parts of an HTTP request have a specific order: the request method and URL must come first, then the request headers, and finally the request body. XMLHttpRequest implementations generally do not initiate any networking until the send() method is called.

The HTTP response sent by a server has three parts:
a numeric and textual status code that indicates the success or failure of the request (good to check)
a set of response headers (you do not have to use these)
the response body (your information from the server)
 

Below is the code example used in this video lecture

 

 
<!DOCTYPE html>
<html>
<head>

<script>
function loadData()
{
var xhr;
xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if (xhr.status==200 && xmlhttp.readyState==4 )
{document.getElementById("myDiv").innerHTML=xhr.responseText;}
}
xhr.open("GET","ajax_info.txt",true); // or just xhr.open("GET", url);
xhr.send(); // GET requests never have a body, so pass null or omit
}
</script>

</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadData()">Change Content</button>
</body>
</html>
 



XMLHttpRequest Properties


onreadystatechange
An event handler for an event that fires at every state change.
readyState
The readyState property defines the current state of the XMLHttpRequest object.
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 and data received

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.
responseText
Returns the response as a string.
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").

No comments:

Post a Comment