Ajax

AJAX，Asynchronous JavaScript and XML (异步的JavaScript和XML)，一种创建交互式网页应用的网页开发技术方案。

异步的JavaScript：
使用【JavaScript语言】以及相关【浏览器提供类库】的功能向服务端发送请求，当服务端处理完请求之后，【自动执行某个JavaScript的回调函数】。
PS：以上请求和响应的整个过程是【偷偷】进行的，页面上无任何感知。
XML
XML是一种标记语言，是Ajax在和后台交互时传输数据的格式之一

一、原生Ajax

Ajax主要就是使用【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。

 a. void open(String method,String url,Boolen async)
    用于创建请求
 
    参数：
        method： 请求方式（字符串类型），如：POST、GET、DELETE...
        url：    要请求的地址（字符串类型）
        async：  是否异步（布尔类型）
 
 b. void send(String body)
     用于发送请求
 
     参数：
         body： 要发送的数据（字符串类型）
 
 c. void setRequestHeader(String header,String value)
     用于设置请求头
 
     参数：
         header： 请求头的key（字符串类型）
         vlaue：  请求头的value（字符串类型）
 
 d. String getAllResponseHeaders()
     获取所有响应头
 
     返回值：
         响应头数据（字符串类型）
 
 e. String getResponseHeader(String header)
     获取响应头中指定header的值
 
     参数：
         header： 响应头的key（字符串类型）
 
     返回值：
         响应头中指定的header对应的值
 
 f. void abort()
 
     终止请求(终止耗时很久的ajax的请求)

XmlHttpRequest对象的主要方法

 a. Number readyState
    状态值（整数）
 
    详细：
       0-未初始化，尚未调用open()方法；
       1-启动，调用了open()方法，未调用send()方法；
       2-发送，已经调用了send()方法，未接收到响应；
       3-接收，已经接收到部分响应数据；
       4-完成，已经接收到全部响应数据；
 
 b. Function onreadystatechange
    当readyState的值改变时自动触发执行其对应的函数（回调函数），当上面的值发生变化的时候，每一次都会执行此onreadystatechange函数
 
 c. String responseText
    服务器返回的数据（字符串类型）
 
 d. XmlDocument responseXML
    服务器返回的数据（Xml对象）,帮你转化为xml对象，取值的时候，根据  obj.属性 去取值
 
 e. Number states
    状态码（整数），如：200、404...
 
 f. String statesText

XmlHttpRequest对象的主要属性

XmlHttpRequest支持的浏览器：IE7+, Firefox, Chrome, Opera, etc， ActiveXObject("Microsoft.XMLHTTP") 支持的浏览器：IE6, IE5

 def ajax(request):
     return render(request,'ajax.html')
 
 def ajax_json(request):
     print(request.POST)
     ret = {'status':True,'data':None}
     import json
     return HttpResponse(json.dumps(ret))

View.py

 <body>
     <input type="button" value="Ajax1" onclick="Ajax1();">
     <script>
        //设置浏览器
         function GetXHR(){
             var xhr = null;
             if(XMLHttpRequest){
                 xhr = new XMLHttpRequest();  //支持谷歌、火狐浏览器
             }else{
                 xhr = new ActiveXObject("Microsoft.XMLHTTP"); //支持IE浏览器
             }
             return xhr;
 
         }
         function Ajax1(){
             var xhr = new GetXHR();
             xhr.open('GET','/ajax_json/',true);  //默认是true
             xhr.onreadystatechange = function(){
                 if(xhr.readyState == 4){ //接收完毕，已经接收到全部响应数据
 
                     //console.log(xhr.responseText);//这个就是我们要拿到的返回值
                     var obj = JSON.parse(xhr.responseText);
                     console.log(obj);
                 }
             };
             //xhr.setRequestHeader('k1','v1'); //发送请求头
             xhr.send('name=root;pwd=123'); //必须以字符串的形式发，中间是分号
         }
     </script>
 </body>

