目标
1. 理解ajax基本使用
2. 会使用XMLHttpRequest对象实现数据交互
3. 了解onreadystatechange服务器响应信息
4. 会使用FormData对象上传文件
5. 了解upload事件对象
知识要点
1.ajax使用
- ajax是： *Ajax* 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）
- 新建XMLHttpRequest对象；
```js
let xhr = new XMLHttpRequest();
```
- 配置请求参数
```js
xhr.open("get","/checkUser",true); //true是异步，false是同步
```
- 接收返还值
```js
xhr.onload = function(){
let res = JSON.parse(xhr.responseText);
}
```
- 发送服务器
```
xhr.send();
```
## 针对ajax的详细解释
- get注意点
- get通过parmas传参
- get和querystring的问题,通过url传参
- post注意点
- 发送数据时候需要设置http正文头格式；
```js
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //默认编码
xhr.setRequestHeader("Content-type","multipart/form-data"); //二进制编码
xhr.setRequestHeader("Content-type","application/json"); //json编码
```
- 获取头部信息；
- getAllResponseHeaders 或者是getResponseHeader ；
## onreadystatechange
onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。
readyState：存有服务器响应的状态信息。
- 0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
- 1: 服务器连接已建立（`open`方法已经被调用）
- 2: 请求已接收（`send`方法已经被调用，并且头部和状态已经可获得）
- 3: 请求处理中（下载中，`responseText` 属性已经包含部分数据）
- 4: 请求已完成，且响应已就绪（下载操作已完成）
status常用状态
|
HTTP状态码 |
描述 |
|
100 |
继续。继续响应剩余部分，进行提交请求 |
|
200 |
成功 |
|
301 |
永久移动。请求资源永久移动到新位置 |
|
302 |
临时移动。请求资源零时移动到新位置 |
|
304 |
未修改。请求资源对比上次未被修改，响应中不包含资源内容 |
|
401 |
未授权，需要身份验证 |
|
403 |
禁止。请求被拒绝 |
|
404 |
未找到，服务器未找到需要资源 |
|
500 |
服务器内部错误。服务器遇到错误，无法完成请求 |
|
503 |
服务器不可用。临时服务过载，无法处理请求 |
- 返还数据类型
- 服务器返还json数据
```js
xhr.responseText //来获取
```
- 服务器返还xml数据
```js
xhr.responseXML //获取值
```
- 重写response里的content-type内容
- xhr.overrideMimeType(‘text/xml; charset = utf-8‘)
- 同步及异步ajax；
- 设置true和false区别；
ajax代码封装
function ajax(options) {
let opts = Object.assign({
url: "",
method: "get",
data: "",
headers:{
"content-type":"application/x-www-form-urlencoded",
},
success(res) {}
}, options)
let xhr = new XMLHttpRequest();
if(opts.method==="get"){
console.log(o2u(opts.data))
// data: {
// hello: "你好",
// height: "178cm"
// }
// hello=还好&height=178cm
opts.url = opts.url+"?"+o2u(opts.data);
}
xhr.open(opts.method,opts.url,true);
// 设置头部
for(let key in opts.headers){
xhr.setRequestHeader(key,opts.headers[key]);
}
let sendData;
switch(opts.headers[‘content-type‘]){
case ‘application/x-www-form-urlencoded‘:
sendData = o2u(opts.data);
break;
case ‘application/json‘:
sendData = JSON.stringify(opts.data);
break;
}
xhr.onload = function(){
opts.success(JSON.parse(xhr.responseText));
}
if(opts.method=="get"){
xhr.send();
}else{
xhr.send(sendData);
}
function o2u(obj){
let keys = Object.keys(obj);
let values = Object.values(obj);
// hello=你好;
// height=178cm
return keys.map((v,k)=>{
return `${v}=${values[k]}`;
}).join("&");
}
}
2.利用FormData来实现文件上传
- 创建FormData对象
- 监控上传进度
upload 事件
- onloadstart 上传开始
- onprogress 数据传输进行中
- evt.total ：需要传输的总大小；
- evt.loaded :当前上传的文件大小；
- onabort 上传操作终止
- onerror 上传失败
- onload 上传成功
- onloadend 上传完成（不论成功与否）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" class="myfile" />
<button>点击我上传文件</button>
</body>
<script>
document.querySelector("button").onclick = function(){
let file = document.querySelector(".myfile").files[0];
// console.log(files);
let form = new FormData();
form.append("img",file);
form.append("name","张三");
let xhr = new XMLHttpRequest();
xhr.open("post","/upload",true);
xhr.onload = function(){
console.log(xhr.responseText);
}
xhr.send(form);
}
</script>
</html>
原文地址：https://www.cnblogs.com/supermanGuo/p/11496849.html