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; 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浏览器不兼容。