AJAX:Asynchronous JavaScript and XML,意思是用JavaScript执行异步网络请求。
现代浏览器上,ajax的实现主要依靠XMLHttpRequest 对象,该对象用于和服务器交换数据
1、XMLHttpRequest对象有 open(“请求类型”, “请求文件在服务器上的位置”,是否异步) 和 send() 方法。
(1)对于get请求可以通过向URL添加唯一的ID,来避免首先获取缓存结果。
(2)对于post请求:使用setRequestHeader()添加HTTP头,然后在send()方法中规定发送数据:
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
2、XMLHttpRequest对象的 responseText 和 responseXML 属性来处理响应数据。
3、XMLHttpRequest 提供 onreadystatechange() 方法、readyState 属性、status 属性来监听响应状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AJAX</title>
</head>
<body>
<div id="myDiv"><h2>使用AJAX修改文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
xmlhttp = new XMLHttpRequest();
} else {
// 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/demo_get.php?t=" + Math.random(), true);
xmlhttp.send();
}
</script>
</html>
<script>
参考:廖雪峰官网AJAX