XMLHttpRequest的使用
XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，可以请求服务器上的数据资源。（jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。）
使用xhr发起GET请求
创建 xhr 对象–>调用 xhr.open() 函数–>调用 xhr.send() 函数–>监听 xhr.onreadystatechange 事件
<body>
<script>
// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数
xhr.open('GET','url')
// 3. 调用 send 函数
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
//判断请求成功
//请求状态：readyState，服务器响应状态：status
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText)
}
}
</script>
</body>
xhr对象的readyState属性
xhr发起带参数的GET请求
在xhr.open 中，为 URL 地址指定参数。具体格式：将英文的‘?’放在url末尾，在加上参数,如果有多个参数，使用’&'符号进行分隔。例如url?id=1&name=lizhi
URL编码与解码
URL 地址中，只允许出现英文相关的字母、标点符号、数字.如果 URL 中需要包含中文这样的字符，则要对中文字符进行编码。简单来说就是使用英文字符去表示非英文字符。
浏览器提供了 URL 编码与解码的 API，分别是：
encodeURI() 编码
decodeURI() 解码
<body>
<script>
var str = '李志'
//将中文编码
var str2 = encodeURI(str)
console.log(str2)
//解码
var str3 = decodeURI('%E6%9D%8E')
console.log(str3)
var str4 = decodeURI('%E5%BF%97')
console.log(str4)
</script>
</body>
输出结果：
使用xhr发起POST请求
创建 xhr 对象–>调用 xhr.open() 函数–>设置 Content-Type 属性（固定写法）–>调用 xhr.send() 函数，同时指定要发送的数据–>监听 xhr.onreadystatechange 事件
<body>
<script>
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数
xhr.open('POST', 'url')
// 3. 设置 Content-Type 属性
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send 函数
xhr.send('参数=值&参数=值&...')
// 5. 监听事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
</script>
数据交换格式
服务器和客户端之间进行数据传输和交换的格式。前端常见的两种数据交换格式分别是XML和JSON
XML（了解）
XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。XML被用来传输和存储数据，是数据的载体。
JSON
JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。JSON 的本质是字符串,它使用文本表示一个 JS 对象或数组的信息。
JSON 是一种轻量级的文本数据交换格式，作用类似于 XML，用于存储和传输数据，但比 XML 更小、更快、更易解析。
JSON包含对象和数组两种结构，相互嵌套可以组成复杂的数据结构。
//对象结构：使用{}括起来；数据结构使用键值对结构：{key:value....},key必须使用英文双引号包裹
//value数据类型可以是数字，字符串，布尔值，null,数组和对象
{
"name": "lizhi",
"age": 22,
"gender": "男",
"address": null,
"hobby": ["吃饭", "睡觉"]
}
//数组结构：使用[]括起来； 数据结构：["java",22,true...]
//数组中数据类型可以是数字，字符串，布尔值，null,数组和对象
[ 100, 200, 300.5 ]
["lizhi","lisa"]
[ true, false, null ]
[ { "name": "lizhi", "age": 22}, { "name": "lisa", "age": 26} ]
[ [ "苹果", "榴莲", "椰子" ], [ 4, 50, 5 ] ]
//属性名和字符串类型必须使用双引号包裹
//不能有单引号表示字符串，不能写注释
JSON和JS对象的互相转换：
（1）JSON–>JS对象，使用JSON.parse()方法，把字符串转换为数据对象的过程，叫做反序列化
（2）JS对象–>JSON，使用JSON.stringify()方法，把数据对象转换为字符串的过程叫做序列化
<body>
<script>
//把json转换为js对象
// var jsonStr = '{"a": "Hello", "b": "world"}'
//console.log(typeof jsonStr)
// var obj = JSON.parse(jsonStr)
// console.log(obj)
//console.log(typeof jsonStr)
// 把js对象转换为json
var obj2 = { a: 'hello', b: 'world', c: false }
var str = JSON.stringify(obj2)
console.log(str)
console.log(typeof str)
</script>
</body>
XMLHttpRequest Level2新特性
旧版XMLHttpRequest缺点是只支持数据传输，无法读取和上传且没有进度显示
新特性：
设置HTTP请求的时限
//设置请求时限
xhr.timeout = 3000
//过了时限，自动停止请求，调用函数：
xhr.ontimeout = function(event){
alert('请求超时！')
}
可以使用FormData对象管理表单数据
// 1. 新建 FormData 对象
var fd = new FormData()
// 2. 为 FormData 添加表单项
fd.append('username', 'lizhi')
fd.append('passward', '123456')
// 3. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 4. 指定请求类型与URL地址
xhr.open('POST', 'url')
// 5. 直接提交 FormData 对象，与提交网页表单的效果一样
xhr.send(fd)
FormData对象也可以获取网页表单的值
// 获取表单元素
var form = document.querySelector('#form1')
// 监听表单元素的 submit 事件
form.addEventListener('submit', function(e) {
e.preventDefault()
// 自动将表单数据填充到 FormData 对象中
var fd = new FormData(form)
var xhr = new XMLHttpRequest()
xhr.open('POST', 'url')
xhr.send(fd)
xhr.onreadystatechange = function() {}
})
可以上传文件
<body>
<input type="file" id="file1" />
<!-- 上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- img来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800" />
<script>
//获取到文件上传按钮
var btnUpload = document.querySelector('#btnUpload')
// 绑定单击事件处理函数
btnUpload.addEventListener('click', function () {
//获取到用户选择的文件列表
//验证是否有上传文件
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件！')
}
var fd = new FormData()
// 把文件添加到 FormData 中
fd.append('avatar', files[0])
var xhr = new XMLHttpRequest()
xhr.open('POST', 'url')
xhr.send(fd)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
if (data.status === 200) {
// 上传成功
document.querySelector('#img').src = 'url' + data.url
} else {
console.log('图片上传失败！' + data.message)
}
}
}
})
</script>
</body>
可以获得数据传输进度的信息
//结合上面传输文件案例添加进度条
//使用Bootstrap渲染进度条关键代码
//需要导入Bootstrap.js和jquery.js
...
<!-- 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>
...
...
// 监听文件上传的进度
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
// 计算出上传的进度
//e.loaded表示已传输字节
//e.total需要传输的总字节
//Math.ceil取整
var procentComplete = Math.ceil((e.loaded / e.total) * 100)
console.log(procentComplete)
// 动态设置进度条
//使用jquery库的方法添加属性
$('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
}
}
xhr.upload.onload = function () {
$('#percent').removeClass().addClass('progress-bar progress-bar-success')
}
补充jquery的两个方法
（1）ajaxStart(callback)
Ajax 请求开始时，执行 ajaxStart 函数。
（2）ajaxStop((callback)
Ajax 请求结束时，执行 ajaxStop 函数。
4519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
