JS的異步傳輸

本文轉載自查看原文 2018-05-19 20:09 1026 web開發

后端使用Django框架來實現

1、AJAX

常規的異步傳輸方式，適用於大部分場景

原理：通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然后用JS來操作DOM而更新頁面

(1).AJAX的優點
<1>.無刷新更新數據
<2>.異步與服務器通信
<3>.前端和后端負載平衡
<4>.基於標准被廣泛支持
<5>.界面與應用分離

(2).AJAX的缺點
<1>.AJAX干掉了Back和History功能，即對瀏覽器機制的破壞
<2>.AJAX的安全問題
<3>.對搜索引擎支持較弱
<4>.破壞程序的異常處理機制
<5>.違背URL和資源定位的初衷
<6>.AJAX不能很好支持移動設備
<7>.客戶端過肥，太多客戶端代碼造成開發上的成本

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="/static/jquery-3.3.1.js"></script>
 7 </head>
 8 <body>
 9     <div id="div1">
10         用戶名：<input type="text" id="id_username"></br>
11         密碼：<input type="password" id="id_password"></br>
12         <input type="button" id="id_submit" value="submit" onclick="ajax()"></br>
13     </div>
14 
15 <script>
16     
17     function ajax() {
18         var username = document.getElementById('id_username');
19         var password = document.getElementById('id_password');
20         var div1 = document.getElementById('div1');
21         var div_u = document.createElement('div');
22         var div_p = document.createElement('div');
23         // 新建XMLHttpRequest對象
24         var req = new XMLHttpRequest();
25         // 狀態發生變化時，函數被回調
26         req.onreadystatechange=function () {
27             //狀態碼為4代表請求完成
28             if (req.readyState==4&&req.status==200) {
29                 data = req.responseText;
30                 data = JSON.parse(data);
31                 div_u.innerText = data.username;
32                 div_p.innerText = data.password;
33                 div1.appendChild(div_u);
34                 div1.appendChild(div_p);
35             }
36         };
37         //post方式建立連接
38         req.open('post','http://127.0.0.1:8000/ajax',true);
39         //post請求的編碼方式，這是瀏覽器的原生 form 表單的默認編碼方式
40         req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
41         //發送請求
42         req.send("username="+username.value+"&password="+password.value);
43     }
44 </script>
45 </body>
46 </html>

AJAX前端(原生JS)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="/static/jquery-3.3.1.js"></script>
 7 </head>
 8 <body>
 9     <div id="div1">
10         用戶名：<input type="text" id="id_username"></br>
11         密碼：<input type="password" id="id_password"></br>
12         <input type="button" id="id_submit" value="submit" onclick="ajax()"></br>
13     </div>
14 
15 <script>
16     function ajax() {
17         var username = $('#id_username');
18         var password = $('#id_password');
19         var div1=$('#div1');
20         var div_u = $('<div></div>');
21         var div_p = $('<div></div>');
22         $.ajax(
23             {
24                 type:'post',
25                 url:'ajax',
26                 data:{
27                     'username':username.val(),
28                     'password':password.val(),
29                 },
30                 dataType:'json',
31                 success:function (data) {
32                      div_u.text(data.username);
33                      div_p.text(data.password);
34                      div1.append(div_u);
35                      div1.append(div_p);
36                 }
37 
38             }
39         )
40     }
41 </script>
42 </body>
43 </html>

AJAX前端(jQuery)

1 #AJAX的方式
2 def ajax(req):
3     if req.method=='POST':
4         username = req.POST.get('username')
5         password = req.POST.get('password')
6         data = {'username':username,'password':password}
7         return HttpResponse(json.dumps(data))
8     return render(req,'ajax.html')

AJAX后端

2、JSONP

主要用來解決跨域傳輸的問題

原理：script標簽src屬性中的鏈接可以訪問跨域訪問，利用這個特性，服務端不再返回JSON格式的數據，

　　　而是返回一段調用某個函數的js代碼，在src中進行了調用，這樣實現了跨域

(1).JSONP的優點
<1>.可以跨越同源策略
<2>.它的兼容性更好，在更加古老的瀏覽器中都可以運行
<3>.將回調方法的權限給了前端，后端只負責給數據

