【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的请求)
XmlHttpRequest对象的主要方法
 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对象的主要属性

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))
View.py
 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>
GET请求的方式
 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>
post的请求方式

 

二、伪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>
iframe标签演示

伪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))
View.py
 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>
templates ajax.html

 

三、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                             });
jQuery Ajax 主要方法
 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     });
jQuery Ajax - Demo

 

四、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))
urls.py、views.py
 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>
templates/upload.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>
原生ajax

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>
jQuery Ajax

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>
iframe

 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))
View.py
 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>
upload.html

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>
upload.html

 

五、总结:

1、优先级顺序:

  • 文件上传:iframe  ->  jquery ajax -> 原生 ajax
  • 普通数据:jquery ajax -> 原生 ajax  -> iframe 

 2、文件上传时,原生ajax、jquery ajax 都需要依赖  FormData 对象,FormData 对象不是所有的浏览器都支持的,IE的低版本就没有FormData对象。

3、iframe基本上兼容所有浏览器,而其他两种方式,部分低版本IE浏览器不兼容。

 

posted @ 2018-10-11 12:29  Wilson_Blogs  阅读(318)  评论(0编辑  收藏  举报