【python】-- Ajax
Ajax
AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案。
- 异步的JavaScript:
使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】。
PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。 - XML
XML是一种标记语言,是Ajax在和后台交互时传输数据的格式之一
一、原生Ajax
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)。
1 a. void open(String method,String url,Boolen async) 2 用于创建请求 3 4 参数: 5 method: 请求方式(字符串类型),如:POST、GET、DELETE... 6 url: 要请求的地址(字符串类型) 7 async: 是否异步(布尔类型) 8 9 b. void send(String body) 10 用于发送请求 11 12 参数: 13 body: 要发送的数据(字符串类型) 14 15 c. void setRequestHeader(String header,String value) 16 用于设置请求头 17 18 参数: 19 header: 请求头的key(字符串类型) 20 vlaue: 请求头的value(字符串类型) 21 22 d. String getAllResponseHeaders() 23 获取所有响应头 24 25 返回值: 26 响应头数据(字符串类型) 27 28 e. String getResponseHeader(String header) 29 获取响应头中指定header的值 30 31 参数: 32 header: 响应头的key(字符串类型) 33 34 返回值: 35 响应头中指定的header对应的值 36 37 f. void abort() 38 39 终止请求(终止耗时很久的ajax的请求)
1 a. Number readyState 2 状态值(整数) 3 4 详细: 5 0-未初始化,尚未调用open()方法; 6 1-启动,调用了open()方法,未调用send()方法; 7 2-发送,已经调用了send()方法,未接收到响应; 8 3-接收,已经接收到部分响应数据; 9 4-完成,已经接收到全部响应数据; 10 11 b. Function onreadystatechange 12 当readyState的值改变时自动触发执行其对应的函数(回调函数),当上面的值发生变化的时候,每一次都会执行此onreadystatechange函数 13 14 c. String responseText 15 服务器返回的数据(字符串类型) 16 17 d. XmlDocument responseXML 18 服务器返回的数据(Xml对象),帮你转化为xml对象,取值的时候,根据 obj.属性 去取值 19 20 e. Number states 21 状态码(整数),如:200、404... 22 23 f. String statesText
XmlHttpRequest支持的浏览器:IE7+, Firefox, Chrome, Opera, etc, ActiveXObject("Microsoft.XMLHTTP") 支持的浏览器:IE6, IE5
1 def ajax(request): 2 return render(request,'ajax.html') 3 4 def ajax_json(request): 5 print(request.POST) 6 ret = {'status':True,'data':None} 7 import json 8 return HttpResponse(json.dumps(ret))
1 <body> 2 <input type="button" value="Ajax1" onclick="Ajax1();"> 3 <script> 4 //设置浏览器 5 function GetXHR(){ 6 var xhr = null; 7 if(XMLHttpRequest){ 8 xhr = new XMLHttpRequest(); //支持谷歌、火狐浏览器 9 }else{ 10 xhr = new ActiveXObject("Microsoft.XMLHTTP"); //支持IE浏览器 11 } 12 return xhr; 13 14 } 15 function Ajax1(){ 16 var xhr = new GetXHR(); 17 xhr.open('GET','/ajax_json/',true); //默认是true 18 xhr.onreadystatechange = function(){ 19 if(xhr.readyState == 4){ //接收完毕,已经接收到全部响应数据 20 21 //console.log(xhr.responseText);//这个就是我们要拿到的返回值 22 var obj = JSON.parse(xhr.responseText); 23 console.log(obj); 24 } 25 }; 26 //xhr.setRequestHeader('k1','v1'); //发送请求头 27 xhr.send('name=root;pwd=123'); //必须以字符串的形式发,中间是分号 28 } 29 </script> 30 </body>
1 <body> 2 <input type="button" value="Ajax1" onclick="Ajax1();"> 3 <script> 4 function GetXHR(){ 5 var xhr = null; 6 if(XMLHttpRequest){ 7 xhr = new XMLHttpRequest(); 8 }else{ 9 xhr = new ActiveXObject("Microsoft.XMLHTTP"); 10 } 11 return xhr; 12 13 } 14 function Ajax1(){ 15 var xhr = new GetXHR(); 16 //xhr.open('GET','/ajax_json/',true); //默认是true 17 xhr.open('POST','/ajax_json/',true); //默认是true 18 //定义回调函数 19 xhr.onreadystatechange = function(){ 20 if(xhr.readyState == 4){ 21 //接收完毕 22 //console.log(xhr.responseText);//这个就是我们要拿到的返回值 23 var obj = JSON.parse(xhr.responseText); 24 console.log(obj); 25 } 26 }; 27 //xhr.setRequestHeader('k1','v1'); //发送请求头 28 //post方法需要设置一下请求头,后台才能接收到 29 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); 30 xhr.send('name=root;pwd=123'); //必须以字符串的形式发,中间是分号 31 } 32 </script> 33 </body>
二、伪ajax操作
HTML标签的iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求。
1 <body> 2 <input type="button" value="Ajax1" onclick="Ajax1();"> 3 4 <input type="text" id="url"/><input type="button" value="发送iframe请求" onclick="iframeRequest();"/> 5 <iframe id='ifm' src="http://www.baidu.com"></iframe> #定义iframe的标签 6 7 <script type="text/javascript" src="/static/jquery-1.12.4.js"></script> 8 <script> 9 //修改url 10 function iframeRequest(){ 11 var url = $("#url").val(); 12 $('#ifm').attr('src',url); 13 } 14 </script> 15 </body>
伪ajax的演示Demo
1 def ajax_json(request): 2 print(request.POST) 3 ret = {'status':True,'data':request.POST.get('username')} #获取userName 4 import json 5 return HttpResponse(json.dumps(ret))
1 #document =>相当于一个上线下文或者是一个空间管理,我们整个后台,我们html里面又嵌套了一个html,不能直接用 obj.innertext,obj.children等方式获取,这个document是一个特殊的东西,要用也是的值跨进去 2 <body> 3 <!--建立from个iframe之间的关系,表单就会通过ifrm提交到后台去--> 4 <form action="/ajax_json/" method="POST" target="ifm1"> <!--target属性:表示关联哪一个ifram标签--> 5 <!--<iframe name="ifm1" onload="iframeLoad();"></iframe> --> <!--这边的值返回了,就会执行一个onload事件--> 6 <iframe id="ifm1" name="ifm1"></iframe> <!--这边的值返回了,就会执行一个onload事件--> 7 <input type="text" name="username"/> 8 <input type="text" name="email"/> 9 <input type="submit" onclick="submitForm();" value="Form提交"> <!--创建一个onlcick事件--> 10 </form> 11 </body> 12 <script type="text/javascript" src="/static/jquery-1.12.4.js"></script> 13 <script> 14 function submitForm(){ 15 $("#ifm1").on('load',function(){ 16 //console.log(123); 17 var text = $("#ifm1").contents().find('body').text(); //$("#ifm1").contents():表示是iframe下面的值 18 //console.log(text); 19 var obj = JSON.parse(text); // 拿到之后根据用户返回的数据做一些操作了 20 console.log(obj); 21 }) 22 } 23 </script>
三、jQuery Ajax
Query其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能,jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 。
1 jQuery.get(...) 2 所有参数: 3 url: 待载入页面的URL地址 4 data: 待发送 Key/value 参数。 5 success: 载入成功时回调函数。 6 dataType: 返回内容格式,xml, json, script, text, html 7 8 9 jQuery.post(...) 10 所有参数: 11 url: 待载入页面的URL地址 12 data: 待发送 Key/value 参数 13 success: 载入成功时回调函数 14 dataType: 返回内容格式,xml, json, script, text, html 15 16 17 jQuery.getJSON(...) 18 所有参数: 19 url: 待载入页面的URL地址 20 data: 待发送 Key/value 参数。 21 success: 载入成功时回调函数。 22 23 24 jQuery.getScript(...) 25 所有参数: 26 url: 待载入页面的URL地址 27 data: 待发送 Key/value 参数。 28 success: 载入成功时回调函数。 29 30 31 jQuery.ajax(...) 32 33 部分参数: 34 35 url:请求地址 36 type:请求方式,GET、POST(1.9.0之后用method) 37 headers:请求头 38 data:要发送的数据 39 contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8") 40 async:是否异步 41 timeout:设置请求超时时间(毫秒) 42 43 beforeSend:发送请求前执行的函数(全局) 44 complete:完成之后执行的回调函数(全局) 45 success:成功之后执行的回调函数(全局) 46 error:失败之后执行的回调函数(全局) 47 48 49 accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型 50 dataType:将服务器端返回的数据转换成指定类型 51 "xml": 将服务器端返回的内容转换成xml格式 52 "text": 将服务器端返回的内容转换成普通文本格式 53 "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。 54 "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式 55 "json": 将服务器端返回的内容转换成相应的JavaScript对象 56 "jsonp": JSONP 格式 57 使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数 58 59 如果不指定,jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string 60 61 converters: 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数 62 $.ajax({ 63 accepts: { 64 mycustomtype: 'application/x-some-custom-type' 65 }, 66 67 // Expect a `mycustomtype` back from server 68 dataType: 'mycustomtype' 69 70 // Instructions for how to deserialize a `mycustomtype` 71 converters: { 72 'text mycustomtype': function(result) { 73 // Do Stuff 74 return newresult; 75 } 76 }, 77 });
1 $('#ajax_submit').click(function () { 2 $.ajax({ 3 url: "/app1/test_ajax", //url定义ajax发送请求的URL 4 type: 'POST', //type定义ajax发送请求的方法类型 5 // data中则是ajax准备发送服务端的数据 6 //data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(), 'b_id': $('#sel').val()}, 7 data: $('#add_form').serialize(), // 将整个form表单中的参数以字典形式发送给服务端,相比上面的写法,更加便捷 8 success: function (data) { // 服务端返回数据成功后执行的方法 9 var obj = JSON.parse(data); 10 if (obj.status) { 11 location.reload(); //重新加载当前页面(get形式) 12 } else { 13 $('#erro_msg').text(obj.error); 14 } 15 } 16 }) 17 });
四、Ajax文件上传、上传图片预览
1、Ajax文件上传
1 #urls.py 2 from django.urls import path 3 from app01.views import test 4 5 urlpatterns = [ 6 path('upload/',test.upload), #上传文件页面 7 path('upload_file/',test.upload_file), #上传文件功能 8 ] 9 10 #views.py 11 def upload(request): 12 return render(request,'upload.html') 13 def upload_file(request): 14 username = request.POST.get('username') 15 fafafa = request.FILES.get('fafafa') 16 print(username,fafafa) #输出 root settings.xml 17 with open(fafafa.name,'wb') as f: 18 for item in fafafa.chunks(): #把文件写入到服务器端 19 f.write(item) 20 ret = {'code':True,'data':request.POST.get('username')} 21 import json 22 return HttpResponse(json.dumps(ret))
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 .upload{ 6 display: inline-block; 7 padding: 10px; 8 background-color: brown; 9 top: 0; 10 bottom: 0; 11 right: 0; 12 left: 0; 13 z-index: 99; 14 } 15 .file{ 16 width: 100px;height: 50px;opacity: 0; 17 position: absolute; 18 top: 0; 19 bottom: 0; 20 right: 0; 21 left: 0; 22 z-index: 100; 23 } 24 </style> 25 </head> 26 <body> 27 <!--原生ajax和jquery ajax上传文件定义的html--> 28 <div style="position: relative;width: 100px;height: 50px;"> 29 <!--因为这个改不了,所以这个上传的标签只能自定义组件,就是在外面嵌套div--> 30 <input class="file" type="file" id="fafafa" name="afafaf"> 31 <a class="upload">上传</a> 32 </div> 33 <!--原生ajax的触发按钮--> 34 <input type="button" value="提交XHR" onclick="xhrSubmit();"/> 35 <!--jquery的发送方式触发按钮--> 36 <input type="button" value="提交Jquery" onclick="jqSubmit();"/> 37 <!--分隔符--> 38 <hr/> 39 <!--伪类ajax上传文件定义的html--> 40 <form action="/upload_file/" method="post" enctype="multipart/form-data" target="ifm1"> 41 <iframe id="ifm1" name="ifm1"></iframe> <!--正常情况下,iframe在前端是不显示的,但是我们这边为了方便调试,所以暂时打开--> 42 <input type="file" name="fafafa"/> 43 <!--iframe方式上传文件--> 44 <input type="submit" onclick="iframeSubmit();" value="Form提交"/> 45 </form> 46 <!--图片存放的地方--> 47 <div id="preview"></div> 48 </body> 49 </html>
1.1、原生ajax文件上传
1 <script src="/static/jquery-1.12.4.js"></script> 2 <script> 3 function xhrSubmit(){ 4 //$('#fafafa')[0] //[0]表示是dom对象 5 var file_obj = document.getElementById("fafafa").files[0]; //files表示要上传的文件,这边只上传一个文件,所以用[0],指的就是上传的文件对象 6 var fd = new FormData(); // formdata相当于form表单 7 fd.append('username','root'); // 加普通字符串四可以的,加obj对象也是可以的 8 fd.append('fafafa',file_obj); 9 var xhr = new XMLHttpRequest(); 10 xhr.open('post','/upload_file/',true); 11 xhr.onreadystatechange = function(){ 12 if(xhr.readyState == 4){ 13 //接收完毕 14 var obj = JSON.parse(xhr.responseText); 15 console.log(obj); 16 } 17 }; 18 xhr.send(fd); //直接发送fd对象 19 } 20 </script>
1.2、jquery Ajax方式文件上传
1 <script> 2 function jqSubmit(){ 3 var file_obj = document.getElementById('fafafa').files[0]; 4 var fd = new FormData(); 5 //利用jquery自带的ajax的功能发送文件、图片或者等其他静态文件,跟原生AJax文件上传一样,这种方式也是要依赖 formdata的。 6 fd.append('username','root'); 7 fd.append('fafafa',file_obj); 8 9 $.ajax({ 10 url:'/upload_file/', 11 type:'post', 12 data:fd, //直接发送formdata对象给后端 13 //发普通文本的话,可以直接发,但是如果发文件或者图片的话,需要告诉jquery,然后jquery才能处理 14 processData:false,//tell jQuery not to process the data 15 contentType:false,// tell jQuery not to set contentType 16 success:function(args,statusText,xhr){ 17 console.log(args); 18 console.log(statusText); 19 console.log(xhr); //XMLHttprequest对象 20 } 21 }) 22 } 23 </script> 24 </body>
1.3、iframe的方式上传(伪ajax上传)
1 <script src="/static/jquery-1.12.4.js"></script> 2 <script> 3 function iframeSubmit(){ //form本身就已经提交了 4 $('#ifm1').bind('load',function(){ //提交之后,会自动执行iframe会自动执行onload事件 5 var text = $('#ifm1').contents().find('body').text(); //获取iframe body中的内容 6 var text_obj = JSON.parse(text); 7 console.log(text_obj); 8 }) 9 } 10 </script>
2、上传图片预览
1、上传预览
1 def upload_file(request): 2 username = request.POST.get('username') 3 fafafa = request.FILES.get('fafafa') 4 import os 5 img_path = os.path.join('static/imgs/',fafafa.name) #设置img的路径 6 with open(img_path,'wb') as f: #直接写入指定 static/imgs文件下 7 for item in fafafa.chunks(): 8 f.write(item) 9 ret = {'code':True,'data':img_path} #data这边返回是图片的路径 10 import json 11 return HttpResponse(json.dumps(ret))
1 <script src="/static/jquery-1.12.4.js"></script> 2 <script> 3 function iframeSubmit(){ 4 $('#ifm1').bind('load',function(){ 5 var text = $('#ifm1').contents().find('body').text(); 6 var text_obj = JSON.parse(text); 7 //存在就清空一下 8 $('#preview').empty(); 9 var img_tag = document.createElement('img'); 10 img_tag.src = '/' + text_obj.data; //这边由于后台的path是static/imgs,所以这边要在前面加一个 '/' 11 $('#preview').append(img_tag); //在div中加一个img标签 12 }) 13 } 14 </script>
2、自动上传预览
1 ##iframe 的代码改进,增加onchange事件 2 <form id="fm1" action="/upload_file/" method="post" enctype="multipart/form-data" target="ifm1"> 3 <!--iframe默认情况下不显示,不让用户看到,但是我们调试的时候可以打开--> 4 <iframe id="ifm1" name="ifm1" style="display: none"></iframe> 5 <!--绑定onchange事件,只要一改变,让整个表单提交--> 6 <input type="file" name="fafafa" onchange="changeUpload();"/> 7 <!--iframe方式上传文件--> 8 <!--<input type="submit" onclick="iframeSubmit();" value="Form提交"/>--> 9 </form> 10 <!--图片存放的地方--> 11 <div id="preview"></div> 12 13 ##绑定onchange事件 14 <script src="/static/jquery-1.12.4.js"></script> 15 <script> 16 function changeUpload(){ 17 // 先绑定一个事件,然后我们再提交,上面的submit按钮直接注释掉 18 $('#ifm1').bind('load',function(){ 19 var text = $('#ifm1').contents().find('body').text(); 20 var text_obj = JSON.parse(text); 21 //存在就清空一下 22 $('#preview').empty(); 23 var img_tag = document.createElement('img'); 24 img_tag.src = '/' + text_obj.data; 25 $('#preview').append(img_tag); 26 }); 27 $('#fm1').submit(); //这步操作放在 $('#ifm1').bind('load',function(){}上面也是可以的,可能这个是一个自执行函数,肯定是要先提交,然后才会获取图片 28 } 29 </script>
五、总结:
1、优先级顺序:
- 文件上传:iframe -> jquery ajax -> 原生 ajax
- 普通数据:jquery ajax -> 原生 ajax -> iframe
2、文件上传时,原生ajax、jquery ajax 都需要依赖 FormData 对象,FormData 对象不是所有的浏览器都支持的,IE的低版本就没有FormData对象。
3、iframe基本上兼容所有浏览器,而其他两种方式,部分低版本IE浏览器不兼容。