XHR request
The XMLHttpRequest object is used to exchange data with the server.
Send a request to the server
To send a request to the server, we use the open() and send() methods of the XMLHttpRequest object:
xmlhttp.send();
| Method | Description |
|---|---|
| open(method,url,async) | Specify the type of request, URL and whether to process the request asynchronously.
|
| send(string) | Send the request to the server.
|
GET or POST?
Compared to POST, GET is simpler and faster, and works in most cases.
However, please use POST requests in the following situations:
Cache files cannot be used (updating files or databases on the server)
Send a large amount of data to the server (POST has no data limit)
When sending user input containing unknown characters, POST is more stable and reliable than GET
GET request
A simple GET request:
Example
<html><!DOCTYPE html>
<html>
<head>
<script>
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("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
In the above example, you may get cached results.
To avoid this, add a unique ID to the URL:
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
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("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<p>Click the button several times to see if the time changes, or if the file is cached.</p>
<div id="myDiv"></div>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
If you want to send information through the GET method, please add information to the URL:
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
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("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
POST request
A simple POST request:
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
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","/try/ajax/demo_post.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>Run instance»
Click "Run instance " button to view online examples
If you need to POST data like an HTML form, please use setRequestHeader() to add HTTP headers. Then specify the data you want to send in the send() method:
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
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","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>Run Instance»
Click "Run instance" button to view the online instance
| Method | Description |
|---|---|
| setRequestHeader (header,value) | Add HTTP headers to the request.
|
url - File on the server
The url parameter of the open() method is the address of the file on the server:
The file can be any type of file, such as .txt and .xml, or a server script file, such as .asp and .php (the ability to perform tasks on the server before sending back a response).
Async - True or False?
AJAX refers to Asynchronous JavaScript and XML (Asynchronous JavaScript and XML).
If the XMLHttpRequest object is to be used for AJAX, the async parameter of its open() method must be set to true:
For web developers, sending asynchronous requests is a huge improvement. Many tasks performed on the server are quite time consuming. Before AJAX, this could cause the application to hang or stop.
With AJAX, JavaScript does not need to wait for a response from the server, but:
Execute other scripts while waiting for a response from the server
Process the response when the response is ready
Async=true
When using async=true, please specify when the response is ready in the onreadystatechange event Functions executed in the status:
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
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("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
You will learn more about onreadystatechange in later chapters.
Async = false
If you need to use async=false, please change the third parameter in the open() method to false:
xmlhttp.open("GET","test1.txt",false);
We do not It is recommended to use async=false, but for some small requests, it is also possible.
Remember that JavaScript will wait until the server response is ready before continuing execution. If the server is busy or slow, the application hangs or stops.
Note: When you use async=false, please do not write the onreadystatechange function - just put the code after the send() statement:
Example
<html><!DOCTYPE html>
<html>
<head>
<script>
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.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
