使用XMLHttpRequest（XHR）更新部分网页内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
</head>
<body>
<select style="margin: 30px 0 0 100px">
<option value="Red">红色</option>
<option value="Grey">灰色</option>
</select>
<p style="margin: 50px 0 0 100px;width: 200px">文本框</p>
<script>
//获取菜单和段落元素
var select = document.querySelector('select');
var para = document.querySelector('p');
//当菜单选项变更时调用方法
select.onchange = function(){
var url = select.value + '.txt';
display(url);
}
function display(url){
var request = new XMLHttpRequest(); //声明一个XHR对象变量
request.open('GET',url); //open方法：初始化一个请求
request.responseType = 'text'; //responseType属性:返回响应数据的类型
request.send(); //send方法：发送Http请求
}
request.onload = function(){
para.textContent = request.response; //response属性：返回响应的数据
}
// responseType 要在调用 open() 初始化请求之后调用， 并且要在调用 send() 发送请求到服务器之前调用。
</script>
</body>
</html>步骤：
- 创建XHR对象
- open()方法指定获取的资源
- responseType属性设置获取资源的类型
- send()方法发送Http请求
- response属性获得返回的资源
