Ajax进阶

内容：

1.FormData

2.cors

3.Ajax对象的upload

 

Ajax基础：https://www.cnblogs.com/wyb666/p/9387488.html

 

 

 

1.FormData

(1)什么是FormData

FormData 对象的使用：

  • 用一些键值对来模拟一系列表单控件：把form中所有表单元素的name与value组装成一个queryString
  • 异步上传二进制文件

FormData主要用于上传文件

创建FormData对象：

1 let formData = new FormData()

 

(2)FormData的方法

1 set(key, value)              会覆盖
2 append(key, value)        不覆盖
3 get(key)
4 getAll(key)
5 delete(key)
6 forEach

 

 方法使用实例：

1 let data=new FormData()
2 data.set('user', 'wyb')
3 console.log(data.get('user'))       // wyb
4 data.append('user', 'wyb_test')
5 console.log(data.getAll('user'))    // ["wyb", "wyb_test"]

 

(3)FormData使用实例

 1 <!-- author: wyb -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>登陆页面</title>
 8     <script>
 9         let $ = function (sel) {
10             return document.querySelector(sel)
11         }
12 
13         window.onload = function () {
14             let oUser = $('#user')
15             let oPass = $('#pass')
16             let oBtn = $('#btn1')
17 
18             oBtn.onclick = function () {
19                 let data = new FormData
20                 data.set("user", oUser.value)
21                 data.set("pass", oPass.value)
22 
23                 // Ajax:
24                 let oAjax = new XMLHttpRequest()
25 
26                 // GET
27                 /*
28                     let arr = []
29                     data.forEach(function (value, key) {
30                         // console.log(key, value)
31                         arr.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
32                     })
33                     oAjax.open('GET', `http://localhost:8080/api?${arr.join("&")}`, true)
34                     oAjax.send()
35                 */
36 
37                 // POST
38                 oAjax.open('GET', 'http://localhost:8080/api', true)
39                 oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
40                 oAjax.send(data)
41 
42                 oAjax.onreadystatechange = function () {
43                     if(oAjax.readyState === 4){
44                         if(oAjax>=200 && oAjax.status<300 || oAjax.status === 304){
45                             alert('成功')
46                         } else{
47                             alert('失败')
48                         }
49                     }
50                 }
51 
52             }
53             
54         }
55 
56     </script>
57 </head>
58 <body>
59 
60 <input type="text" id="user">
61 <input type="password" id="pass">
62 <input type="button" value="提交" id="btn1">
63 
64 </body>
65 </html>

 

(4)FormData上传文件实例

前端：

 1 <!-- author: wyb -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>上传文件</title>
 8     <script>
 9         let $ = function (sel) {
10             return document.querySelector(sel)
11         }
12 
13         window.onload = function () {
14             let oFile = $('#f1')
15             let oBtn = $('#btn1')
16 
17             oBtn.onclick = function () {
18                 let data = new FormData()
19                 // 拼接文件数据
20                 Array.from(oFile.files).forEach(function (file) {
21                     data.append("f1", file)
22                 })
23 
24                 // Ajax:
25                 let oAjax = new XMLHttpRequest()
26 
27                 // POST
28                 oAjax.open('POST', 'http://localhost:8080/api', true)
29                 oAjax.send(data)
30 
31                 oAjax.onreadystatechange = function () {
32                     if(oAjax.readyState === 4){
33                         if(oAjax>=200 && oAjax.status<300 || oAjax.status === 304){
34                             alert('成功')
35                         } else{
36                             alert('失败')
37                         }
38                     }
39                 }
40 
41             }
42             
43         }
44 
45     </script>
46 </head>
47 <body>
48 
49 <!-- 可以同时上传多个文件 -->
50 上传文件: <input type="file" id="f1" multiple>
51 <input type="button" value="提交" id="btn1">
52 
53 </body>
54 </html>

 

后端(express)：

 1 const express = require('express')          // express主体
 2 const body = require('body-parser')         // 接收普通POST数据
 3 const multer = require('multer')            // 接收文件POST数据
 4 
 5 // create server:
 6 let server = express()
 7 server.listen(8080)
 8 
 9 // 中间件:
10 server.use(body.urlencoded({extended: false}))
11 let multerObj = multer({dest: './upload/'})
12 server.use(multerObj.any())
13 
14 // 处理请求: -> RESTful风格
15 server.post('/api', function (req, res) {
16     if(req.headers['origin']==='null' || req.headers['origin'].startsWith('http://localhost')){
17         res.setHeader('Access-Control-Allow-Origin', '*');
18     }
19 
20     res.send("test get")
21 
22     console.log(req.body);      // 普通POST数据
23     console.log(req.files);     // 文件POST数据
24 })
25 
26 // 设置静态文件路径
27 server.use(express.static('./www/'))

启动服务端后在浏览器输入http://localhost:8080/xxx.html即可访问存储在www文件夹下的文件，然后在此页面中上传文件

 

 

2.cors

(1)什么是跨域

跨域解释：浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了

同源策略：请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同

跨域：在网络中不存在跨域这回事儿——跨域只是浏览器对我们的限制

想实现跨域就要在服务器端进行设置，设置Access-Control-Allow-Origin

 

(2)Access-Control-Allow-Origin

使用方法：Access-Control-Allow-Origin: 域名||*

注：指定某个域名后就可以允许这个通过这个域名来访问，指定*表示允许一切的访问

  • Server：验证headers['origin']认不认识，如果认识=>setHeader('Access-Control-Allow-Origin', '*')
  • Client：不需要做任何事

 

 

3.Ajax对象的upload

(1)使用方法

 1 oAjax.upload.onprogress=function (ev){  // oAjax是Ajax对象
 2   ev.loaded       完成
 3   ev.total        总共
 4 
 5   ev.loaded/ev.total      =>0~1
 6 };
 7 
 8 // 注意:
 9 1.upload必须放在Ajax对象创建之后、send之前
10 2.以前的上传——POST
11   加了upload——OPTIONS、POST
12 3.服务器必须能处理OPTIONS
13   通用服务器——不用担心
14   NodeJS服务——use
15 4.oAjax.onprogress            下载进度
16 oAjax.upload.onprogress     上传进度

 

(2)用upload实现上传进度实例

HTML： 

 1 <!-- 可以同时上传多个文件 -->
 2 <div>
 3     上传文件: <input type="file" id="f1" multiple>
 4     <input type="button" value="提交" id="btn1">
 5 </div>
 6 <!--上传进度: <meter id="m1" value="" min="0" max="100" style="width: 500px;"></meter>-->
 7 上传进度:
 8 <div class="parent">
 9     <div class="child">
10 
11     </div>
12 </div>

CSS：

 1 .parent {
 2     width: 500px;
 3     height: 20px;
 4     border: 1px solid black;
 5 }
 6 
 7 .child {
 8     width: 0;
 9     height: 100%;
10     background: green;
11 }

JavaScript：

 1 let $ = function (sel) {
 2     return document.querySelector(sel)
 3 }
 4 
 5 window.onload = function () {
 6     let oFile = $('#f1')
 7     let oBtn = $('#btn1')
 8 
 9     oBtn.onclick = function () {
10         let data = new FormData()
11         // 拼接文件数据
12         Array.from(oFile.files).forEach(function (file) {
13             data.append("f1", file)
14         })
15 
16         // Ajax:
17         let oAjax = new XMLHttpRequest()
18 
19         oAjax.upload.addEventListener('progress', function (ev) {
20             alert('progress')
21             console.log(ev)
22 
23             // 计算进度
24             let v = 100 * ev.loaded / ev.total + '%'
25             let oChild = document.getElementsByClassName('child')[0];
26 
27             // 设置进度
28             oChild.style.width = v;
29         }, false);
30 
31         // POST
32         oAjax.open('POST', 'http://localhost:8080/api', true)
33         oAjax.send(data)
34     }
35 }

 

posted @ 2018-10-01 17:09  woz333333  阅读(251)  评论(0)  编辑  收藏  举报