AJAX学习:GET请求、POST请求、同步/异步
2019-05-10 本文已影响0人
Merbng
遵循HTTP协议
- 本质上XMLHTTPRequest就是JavaScript在web平台中发送HTTP请求的手段，所以我们发送出去的请求仍然是HTTP请求，同样符合HTTP约定的格式。
var xhr = new XMLHttpRequest();
xhr.open("POST", "./add.php");//设置请求行
xhr.setRequestHeader('Foo', 'Bar');//设置一个请求头
// xhr.setRequestHeader('Content-Type', 'application/x-www-from-urlencoded');
xhr.setRequestHeader('Content-Type', 'application/json');
// xhr.send('key1=value1&key2=value2');//以urlencode方式设置请求体
xhr.send('{"foo":"123"}');//以urlencoded格式设置请求体
onload
var xhr = new XMLHttpRequest();
xhr.open('GET', "time.php");
xhr.send(null);
//不考虑兼容可以这么写，readyState的状态一直是4
//onload是Html5 中提供的 XMLHttpReuqest version 2.0 定义的
xhr.onload = function () {
console.log(this.responseText);
console.log(this.readyState);
}
AJAX发送GET请求并传递参数
- 通常在一次GET请求过程中，参数传递都是通过URL地址中的?参数传递。
var listElement = document.getElementById('list');
//发送请求获取列表数据呈现在页面
var xhr = new XMLHttpRequest();
xhr.open('GET', 'users.php');
xhr.send();
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return;
var data = JSON.parse(this.responseText);
for (i = 0; i < data.length; i++) {
var liElement = document.createElement('li');
liElement.innerHTML = data[i].name;
liElement.id = data[i].id;
liElement.appendChild(liElement);
listElement.append(liElement);
liElement.addEventListener("click", function () {
// 通过AJAX操作获取服务器对应数据的信息
var xhr1 = new XMLHttpRequest();
xhr1.open('GET', 'users.php?id=' + this.id);
xhr1.send();
xhr1.onreadystatechange = function () {
if (this.readyState !== 4) return;
var obj = JSON.parse(this.responseText);
alert(obj.age);
}
})
}
}
AJAX发送POST请求
- POST请求过程中，都是采用请求体承载需要提交的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#loading {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #555;
opacity: .5;
text-align: center;
line-height: 300px;
}
#loading::after {
content: '加载中...';
color: #ff4c60;
}
</style>
</head>
<body>
<div id="loading"></div>
<table border="1">
<tr>
<td>用户名</td>
<td><input type="text" id="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password"></td>
</tr>
<tr>
<td></td>
<td>
<button id="btn">登录</button>
</td>
</tr>
</table>
<script>
var btn = document.getElementById('btn');
// 获取界面上的元素value
var txtUserName = document.getElementById('username');
var txtPassword = document.getElementById('password');
var loading = document.getElementById('loading');
btn.onclick = function () {
loading.style.display = 'block';
var userName = txtUserName.value;
var userPassword = txtPassword.value;
// 通过XHR发生一个POST请求
var xhr = new XMLHttpRequest();
xhr.open('POST', 'login.php');
//如果请求体是urlencoded格式，必须设置这个请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(`username=${userName}&password=${userPassword}`);
// 根据服务端的反馈，做出界面提示
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return;
console.log(this.responseText);
loading.style.display = 'none';
}
}
</script>
</body>
</html>
AJAX 请求 XML 格式的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'xml.php');
xhr.send();
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return;
console.log(this.responseXML);
console.log(this.responseXML.documentElement.children[0].innerHTML);
console.log(this.responseXML.documentElement.getElementsByTagName('name')[0]);
}
</script>
</body>
</html>
同步异步
- xhr.open()方法第三个参数要求传入一个bool值，其作用就是设置此次请求是否采用异步方式执行，默认为true，如果需要同步执行可以通过传递false实现。
一定要在发送请求send()之前注册readystatechange 不管同步或者异步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var xhrAsync = new XMLHttpRequest();
//open 方法的第三个参数是async可以传入一个布尔值，默认为true
xhrAsync.open('GET', 'time.php', true);
console.log('async');
xhrAsync.send();
console.log(xhrAsync.responseText);
console.timeEnd('async');
// 同步模式，ajax操作会有等待的情况
// 区别在于send方法会不会出现等待的情况
var xhrSync = new XMLHttpRequest();
xhrSync.open('GET', 'time.php', false);
console.time('sync');
xhrSync.send();
console.log(xhrSync.responseText);
console.timeEnd('sync');
</script>
</body>
</html>
XMLHttpRequest在老版本浏览器(IE5/6)中有兼容问题，可以通过另一种方式代替
var xhr =window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP')
