Ajax (Asynchronous JavaScript and XML)
即用JavaScript执行异步网络请求，可以在无需加载整个页面的情况下能够更新部分网页的技术
-
XMLHttpRequest对象
用于在后台与服务器交换数据
- 创建对象
var xmlHttp;
//大部分浏览器能够支持XMLHttpRequest
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
//旧版本IE使用ActiveXObject
else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
- 向服务器发送请求
方法：
- open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步） - send(string) ：将请求发送到服务器。
string：仅用于 POST 请求
必须使用POST情况：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
- 获取服务器响应
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
- onreadystatechange事件
XMLHttpRequest对象三个属性
<div id="name"><p>今天是个好日子阿</p></div>
<button id="btn">点击改变网页信息</button>
<script>
document.getElementById("btn").onclick = ()=>{
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState ===4 && xmlHttp.status === 200){
document.getElementById("name").innerHTML = xmlHttp.responseText;
}
};
xmlHttp.open("GET","/code/project/ajax/test/aaa.txt",true);
xmlHttp.send();
};
</script>
