JS的异步传输
后端使⽤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
17function ajax() {
18var username = ElementById('id_username');
19var password = ElementById('id_password');
20var div1 = ElementById('div1');
21var div_u = ateElement('div');
22var div_p = ateElement('div');
23// 新建XMLHttpRequest对象
24var req = new XMLHttpRequest();
25// 状态发⽣变化时，函数被回调
26 adystatechange=function () {
27//状态码为4代表请求完成
28if (adyState==4&&req.status==200) {
29 data = sponseText;
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','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>
16function ajax() {
17var username = $('#id_username');
18var password = $('#id_password');
19var div1=$('#div1');
20var div_u = $('<div></div>');
21var 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 (data.username);
33 (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的⽅式
2def ajax(req):
hod=='POST':
4 username = ('username')
5 password = ('password')
6 data = {'username':username,'password':password}
7return HttpResponse(json.dumps(data))
8return 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>
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>
15function jsonp() {
16var script1 = ateElement('script');
17var body1 = ElementsByTagName('body')[0];
18var username = ElementById('id_username');
19var password = ElementById('id_password');
20 pe = 'text/javascript';
21 script1.src = '127.0.0.1:8000/jsonp_data?callback=callback&username='+username.value+'&password='+password.value;
22 body1.appendChild(script1);
23 veChild(script1);
24
25 }
26function callback(data) {
27var div_u = ateElement('div');
28var div_p = ateElement('div');
29var div1 = ElementById('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的⽅式
2def jsonp(req):
3return render(req,'jsonp.html')
4
5def jsonp_data(req):
6 callback = ('callback')
7 username = ('username')
8 password = ('password')
9 data = {'username': username, 'password': password}
10 json_data = json.dumps(data)
11return HttpResponse('''%s('%s')'''%(callback,json_data))
JSONP后端
3、iframe异步
解决跨域问题的另⼀种⽅式，但不推荐使⽤
原理：iframe相当于新开了个窗⼝，所以在iframe中访问并不影响原页⾯，感觉有点像虚拟机
(1).iframe的优点
<1>.可以跨越同源策略
<2>.解决ajax化⽹站响应浏览器前进后退按钮的⽅案
firmicutes(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>
15function iframe() {
16var iframe1 = ateElement('iframe');
17var body1 = ElementsByTagName('body')[0];
18var username = ElementById('id_username');
19var password = ElementById('id_password');
20 iframe1.id = 'iframe1';
21 iframe1.src = "127.0.0.1:8000/iframe_data?username="+username.value+'&password='+password.value;
22 iframe1.style = 'display:none';
23 body1.appendChild(iframe1);
24 load = function(){
25 data = ElementsByTagName('body')[0].innerText;
恒温阀门26 data = JSON.parse(data);
27var div_u = ateElement('div');
28var div_p = ateElement('div');
29var div1 = ElementById('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异步传输
2def iframe(req):
3return render(req,'iframe.html')
4
5def iframe_data(req):
6 username = ('username')
7 password = ('password')
8 data = {'username': username, 'password': password}
9 json_data = json.dumps(data)
10return HttpResponse(json_data)
iframe后端
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议