一.使用Ajax
// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest();
// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('GET', 'http://127.0.0.1:3000/time');
// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null);
// 4. 当接收到数据的时候
xhr.onload = function () {
// 通过 xhr 的 responseText 获取到响应的响应体
console.log(this.responseText)
};
二.常用的两种请求方式
GET方式：
浏览器地址栏输入URL，按回车
点击a标签，跳转到另一个页面
method属性等于get的表单提交（注意，如果表单没有指定method，则method的值默认为get）
通过Ajax发送的GET方式的请求
open(‘请求方式’，‘请求地址’)；
POST方式：
method属性等于post的表单提交
通过Ajax发送的POST方式的请求
Ajax发送post请求
<body>
<input type="button" id="btn" value="请求">
<script>
document.getElementById('btn').onclick = function(){
// 1.实例化
var xhr = new XMLHttpRequest();
// 2.设置请求的方式和URL
xhr.open('POST','/query-post');
// 3. 设置header头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 4.发送请求
xhr.send('id=123&name=zhangsan&age=10');
// 5.当请求响应结束时，获取服务器响应信息
xhr.onload = function(){
console.log(xhr.responseText)
}
}
</script>
</body>
验证用户名案例：
<body>
<input type="text" id="txt_name">
<span id="msg"></span>
<script>
document.getElementById('txt_name').onblur = function (){
//0. 获取输入的内容
var n = this.value;
// 1.实例化
var xhr = new XMLHttpRequest();
// 2.设置方法和URL
xhr.open('POST','/checkUser');
// 3.设置header
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 4.发送请求
xhr.send('username=' + n);
// 5。当请求响应过程结束，获取服务器返回的内容
xhr.onload = function (){
var result = xhr.responseText;
if(result === 'true'){
document.getElementById('msg').innerHTML = '<font color="red">sorry,该用户已被注册</font>';
}
else{
document.getElementById('msg').innerHTML = '<font color="green">用户名可用</font>'
}
}
}
</script>
</body>
软件app-win中封装好的接口列表
请求方式 接口地址 参数 返回值
GET /time 时间戳 [string]
GET /query-get 任意 发送给服务器的参数 [string]
POST /query-post 任意 提交给服务器的数据 [string]
POST /checkUser username:[string] true或false
GET /big-data 返回一百万次时间戳 [string]
GET /getMsg 返回所有留言[JSON]
POST /addMsg name:[string ]<br />
content:[string] 添加成功：true<br />添加失败：false
POST /fd FormData对象 提交给服务器的数据 [JSON]
AJAX 进阶
在通过Ajax向服务器发送请求的过程中，XMLHttpRequest对象的状态会发生多次变化，由于readystatechange
事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次。
xhr 对象的状态
有5种
用readyState属性表示
0/1/2/3/4 4响应体下载完成，可以直接使用
