AJAXSummary

Introduction

AJAX stands for "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), which refers to a web development technology for creating interactive web applications.

All modern browsers support the XMLHttpRequest object (IE5 and IE6 use ActiveXObject).

XMLHttpRequest is used to exchange data with the server behind the scenes. This means that parts of a page can be updated without reloading the entire page.

Example of a GET request

<html>
<head>
<script type="text/javascript">
// This function will be triggered when the mouse is clicked
function loadXMLDoc ()
{
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
  xmlhttp=new XMLHttpRequest();
  }
else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//Register a callback function, the javascript function registered on this property will be called when readyState changes
xmlhttp.onreadystatechange=function() {
  //state==4 indicates that the response data reception is completed
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
//Interact with the specified http server, true is an asynchronous request
xmlhttp.open("GET","/ajax/demo_get.asp",true);
//Send the request, if it is asynchronous, return immediately
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

POST request

<html>
<head>
<script type="text/javascript">
function loadXMLDoc ()
{
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
 }
else {
// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   }
}
xmlhttp.open("POST","/ajax/demo_post.asp",true);
//add custom request header
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>

Introduction to XMLHttpRequest attributes

Attributes	illustrate
readyState	Indicates the status of the XMLHttpRequest object: 0: Not initialized. The object has been created and open is not called; 1: The open method is successfully called, but the Sendf method is not called; 2: The send method has been called and has not yet started to receive data; 3: Data is being accepted. Http response header information has been accepted, but has not been received; 4: Complete, that is, the response data acceptance is completed.
Onreadystatechange	Event trigger for requesting state change (when readyState changes, the javascript function registered on this property will be called).
responseText	The text content of the server response
responseXML	The DOM object corresponding to the XML content of the server response
Status	The http status code returned by the server. 200 means "success", 404 means "not found", 500 means "server internal error", etc.
statusText	The server returns textual information about the status.

Function description

method	illustrate
Open(string method,string url,boolean asynch, String username,string password)	指定和服务器端交互的HTTP方法，URL地址，即其他请求信息； Method:表示http请求方法，一般使用"GET","POST". url：表示请求的服务器的地址； asynch：表示是否采用异步方法，true为异步，false为同步；后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。
Send(content)	向服务器发出请求，如果采用异步方式，该方法会立即返回。 content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。
SetRequestHeader(String header,String Value)	设置HTTP请求中的指定头部header的值为value. 此方法需在open方法以后调用，一般在post方式中使用。
getAllResponseHeaders()	返回包含Http的所有响应头信息，其中相应头包括Content-length,date,uri等内容。返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔！
getResponseHeader(String header)	返回HTTP响应头中指定的键名header对应的值
Abort()	停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

参考

AJAX核心--XMLHttpRequest对象

Guess you like