(2).JSONP的缺點
<1>.它只支持GET請求而不支持POST等其它類型的HTTP請求
<2>.它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題
<3>.jsonp在調用失敗的時候不會返回各種HTTP狀態碼
<4>.JSONP劫持攻擊

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9     <div id="div1">
10         用戶名：<input type="text" id="id_username"></br>
11         密碼：<input type="password" id="id_password"></br>
12         <input type="button" id="id_submit" value="submit" onclick="jsonp()"></br>
13     </div>
14 <script>
15     function jsonp() {
16         var script1 = document.createElement('script');
17         var body1 = document.getElementsByTagName('body')[0];
18         var username = document.getElementById('id_username');
19         var password = document.getElementById('id_password');
20         script1.type = 'text/javascript';
21         script1.src = 'http://127.0.0.1:8000/jsonp_data?callback=callback&username='+username.value+'&password='+password.value;
22         body1.appendChild(script1);
23         body1.removeChild(script1);
24 
25     }
26     function callback(data) {
27         var div_u = document.createElement('div');
28         var div_p = document.createElement('div');
29         var div1 = document.getElementById('div1');
30         data = JSON.parse(data);
31         div_u.innerText = data.username;
32         div_p.innerText = data.password;
33         div1.appendChild(div_u);
34         div1.appendChild(div_p);
35     }
36 
37 </script>
38 
39 </body>
40 </html>

JSONP前端

 1 #jsonp的方式
 2 def jsonp(req):
 3     return render(req,'jsonp.html')
 4 
 5 def jsonp_data(req):
 6     callback = req.GET.get('callback')
 7     username = req.GET.get('username')
 8     password = req.GET.get('password')
 9     data = {'username': username, 'password': password}
10     json_data = json.dumps(data)
11     return HttpResponse('''%s('%s')'''%(callback,json_data))

JSONP后端

3、iframe異步

解決跨域問題的另一種方式，但不推薦使用

原理：iframe相當於新開了個窗口，所以在iframe中訪問並不影響原頁面，感覺有點像虛擬機

(1).iframe的優點
<1>.可以跨越同源策略
<2>.解決ajax化網站響應瀏覽器前進后退按鈕的方案

(2).iframe的缺點
<1>.比其他DOM更多的性能消耗
<2>.iframe會阻塞主頁面的onload事件
<3>.主頁面和iframe共享同一個連接池

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="div1">
 9         用戶名：<input type="text" id="id_username"></br>
10         密碼：<input type="password" id="id_password"></br>
11         <input type="button" id="id_submit" value="submit" onclick="iframe()"></br>
12     </div>
13 
14 <script>
15     function iframe() {
16         var iframe1 = document.createElement('iframe');
17         var body1 = document.getElementsByTagName('body')[0];
18         var username = document.getElementById('id_username');
19         var password = document.getElementById('id_password');
20         iframe1.id = 'iframe1';
21         iframe1.src = "http://127.0.0.1:8000/iframe_data?username="+username.value+'&password='+password.value;
22         iframe1.style = 'display:none';
23         body1.appendChild(iframe1);
24         iframe1.onload = function(){
25             data = iframe1.contentWindow.document.getElementsByTagName('body')[0].innerText;
26             data = JSON.parse(data);
27             var div_u = document.createElement('div');
28             var div_p = document.createElement('div');
29             var div1 = document.getElementById('div1');
30             div_u.innerText = data.username;
31             div_p.innerText = data.password;
32             div1.appendChild(div_u);
33             div1.appendChild(div_p);
34         };
35 
36     }
37 </script>
38 </body>
39 </html>

iframe前端

 1 #iframe異步傳輸
 2 def iframe(req):
 3     return render(req,'iframe.html')
 4 
 5 def iframe_data(req):
 6     username = req.GET.get('username')
 7     password = req.GET.get('password')
 8     data = {'username': username, 'password': password}
 9     json_data = json.dumps(data)
10     return HttpResponse(json_data)

iframe后端

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js中XMLHttpRequest對象實現GET、POST異步傳輸同步傳輸異步傳輸理解同步傳輸與異步傳輸(一) 解決ajax異步傳輸數據，return返回為undefined的問題 stm32 usart 異步傳輸示例一款DMA性能優化記錄：異步傳輸和指定實時信號做async IO js 傳輸數據加密 Thinkphp+ajaxFileUpload實現異步圖片傳輸 js中的同步和異步 JS異步上傳文件