ajax basics-JS Tutorial-php.cn

ajax basics

巴扎黑

Release： 2016-11-25 14:45:47

Original

1205 people have browsed it

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>

Copy after login

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