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