什么是XMLHttpRequest?
XMLHttpRequest(简称xhr)是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源.jQuery中的Ajax函数,就是基于xhr对象封装出来的.
使用xhr发起GET请求
步骤:
- 创建xhr对象
- 调用xhr.open()函数
- 调用xhr.send()函数
- 监听xhr.onreadystatechange事件
//1. 创建xhr 对象
var xhr=new XMLHttpRequest()
//2. 调用open函数,指定 请求方式与URL地址
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
//3. 调用send函数,发起ajax请求
xhr.send()
//4.监听onreadystatechange事件
xhr.onreadystatechange=function(){
//4.1监听xhr对象的请求状态readyState:与服务器响应的状态 status
if(xhr.readyState===4&&xhr.status===200){
//4.2 打印服务器响应回来的数据
console.log(xhr.responseText)
}
}
xhr对象的readyState属性
XMLHttpRequest 对象的 readyState 属性,用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个:
使用xhr发起带参数的GET请求
使用 xhr 对象发起带参数的 GET 请求时,只需在调用 xhr.open 期间,为 URL 地址指定参数即可:
// ...省略不必要的代码
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
// ...省略不必要的代码
这种在 URL 地址后面拼接的参数,叫做查询字符串。
使用xhr发起POST请求
步骤:
- 创建 xhr 对象
- 调用 xhr.open() 函数
- 设置 Content-Type 属性(固定写法)
- 调用 xhr.send() 函数,同时指定要发送的数据
- 监听 xhr.onreadystatechange 事件
//1. 创建xhr对象
var xhr=new XMLHttpRequest()
//2. 用open()
xhr.open('POST','http://www.liulongbin.top:3006/api/addbook')
//3. 设置Content-Type属性(固定写法)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
//4. 调用send(),同时将数据以查询字符串的形式,提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
//5. 监听onreadystatechange事件
xhr.onreadystatechange=function(){
if(xhr.readyState===4&& xhr.status===200){
console.log(xhr.responseText)
}
}
数据交换格式JSON
概念:JSON就是JavaScript对象和数组的字符串表示法,它使用文本表示一个JS对象或数组的信息,因此,JSON的本质就是字符串.
作用:JSON是一种轻量级的文本数据交换格式,在作用上类似于XML,专门用于存储和传输数据,但是JSON比XML更小,更快,更易解析.
JSON的两种结构
JSON就是用字符串来表示JavaScript的对象和数值,所以JSON中包含对象和数组两种结构,通过这两种结构的相互嵌套,可以表示各种复杂的数据结构.
对象结构
对象结构在JSON中表示为{ }括起来的内容.数据结构为{key:value,key:value,...}的键值对结构,其中,key必须是使用英文的双引号包裹的字符串,value的数据类型可以是数字,字符串,布尔值,null,数组,对象6种类型.
{
"name": "zs",
"age": 20,
"gender": "男",
"address": null,
"hobby": ["吃饭", "睡觉", "打豆豆"]
}
数组结构
数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ "java", "javascript", 30, true … ] 。
数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
[ "java", "python", "php" ]
[ 100, 200, 300.5 ]
[ true, false, null ]
[ { "name": "zs", "age": 20}, { "name": "ls", "age": 30} ]
[ [ "苹果", "榴莲", "椰子" ], [ 4, 50, 5 ] ]
JSON语法注意事项
- 属性名必须使用双引号包裹
- 字符串类型的值必须使用双引号包裹
- JSON 中不允许使用单引号表示字符串
- JSON中不能写注释
- JSON的最外层必须是对象或数组格式
- 不能使用undefined或函数作为JSON的值
JSON的作用:在计算机与网络之间存储和传输数据
JSON的本质:用字符串来表示JavaScript对象数据或数组数据
JSON和JS对象的互转
要实现从 JSON 字符串转换为 JS 对象,使用 JSON.parse() 方法:
var obj = JSON.parse('{"a": "Hello", "b": "World"}')
//结果是 {a: 'Hello', b: 'World'}
要实现从 JS 对象转换为 JSON 字符串,使用 JSON.stringify() 方法
var json = JSON.stringify({a: 'Hello', b: 'World'})
//结果是 '{"a": "Hello", "b": "World"}'
XMLHttpRequest Level2的新特性
- 可以设置 HTTP 请求的时限
- 可以使用 FormData 对象管理表单数据
- 可以上传文件
- 可以获得数据传输的进度信息
设置HTTP请求时限
有时,Ajax 操作很耗时,而且无法预知要花多少时间。如果网速很慢,用户可能要等很久。新版本的 XMLHttpRequest 对象,增加了 timeout 属性,可以设置 HTTP 请求的时限:
xhr.timeout = 3000
上面的语句,将最长等待时间设为 3000 毫秒。过了这个时限,就自动停止HTTP请求。与之配套的还有一个timeout 事件,用来指定回调函数:
xhr.ontimeout = function(event){
alert('请求超时!')
}
FormData对象管理表单数据
Ajax操作往往用来提交表单数据.为了方便表单处理,HTML5 新增了一个FormData 对象,可以模拟表单操作:
//1. 新建FormData 对象
var fd = new FormData()
//2. 为FormData 添加表单项
fd.append('uname','zs')
fd.append('upwd','123456')
//3. 创建XHR对象
var xhr = new XMLHttpRequest()
//4. 指定请求类型与URL地址
xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')
//5. 直接提交FormData对象,这与提交网页表单的效果,完全一样
xhr.send(fd)
FormData对象也可以用来获取网页表单的值,示例代码如下:
//获取表单元素
var form=document.querySelector('#form1')
//监听表单元素的submit事件
form.addEventListener('submit',function(e){
e.preventDefault()
//根据form表单创建FormData 对象,会自动将表单数据填充到FormData对象中
var fd = new FormData(form)
var xhr= new XMLHttpRequest()
xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange=function(){}
})
上传文件
<link rel="stylesheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js"></script>
</head>
<body>
<!-- 1. 文件选择框 -->
<input type="file" id="file1" />
<!-- 2. 上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<!-- bootstrap 中的进度条 -->
<div class="progress" style="width: 500px; margin: 15px 10px;">
<div
class="progress-bar progress-bar-striped active"
style="width: 0%;"
id="percent"
>
0%
</div>
</div>
<br />
<!-- 3. img 标签,来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800" />
<script>
let btnUpload = document.querySelector("#btnUpload");
btnUpload.addEventListener("click", function () {
let files = document.querySelector("#file1").files;
if (files.length <= 0) return alert("请选择需要上传的图片");
let fd = new FormData();
fd.append("avatar", files[0]);
let xhr = new XMLHttpRequest();
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
// 计算出上传的进度
var procentComplete = Math.ceil((e.loaded / e.total) * 100);
console.log(procentComplete);
// 动态设置进度条
$("#percent")
.attr("style", "width: " + procentComplete + "%;")
.html(procentComplete + "%");
}
};
xhr.upload.onload = function () {
$("#percent")
.removeClass()
.addClass("progress-bar progress-bar-success");
};
xhr.open("post","http://www.escook.cn:3006/api/upload/avatar");
xhr.send(fd);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseText);
let data = JSON.parse(xhr.responseText);
if (data.status !== 200) return alert(data.message);
document.querySelector("#img").src =
"http://www.escook.cn:3006" + data.url;
}
};
});
</script>
封装Ajax
const $ = {
resolveData: function (obj) {
if (obj && typeof obj == "object") {
let arr = [];
for (let key in obj) {
let str = key + "=" + obj[key];
arr.push(str);
}
return arr.join("&");
}
},
ajax: function (options) {
let type = options.type || "GET";
let url = options.url || location.href;
let data = this.resolveData(options.data);
let success = options.success;
//1. 创建xhr对象
let xhr = new XMLHttpRequest();
//如果你是get请求
if (type.toUpperCase() === "GET") {
url = url + "?" + data;
data = null;
}
//2.设置open
xhr.open(type, url);
//如果你是post请求
if (type.toUpperCase() === "POST") {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
//3.调用send
xhr.send(data);
//4.监听事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status == 200) {
// 将字符串转化为对象
let res = JSON.parse(xhr.responseText);
//将数据暴露出去
success && success(res);
}
};
},
};