GET请求的方式

 <body>
     <input type="button" value="Ajax1" onclick="Ajax1();">
     <script>
         function GetXHR(){
             var xhr = null;
             if(XMLHttpRequest){
                 xhr = new XMLHttpRequest();
             }else{
                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }
             return xhr;
 
         }
         function Ajax1(){
             var xhr = new GetXHR();
             //xhr.open('GET','/ajax_json/',true);  //默认是true
             xhr.open('POST','/ajax_json/',true);  //默认是true
             //定义回调函数
             xhr.onreadystatechange = function(){
                 if(xhr.readyState == 4){
                     //接收完毕
                     //console.log(xhr.responseText);//这个就是我们要拿到的返回值
                     var obj = JSON.parse(xhr.responseText);
                     console.log(obj);
                 }
             };
             //xhr.setRequestHeader('k1','v1'); //发送请求头
             //post方法需要设置一下请求头，后台才能接收到
             xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
             xhr.send('name=root;pwd=123'); //必须以字符串的形式发，中间是分号
         }
     </script>
 </body>

post的请求方式

二、伪ajax操作

HTML标签的iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求。

 <body>
     <input type="button" value="Ajax1" onclick="Ajax1();">
 
     <input type="text" id="url"/><input type="button" value="发送iframe请求" onclick="iframeRequest();"/>
     <iframe id='ifm' src="http://www.baidu.com"></iframe> #定义iframe的标签
 
     <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
     <script>
         //修改url
         function iframeRequest(){
             var url =  $("#url").val();
             $('#ifm').attr('src',url);
         }
     </script>
 </body>

iframe标签演示

伪ajax的演示Demo

 def ajax_json(request):
     print(request.POST)
     ret = {'status':True,'data':request.POST.get('username')}  #获取userName
     import json
     return HttpResponse(json.dumps(ret))

View.py

 #document =>相当于一个上线下文或者是一个空间管理，我们整个后台，我们html里面又嵌套了一个html，不能直接用 obj.innertext，obj.children等方式获取，这个document是一个特殊的东西，要用也是的值跨进去
 <body>
     <!--建立from个iframe之间的关系，表单就会通过ifrm提交到后台去-->
     <form action="/ajax_json/" method="POST" target="ifm1">  <!--target属性：表示关联哪一个ifram标签-->
         <!--<iframe name="ifm1" onload="iframeLoad();"></iframe> --> <!--这边的值返回了，就会执行一个onload事件-->
         <iframe id="ifm1" name="ifm1"></iframe> <!--这边的值返回了，就会执行一个onload事件-->
         <input type="text" name="username"/>
         <input type="text" name="email"/>
         <input type="submit" onclick="submitForm();" value="Form提交">  <!--创建一个onlcick事件-->
     </form>
 </body>
 <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
 <script>
     function submitForm(){
         $("#ifm1").on('load',function(){
             //console.log(123);
             var text = $("#ifm1").contents().find('body').text(); //$("#ifm1").contents():表示是iframe下面的值
             //console.log(text);
             var obj = JSON.parse(text); // 拿到之后根据用户返回的数据做一些操作了
             console.log(obj);
         })
     }
 </script>

templates ajax.html

三、jQuery Ajax

Query其实就是一个JavaScript的类库，其将复杂的功能做了上层封装，使得开发者可以在其基础上写更少的代码实现更多的功能，jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 。

 jQuery.get(...)
                 所有参数：
                      url: 待载入页面的URL地址
                     data: 待发送 Key/value 参数。
                  success: 载入成功时回调函数。
                 dataType: 返回内容格式，xml, json,  script, text, html
 
             jQuery.post(...)
                 所有参数：
                      url: 待载入页面的URL地址
                     data: 待发送 Key/value 参数
                  success: 载入成功时回调函数
                 dataType: 返回内容格式，xml, json,  script, text, html
 
             jQuery.getJSON(...)
                 所有参数：
                      url: 待载入页面的URL地址
                     data: 待发送 Key/value 参数。
                  success: 载入成功时回调函数。
 
             jQuery.getScript(...)
                 所有参数：
                      url: 待载入页面的URL地址
                     data: 待发送 Key/value 参数。
                  success: 载入成功时回调函数。
 
             jQuery.ajax(...)
 
                 部分参数：
 
                         url：请求地址
                        type：请求方式，GET、POST（1.9.0之后用method）
                     headers：请求头
                        data：要发送的数据
                 contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
                       async：是否异步
                     timeout：设置请求超时时间（毫秒）
 
                  beforeSend：发送请求前执行的函数(全局)
                    complete：完成之后执行的回调函数(全局)
                     success：成功之后执行的回调函数(全局)
                       error：失败之后执行的回调函数(全局)
 
                     accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
                    dataType：将服务器端返回的数据转换成指定类型
                                    "xml": 将服务器端返回的内容转换成xml格式
                                   "text": 将服务器端返回的内容转换成普通文本格式
                                   "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
                                 "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
                                   "json": 将服务器端返回的内容转换成相应的JavaScript对象
                                  "jsonp": JSONP 格式
                                           使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
 
                                   如果不指定，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
 
                  converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数
                          $.ajax({
                               accepts: {
                                 mycustomtype: 'application/x-some-custom-type'
                               },
 
                               // Expect a `mycustomtype` back from server
                               dataType: 'mycustomtype'
 
                               // Instructions for how to deserialize a `mycustomtype`
                               converters: {
                                 'text mycustomtype': function(result) {
                                   // Do Stuff
                                   return newresult;
                                 }
                               },
                             });

