Home > Article > Web Front-end > ajax basics

ajax basics

巴扎黑Original: 2016-11-25 14:45:471197browse

One. ajax is asynchronous JavaScript and XML. Is a technology used to create fast dynamic web pages. By exchanging a small amount of data with the server in the background, the web page can be updated asynchronously, so that partial loading can be performed without reloading the web page.

Two. Creation of objects. XMLHttpRequest is the basis of ajax.

1. Creation syntax: new XMLHttpRequest();

2. Creation of old version: new ActiveXObject("Microsoft.XMLHTTP").

Three. Server request.

open(method,url,async).

Method: represents the request type: GET or POST

url: The location of the file on the server.

async: true (asynchronous request) or false (synchronous request).

send(string).

Send the request to the server.

String: Only used for POST requests. Represents the parameters to be transmitted

four. The server's response.

responseText(): Get response data in string form. For non-XML requests, use the responseText attribute.

responseXML(): Get the corresponding data in XML form.

Five. onreadystatechange event.

Used to perform response-based tasks.

onreadystatechange: Storage function, this function will be called whenever the readyState attribute changes.

readyState: Represents the status of XMLHttpRequest. changes from 0 to 4. 3: The request is being processed

4: The request has been completed and the response is ready.

status: 200: ‘OK’ 404: Page not found.

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","文件的地址",true);  
xmlhttp.send();  
}  
</script>  
</head>  
<body>  
  
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>  
<button type="button" onclick="loadXMLDoc()">修改内容</button>  
  
</body>  
</html>

You need to add the address of the file to get the corresponding content.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript controls hiding and showing contentNext article：JavaScript controls hiding and showing content

See more

ajax basics

Related articles