JS的异步传输

最新推荐文章于 2023-02-13 21:48:22 发布

weixin_30564901

最新推荐文章于 2023-02-13 21:48:22 发布

阅读量223

点赞数

文章标签： javascript 后端前端 ViewUI

原文链接：http://www.cnblogs.com/cx59244405/p/9061473.html

版权

后端使用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后端

转载于:https://www.cnblogs.com/cx59244405/p/9061473.html

weixin_30564901

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS的异步传输

后端使用Django框架来实现1、AJAX常规的异步传输方式，适用于大部分场景原理：通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JS来操作DOM而更新页面(1).AJAX的优点<1>.无刷新更新数据<2>.异步与服务器通信<3>.前端和后端负载平衡<4>.基于标准被广泛支持<5&g...
复制链接

扫一扫