jQuery Ajax 主要方法

     $('#ajax_submit').click(function () {
         $.ajax({
             url: "/app1/test_ajax",   //url定义ajax发送请求的URL
             type: 'POST',             //type定义ajax发送请求的方法类型
             // data中则是ajax准备发送服务端的数据
             //data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(), 'b_id': $('#sel').val()},
             data: $('#add_form').serialize(), // 将整个form表单中的参数以字典形式发送给服务端，相比上面的写法，更加便捷
             success: function (data) {      // 服务端返回数据成功后执行的方法
                 var obj = JSON.parse(data);
                 if (obj.status) {
                     location.reload();       //重新加载当前页面（get形式）
                 } else {
                     $('#erro_msg').text(obj.error);
                 }
             }
         })
     });

jQuery Ajax - Demo

四、Ajax文件上传、上传图片预览

1、Ajax文件上传

 #urls.py
 from django.urls import path
 from app01.views import test
 
 urlpatterns = [
     path('upload/',test.upload),   #上传文件页面
     path('upload_file/',test.upload_file),  #上传文件功能
 ]
 
 #views.py
 def upload(request):
     return render(request,'upload.html')
 def upload_file(request):
     username = request.POST.get('username')
     fafafa = request.FILES.get('fafafa')
     print(username,fafafa)  #输出 root settings.xml
     with open(fafafa.name,'wb') as f:
         for item in fafafa.chunks():  #把文件写入到服务器端
             f.write(item)
     ret = {'code':True,'data':request.POST.get('username')}
     import json
     return HttpResponse(json.dumps(ret))

urls.py、views.py

 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .upload{
             display: inline-block;
             padding: 10px;
             background-color: brown;
             top: 0;
             bottom: 0;
             right: 0;
             left: 0;
             z-index: 99;
         }
         .file{
             width: 100px;height: 50px;opacity: 0;
             position: absolute;
             top: 0;
             bottom: 0;
             right: 0;
             left: 0;
             z-index: 100;
         }
     </style>
 </head>
 <body>
     <!--原生ajax和jquery ajax上传文件定义的html-->
     <div style="position: relative;width: 100px;height: 50px;">
         <!--因为这个改不了，所以这个上传的标签只能自定义组件，就是在外面嵌套div-->
         <input class="file" type="file" id="fafafa" name="afafaf">
         <a class="upload">上传</a>
     </div>
     <!--原生ajax的触发按钮-->
     <input type="button" value="提交XHR" onclick="xhrSubmit();"/>
     <!--jquery的发送方式触发按钮-->
     <input type="button" value="提交Jquery" onclick="jqSubmit();"/>
     <!--分隔符-->
     <hr/>
     <!--伪类ajax上传文件定义的html-->
     <form action="/upload_file/" method="post" enctype="multipart/form-data" target="ifm1">
         <iframe id="ifm1" name="ifm1"></iframe> <!--正常情况下，iframe在前端是不显示的，但是我们这边为了方便调试，所以暂时打开-->
         <input type="file" name="fafafa"/>
         <!--iframe方式上传文件-->
         <input type="submit" onclick="iframeSubmit();" value="Form提交"/>
     </form>
     <!--图片存放的地方-->
     <div id="preview"></div>
 </body>
 </html>

templates/upload.html

1.1、原生ajax文件上传

 <script src="/static/jquery-1.12.4.js"></script>
 <script>
     function xhrSubmit(){
         //$('#fafafa')[0] //[0]表示是dom对象
         var file_obj = document.getElementById("fafafa").files[0]; //files表示要上传的文件,这边只上传一个文件，所以用[0],指的就是上传的文件对象
         var fd = new FormData(); // formdata相当于form表单
         fd.append('username','root'); // 加普通字符串四可以的，加obj对象也是可以的
         fd.append('fafafa',file_obj);
         var xhr = new XMLHttpRequest();
         xhr.open('post','/upload_file/',true);
         xhr.onreadystatechange = function(){
             if(xhr.readyState == 4){
                 //接收完毕
                 var obj = JSON.parse(xhr.responseText);
                 console.log(obj);
             }
         };
         xhr.send(fd); //直接发送fd对象
     }
 </script>

原生ajax

1.2、jquery Ajax方式文件上传

 <script>
     function jqSubmit(){
         var file_obj = document.getElementById('fafafa').files[0];
         var fd = new FormData();
         //利用jquery自带的ajax的功能发送文件、图片或者等其他静态文件，跟原生AJax文件上传一样，这种方式也是要依赖 formdata的。
         fd.append('username','root');
         fd.append('fafafa',file_obj);
 
         $.ajax({
             url:'/upload_file/',
             type:'post',
             data:fd, //直接发送formdata对象给后端
         //发普通文本的话，可以直接发，但是如果发文件或者图片的话，需要告诉jquery，然后jquery才能处理
             processData:false,//tell jQuery not to process the data
             contentType:false,// tell jQuery not to set contentType
             success:function(args,statusText,xhr){
                 console.log(args);
                 console.log(statusText);
                 console.log(xhr); //XMLHttprequest对象
             }
         })
     }
 </script>
 </body>

jQuery Ajax

1.3、iframe的方式上传(伪ajax上传)

 <script src="/static/jquery-1.12.4.js"></script>
 <script>
     function iframeSubmit(){  //form本身就已经提交了
         $('#ifm1').bind('load',function(){  //提交之后，会自动执行iframe会自动执行onload事件
             var text = $('#ifm1').contents().find('body').text(); //获取iframe body中的内容
             var text_obj = JSON.parse(text);
             console.log(text_obj);
         })
     }
 </script>

iframe

2、上传图片预览

1、上传预览

 def upload_file(request):
     username = request.POST.get('username')
     fafafa = request.FILES.get('fafafa')
     import os
     img_path = os.path.join('static/imgs/',fafafa.name)  #设置img的路径
     with open(img_path,'wb') as f:  #直接写入指定 static/imgs文件下
         for item in fafafa.chunks():
             f.write(item)
     ret = {'code':True,'data':img_path} #data这边返回是图片的路径
     import json
     return HttpResponse(json.dumps(ret))

View.py

 <script src="/static/jquery-1.12.4.js"></script>
 <script>
     function iframeSubmit(){
         $('#ifm1').bind('load',function(){
             var text = $('#ifm1').contents().find('body').text();
             var text_obj = JSON.parse(text);
             //存在就清空一下
             $('#preview').empty();
             var img_tag = document.createElement('img');
             img_tag.src = '/' + text_obj.data;  //这边由于后台的path是static/imgs，所以这边要在前面加一个 '/'
             $('#preview').append(img_tag);  //在div中加一个img标签
         })
     }
 </script>

upload.html

2、自动上传预览

 ##iframe 的代码改进，增加onchange事件
 <form id="fm1" action="/upload_file/" method="post" enctype="multipart/form-data" target="ifm1">
     <!--iframe默认情况下不显示，不让用户看到，但是我们调试的时候可以打开-->
     <iframe id="ifm1" name="ifm1" style="display: none"></iframe>
     <!--绑定onchange事件，只要一改变，让整个表单提交-->
     <input type="file" name="fafafa" onchange="changeUpload();"/>
     <!--iframe方式上传文件-->
     <!--<input type="submit" onclick="iframeSubmit();" value="Form提交"/>-->
 </form>
 <!--图片存放的地方-->
 <div id="preview"></div>
 
 ##绑定onchange事件
 <script src="/static/jquery-1.12.4.js"></script>
 <script>
     function changeUpload(){
         // 先绑定一个事件，然后我们再提交，上面的submit按钮直接注释掉
         $('#ifm1').bind('load',function(){
             var text = $('#ifm1').contents().find('body').text();
             var text_obj = JSON.parse(text);
             //存在就清空一下
             $('#preview').empty();
             var img_tag = document.createElement('img');
             img_tag.src = '/' + text_obj.data;
             $('#preview').append(img_tag);
         });
         $('#fm1').submit(); //这步操作放在 $('#ifm1').bind('load',function(){}上面也是可以的，可能这个是一个自执行函数，肯定是要先提交，然后才会获取图片
     }
 </script>

upload.html

五、总结：

1、优先级顺序：

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

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

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

【python】-- Ajax的更多相关文章

【笔记】AJAX基础
[笔记]AJAX基础 Django AJAX 知识储备:JSON 什么是 JSON JSON 是轻量级的文本数据交换格式 JSON 独立于语言和平台.JSON 解析器和 JSON 库支持许多不同的编 ...
【python】列出http://www.cnblogs.com/xiandedanteng中所有博文的标题
代码: # 列出http://www.cnblogs.com/xiandedanteng中所有博文的标题 from bs4 import BeautifulSoup import requests u ...
【Python②】python之首秀
第一个python程序再次说明:后面所有代码均为Python 3.3.2版本(运行环境:Windows7)编写. 安装配置好python后,我们先来写第一个python程序.打开IDLE (P ...
【python】多进程锁multiprocess.Lock
[python]多进程锁multiprocess.Lock 2013-09-13 13:48 11613人阅读评论(2) 收藏举报分类: Python(38) 同步的方法基本与多线程相同. ...
【python】SQLAlchemy
来源:廖雪峰对比:[python]在python中调用mysql 注意连接数据库方式和数据操作方式! 今天发现了个处理数据库的好东西:SQLAlchemy 一般python处理mysql之类的数据库 ...
【Python】如何安装easy_install?
[Python]如何安装easy_install? http://jingyan.baidu.com/article/b907e627e78fe146e7891c25.html easy_instal ...
【Python】零碎知识积累 II
[Python] 零碎知识积累 II ■ 函数的参数默认值在函数定义时确定并保存在内存中,调用函数时不会在内存中新开辟一块空间然后用参数默认值重新赋值,而是单纯地引用这个参数原来的地址.这就带来了一个 ...
【Python】-NO.97.Note.2.Python -【Python 基本数据类型】
1.0.0 Summary Tittle:[Python]-NO.97.Note.2.Python -[Python 基本数据类型] Style:Python Series:Python Since: ...

随机推荐

[C++设计模式] command 命令模式
在软件系统中,"行为请求者"与"行为实现者"通常呈现一种"紧耦合". 但在某些场合,比方要对行为进行"记录.撤销/重做.事务&qu ...
【DB2】对两列分组之后判断另外一列是否有重复
建立表数据如下: ),sex ),sex_nm ),OWER ),TYPE ),TYPE_NM )); ,','水果'), (,','水果'), (,','水果'), (,','水果'), (,',' ...
jQuery 文档操作 - prependTo() ，appendTo()方法
其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...
userDao
比如,我们这里有一个接口IUserDao,里面有,add和del两个方法.我们在项目中,有一个他的实现类:UserDao.但是我们现在想要统一为这个接口的所有实现类都添加一个查询search方法,那么 ...
《让LoadRunner走下神坛》
这几天碰到这么几件事情,觉得挺有意思的:1. 有个朋友问了我一个问题:LoadRunner的缺点在哪?然后我反问她:LoadRunner的优点在哪?她一时语塞,后来说:感觉都是优点没有什 ...
Spring 集成hibernate时配置连接释放模式
http://zmfkplj.iteye.com/blog/220822 程序出现一个奇怪的现象,用Quartz作业调度启动任务,运行一段时间后,任务会卡在一个查询接口处,久久不能运行完毕. 我本能的 ...
关于SVN提交强制加入注释
一.摘要场景: 在这次开发项目过程中,团队中总是有人忘记添加注释. 问题: 1:其他成员不知道你提交是什么代码, 给回滚操作带来很多不必要的麻烦. 2:这个工作需要有一个人天天提醒大家在提交代码的时 ...
调用getChildFragmentManager时出现的Bug
异常: java.lang.IllegalStateException: Activity has been destroyed at android.support.v4.app.FragmentM ...
js - 类模拟
JavaScript 中并没有真正的类,但JavaScript 中有构造函数和 new 运算符. - 任何JavaScript 函数都可以用做构造函数, - 构造函数必须使用 new 运算符来创建 ...
Strategy模式
Strategy模式 Strategy模式要解决的问题和Template模式类似.都是为了把算法的声明和算法的实现解耦.Template模式是通过继承来实现的,而Strategy模式是通过组合来实现的 ...

【python】-- Ajax

Ajax

一、原生Ajax

二、伪ajax操作

三、jQuery Ajax

四、Ajax文件上传、上传图片预览

1、Ajax文件上传

2、上传图片预览

五、总结：

【python】-- Ajax的更多相关文章

随机推荐

热门专题