Implementing Ajax with XMLHttpRequest
XMLHttpRequest was first implemented in IE5 in the form of ActiveX components. Non-W3C standard.
There aren't many XMLHttpRequest objects in development. This small case is just a demonstration for easy understanding.
1.XMLHttpRequest method:
Request:
(1) open ("method","url") description: establish a call to the server. Method parameters can be GET, POST or PUT, and URL parameters can be relative or absolute URLs.
(2) send(content) description: send a request to the server.
2. The XMLHttpRequest attribute:
To receive the data sent back by the server (receive the response), the following attributes are needed:
(1) Every state change in onreadystatechange triggers this event handler, usually calling a JavaScript function.
(2) The status of the readystate request has five preferable values: 0 = uninitialized. 1 = loading. 2 = loading. 3 = interaction. 4 = completion
(3) The response of the responseText server represents a string.
(4) The response of the responseXML server is expressed as XML. This object can be interpreted as a DOM object.
(5) HTTP status code of status server (200 corresponds to OK,404 corresponds to NotFount, etc.)
Each response sent by the server also carries the header information, and the three status codes are the most important header information of the server response.
Common state codes and their implications:
(1) 404 failed to find the page (not found)
(2) 403 forbidden access
(3) 500 internal service error
(4) 200 All OK
(5) 304 has not been modified
In the XMLHttpRequest object, the status codes sent by the server are stored in the status attribute. By comparing this value with 200 or 304, you can ensure that the server has sent a successful response.
(6) Response text of statusText HTTP status code (OK or NoTFount, etc.)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
//1. Get a node and add onclick response function to it
document.getElementsByTagName("a")[0].onclick = function(){
//3. Create an XMLHttpRequest object
var request = new XMLHttpRequest();
//4. Prepare to send request data: url
var method = "GET";
//Add a timestamp after the URL to disable browser caching
var url = this.href + "?time"+new Date();
//5. Call the open method of the XMLHttpRequest object
request.open(method,url);
//Using POST requests to send data to the server, you need to set the header of "ContentType" to "application/x-www-form-urlencoded".
//It tells the server that the data is being sent, and that the data has been encoded in the URL. This method can only be invoked after open ing.
//request.setRequestHeader("ContentType","application/x-www-form-urlencoded");
//6. send method calling XMLHttpRequest object
request.send("name='panlang'");
//7. Add onreadystatechange response function to XMLHttpRequest object
request.onreadystatechange = function(){
alert(request.readyState);//View the response status: 2, 3, 4
//8. Determine whether the response is complete: When the readyState attribute of the XMLHttpRequest object is 4
if(request.readyState == 4){
//9. In judging whether the response is available: The attribute value of the XMLHttpRequest object status is 200
if(request.status == 200||request.status == 304){
//10. Print the response: responseText
alert(request.responseText);
}
}
}
//2. Cancel the default behavior of a node (if hyperlinks)
return false;
}
}
</script>
</head>
<body>
<a href="helloAjax.txt">helloAjax</a>
</body>
</html>Communicating with the server using the XMLHttpRequest instance includes the following three key parts:
(1) onreadystatechange event handler
(2) open method
(3) send method
onreadystatechange:
The event handler is triggered by the server, not the user.
During Ajax execution, the server notifies the client of the current communication status. This is achieved by updating the readystate of the XMLHttpRequest object. Changing the readystate property is a way for the server to connect to the client. Each readystate change triggers the onreadystatechange function.