ajax前后端交互
发布时间：2020-12-16 02:44:20 所属栏目：百科 来源：网络整理
导读：目标 1.?理解ajax基本使用 2.?会使用XMLHttpRequest对象实现数据交互 3.?了解onreadystatechange服务器响应信息 4.?会使用FormData对象上传文件 5.?了解upload事件对象 知识要点 ? 1.ajax使用 -?ajax是：??*Ajax*?即“Asynchronous?Javascript?And?XML”（异
|
目标
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常用状态
-?返还数据类型??
??-?服务器返还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> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |