HTML5权威指南 13.扩展的XMLHttpRequest API

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <script type="text/javascript">
 8         window.indexedDB =window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 9         window.IDBTransaction=window.IDBTransaction||window.webkitIDBTransaction || window.msIDBTransaction;
10         window.IDBKeyRange =window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
11         window.IDBCursor=window.IDBCursor||window.webkitIDBCursor || window.msIDBCursor;
12         window.URL=window.URL||window.webkitURL;
13         var dbName='imgDB';//数据库名
14         var dbVersion =20170829;//版本号
15         var idb;
16         function init(){
17             var dbConnect=indexedDB.open(dbName,dbVersion);//连接数据库
18             dbConnect.onsuccess=function(e){//连接成功
19                 idb=e.target.result;//获取数据库
20             };
21             dbConnect.onerror=function(){
22                 alert("数据库连接失败");
23             }
24             dbConnect.onupgradeneeded=function(e){
25                 idb=e.target.result;
26                 var tx=e.target.transaction;
27                 tx.onabort=function(e){
28                     alert("对象仓库创建失败");
29                 }
30                 var name="img";
31                 var optionalParameters={
32                     keyPath:"id",
33                     autoIncrement:true
34                 };
35                 var store=idb.createObjectStore(name,optionalParameters);
36                 alert("对象创建仓库成功");
37             }
38         }
39         
40         function downloadPic(){
41             var xhr=new XMLHttpRequest();
42             xhr.open("GET","s1.jpg",true);
43             xhr.responseType="arraybuffer";
44             xhr.onload=function(e){
45                 if(this.status==200){
46                     var bb=new Blob([this.response]);
47                     var reader=new FileReader();
48                     reader.readAsDataURL(bb);
49                     reader.onload=function(f){
50                         var result=document.getElementById("result");
51                         //在IndexDB数据库中保存二进制数据
52                         var tx=idb.transaction(['img'],"readwrite");
53                         tx.oncomplete=function(){alert("保存数据成功")}
54                         tx.onabort=function(){alert("保存数据失败")}
55                         var store=tx.objectStore("img");
56                         var value={
57                             img:this.result
58                         }
59                         store.put(value);
60                     }
61                 }
62             };
63             xhr.send();
64         }
65         function showPic(){
66             var tx=idb.transaction(["img"],"readonly");
67             var store=tx.objectStore("img");
68             var req=store.get(1);
69             req.onsuccess=function(){
70                 if(this.result==undefined){
71                     alert("没有符合条件的数据")
72                 }else{
73                     var ing=document.createElement("img");
74                     img.src=this.result.img;
75                     document.body.appendChild(img);
76                 }
77             }
78             req.onerror=function(){
79                 alert("获取数据失败");
80             }
81             
82         }
83     </script>
84 </head>
85 
86 <body >
87 
88 </body>
89 
90 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <script type="text/javascript">
 8             function sendText() {
 9                 var txt = document.getElementById("text1").value;
10                 var xhr = new XMLHttpRequest();
11                 xhr.open("POST", "test/test", true);
12                 xhr.responseType = "text";
13                 xhr.onload = function(e) {
14                     if(this.state == 200) {
15                         document.getElementById("result").innerHTML = this.response;
16                     }
17                 }
18                 xhr.send(txt);
19             }
20         </script>
21     </head>
22 
23     <body>
24         <h1>使用XMLHttpRequest对象向服务器发送字符串</h1>
25         <form>
26             <input type="text" name="" id="text1" value="" />
27             <input type="button" value="发送数据" onclick="sendText();" />
28 
29         </form>
30         <output id="result"></output>
31     </body>
32 
33 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <script type="text/javascript">
 8             function sendForm() {
 9                 var form = document.getElementById("form1");
10                 var formData=new FormData(form);
11                 formData.append("add_data","测试");
12                 var xhr = new XMLHttpRequest();
13                 xhr.open("POST", "test/test", true);
14                 xhr.responseType = "text";
15                 xhr.onload = function(e) {
16                     if(this.state == 200) {
17                         document.getElementById("result").innerHTML = this.response;
18                     }
19                 }
20                 xhr.send(formData);
21             }
22         </script>
23     </head>
24 
25     <body>
26         <h1>使用XMLHttpRequest对象向服务器发送字符串</h1>
27         <form id="form1">
28             <input type="text" name="name" placeholder="姓名"  /><br/>
29             <input type="text" name="age"  placeholder="年龄" /><br/>
30             <input type="button" value="发送数据" onclick="sendForm();" />
31 
32         </form>
33         <output id="result"></output>
34     </body>
35 
36 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <script type="text/javascript">
 8             function uploadFile() {
 9                 var formData=new FormData();
10                 var files = document.getElementById("file1").files;
11                 for (var i = 0; i < files.length; i++) {
12                     var file=files[i];
13                     formData.append("myfile[]",file);
14                 }
15                 var xhr = new XMLHttpRequest();
16                 xhr.open("POST", "test/test", true);
17                 xhr.responseType = "text";
18                 xhr.onload = function(e) {
19                     if(this.state == 200) {
20                         document.getElementById("result").innerHTML = this.response;
21                     }
22                 }
23                 xhr.send(formData);
24             }
25         </script>
26     </head>
27 
28     <body>
29         <h1>使用XMLHttpRequest对象向服务器发送字符串</h1>
30         <form id="form1" enctype="multipart/form-data">
31             请选择文件
32             <input type="file" name="file1" id="file1" multiple="multiple" /><br />
33             <input type="button" value="上传文件" onclick="uploadFile();" />
34 
35         </form>
36         <output id="result"></output>
37     </body>
38 
39 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <script type="text/javascript">
 8             window.URL = window.URL || window.webkitURL;
 9 
10             function uploadDocument() {
11                 var bb = new Blob([document.documentElement.outerHTML]);
12                 var xhr = new XMLHttpRequest();
13                 xhr.open("POST", "test/test?fileName=" + getFileName(), true);
14                 var progressBar = document.getElementById("progress");
15 
16                 xhr.upload.onprogress = function(e) {
17                     if(e.lengthComputable) {
18                         progressBar.value = (e.loaded / e.total) * 100;
19                         document.getElementById("result").innerHTML = "已完成进度:" + progressBar.value + "%";
20                     }
21                 }
22                 xhr.send(bb);
23             }
24             //获取当前文件的文件名
25             function getFileName() {
26                 var url=window.location.href;
27                 var pos=url.lastIndexOf("\");
28                 if(pos==-1)        //pos==-1 表示为本地文件
29                     pos=url.lastIndexOf("/");//本地文件路径分割符"/"
30                 var fileName=url.substring(pos+1);//从Url中获取文件名
31                 return fileName;
32                     
33             }
34         </script>
35     </head>
36 
37     <body>
38         <h1>像服务端发送Blob对象</h1>
39         <input type="button" value="复制页面文件" onclick="uploadDocument();" />
40         <progress min="0" max="100" value="0" id="progress"></progress>
41         <output id="result"></output>
42     </body>
43 
44 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <script type="text/javascript">
 8             function postArrayBuffer() {
 9                 var check = document.getElementsByName("check");
10                 var tmpArray = new Array();
11                 for(var i = 0; i < check.length; i++) {
12                     if(check[i].checked)
13                         tmpArray.push(i);
14                 }
15                 var buffer = new ArrayBuffer(tmpArray.length);
16                 var bytearray = new Int8Array(buffer);
17                 for(var i = 0; i < tmpArray.length; i++) {
18                     bytearray[i] = tmpArray[i];
19                 }
20                 var xhr = new XMLHttpRequest();
21                 xhr.open("POST", "putData/test", true);
22                 xhr.send(buffer);
23             }
24         </script>
25     </head>
26 
27     <body>
28         <input type="button" name="" onclick="postArrayBuffer()" id="" value="提交" />
29         <input type="checkbox" name="check" />数据1<br/>
30         <input type="checkbox" name="check" />数据2<br/>
31         <input type="checkbox" name="check" />数据3<br/>
32         <input type="checkbox" name="check" />数据4<br/>
33         <input type="checkbox" name="check" />数据5<br/>
34         <input type="checkbox" name="check" />数据6<br/>
35         <input type="checkbox" name="check" />数据7<br/>
36         <input type="checkbox" name="check" />数据8<br/>
37         <input type="checkbox" name="check" />数据9<br/>
38         <input type="checkbox" name="check" />数据10
39     </body>
40 
41 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <script type="text/javascript">
 8             function getArrayBuffer() {
 9                 var check = document.getElementsByName("check");
10                 var xhr = new XMLHttpRequest();
11                 xhr.open("GET", "getData.php", true);
12                 xhr.responseType = "arraybuffer";
13                 xhr.onload = function(e) {
14                     if(this.status == 200) {
15                         var bytearray = new Int8Array(this.response);
16                         for(var i = 0; i < bytearray.byteLength; i++) {
17                             check[bytearray[i]].checked = true;
18                         }
19                     }
20                 };
21                 xhr.send();
22             }
23         </script>
24     </head>
25 
26     <body>
27         <input type="button" name="" onclick="getArrayBuffer()" id="" value="提交" />
28         <input type="checkbox" name="check" />数据1<br/>
29         <input type="checkbox" name="check" />数据2<br/>
30         <input type="checkbox" name="check" />数据3<br/>
31         <input type="checkbox" name="check" />数据4<br/>
32         <input type="checkbox" name="check" />数据5<br/>
33         <input type="checkbox" name="check" />数据6<br/>
34         <input type="checkbox" name="check" />数据7<br/>
35         <input type="checkbox" name="check" />数据8<br/>
36         <input type="checkbox" name="check" />数据9<br/>
37         <input type="checkbox" name="check" />数据10
38     </body>
39 
40 </html>