对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上。
1、传统的Web应用
一个简单操作需要重新加载全局数据
2、AJAX
AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案。
- 异步的JavaScript:
使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】。
PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。- XML
XML是一种标记语言,是Ajax在和后台交互时传输数据的格式之一利用AJAX可以做:
1、注册时,输入用户名自动检测用户是否已经存在。
2、登陆时,提示用户名密码错误
3、删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。(博客园)
原生ajax
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)。
提交数据:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="text" id="i1"> 9 + 10 <input type="text" id="i2"> 11 = 12 <input type="text" id="i3"> 13 <input type="button" value=‘jquery ajax‘ onclick="add1()"> 14 <input type="button" value=‘原生 ajax‘ onclick="add2()"> 15 </body> 16 <script src="/static/jquery-3.2.1.js"></script> 17 <script> 18 //jquery ajax 提交请求 19 function add1(){ 20 $.ajax({ 21 url:‘/add1/‘, 22 type:‘POST‘, 23 data:{‘a1‘:$(‘#i1‘).val(),‘a2‘:$(‘#i2‘).val()}, 24 success:function(data){ 25 $(‘#i3‘).val(data); 26 } 27 }) 28 } 29 //原生ajax 以get的方式提交请求 30 function add2(){ 31 var xhr= new XMLHttpRequest(); 32 xhr.onreadystatechange=function(){ 33 if(xhr.readyState==4){ 34 alert(xhr.responseText) 35 } 36 }; 37 xhr.open(‘GET‘,‘/add2/?i1=12&i2=19‘); 38 xhr.send(); 39 } 40 //原生ajax 以post的方式提交请求 41 function add2() { 42 var xhr= new XMLHttpRequest(); 43 xhr.onreadystatechange=function(){ 44 if(xhr.readyState==4){ 45 alert(xhr.responseText) 46 } 47 }; 48 xhr.open(‘POST‘,‘/add2/‘); 49 xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘); 50 xhr.send(‘i1=12&i2=19‘); 51 } 52 </script> 53 </html>
XmlHttpRequest对象的主要方法:
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 终止请求
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的值改变时自动触发执行其对应的函数(回调函数) 13 14 c. String responseText 15 服务器返回的数据(字符串类型) 16 17 d. XmlDocument responseXML 18 服务器返回的数据(Xml对象) 19 20 e. Number states 21 状态码(整数),如:200、404... 22 23 f. String statesText 24 状态文本(字符串),如:OK、NotFound...
jquery ajax
jQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能。
- jQuery 不是生产者,而是大自然搬运工。
- 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 });
伪ajax
iframe标签:会创建包含另外一个文档的内联框架,可以在不刷新网页的情况下提交请求
伪ajax 提交数据: 可以在不刷新网页的情况下替form表单提交请求
<form id=‘f1‘ method=‘POST‘ action="/fake_ajax/" target="ifr" >
{% csrf_token %}
<iframe id="ifr" name="ifr" ></iframe>
<input type="text" name="user">
<a onclick="submitForm()">提交</a>
</form>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form id=‘f1‘ method=‘POST‘ action="/fake_ajax/" target="ifr" > 9 {% csrf_token %} 10 <iframe id="ifr" name="ifr" ></iframe> 11 <input type="text" name="user"> 12 <a onclick="submitForm()">提交</a> 13 </form> 14 <script> 15 function submitForm(){ 16 document.getElementById(‘f1‘).submit(); 17 document.getElementById(‘ifr‘).onload=loadframe; 18 } 19 function loadframe(){ 20 var content=document.getElementById(‘ifr‘).contentWindow.document.body.innerText; 21 alert(content); 22 } 23 </script> 24 </body> 25 </html>
上传文件
form表单上传文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action="/f1/" method="post" enctype="multipart/form-data"> 9 {% csrf_token %} 10 <input type="file" name="fafafa"> 11 <input type="submit" value="提交"> 12 </form> 13 </body> 14 </html>
1 def f1(request): 2 if request.method==‘GET‘: 3 return render(request,‘f1.html‘) 4 else: 5 import os 6 file_obj=request.FILES.get(‘fafafa‘) 7 f=open(os.path.join(‘static‘,file_obj.name),‘wb‘) 8 for chunk in file_obj.chunks(): 9 f.write(chunk) 10 return render(request,‘f1.html‘)
基于form组价验证的文件上传
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form method=‘POST‘ action="/f2/" enctype="multipart/form-data"> 9 {% csrf_token %} 10 {{ obj.fafafa }}{{ obj.errors.fafafa.0 }} 11 <input type="submit" value="提交"> 12 </form> 13 </body> 14 </html>
1 class f2Form(Form): 2 fafafa=fields.FileField() 3 4 def f2(request): 5 if request.method==‘GET‘: 6 obj=f2Form() 7 return render(request,‘f2.html‘,{‘obj‘:obj}) 8 else: 9 obj=f2Form(files=request.FILES) 10 if obj.is_valid(): 11 print(‘afdvfdvgrg‘) 12 print(obj.cleaned_data.get(‘fafafa‘).name) 13 print(obj.cleaned_data.get(‘fafafa‘).size) 14 return render(request,‘f2.html‘,{‘obj‘:obj})
原生ajax jquery ajax 伪ajax上传文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>原生ajax上传文件</h1> <input type="file" id="i1"> <a onclick="upload1()">上传</a> <div id="container1"></div> <h1>jquery ajax上传文件</h1> <input type="file" id="i2"> <a onclick="upload2()">上传</a> <div id="container2"></div> <h1>伪ajax上传文件</h1> <form action="/upload/" method="post" id="f1" target="ifr" enctype="multipart/form-data"> <iframe id="ifr" name="ifr"></iframe> <input type="file" name="fafafa"> <a onclick="upload3()">上传</a> <div id="container3"></div> </form> </body> <script src="/static/jquery-3.2.1.js"></script> <script> function upload1() { var formData=new FormData(); formData.append(‘k1‘,‘v1‘); formData.append(‘fafafa‘,document.getElementById(‘i1‘).files[0]); var xhr=new XMLHttpRequest(); // 预览功能 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ var file_path=xhr.responseText; var tag=document.createElement(‘img‘); tag.src=‘/‘+file_path; document.getElementById(‘container1‘).appendChild(tag); } } xhr.open(‘POST‘,‘/upload/‘); xhr.send(formData) } function upload2() { var formData=new FormData(); formData.append(‘k1‘,‘v1‘); formData.append(‘fafafa‘,$(‘#i2‘)[0].files[0]); $.ajax({ url:‘/upload/‘, type:‘post‘, data:formData, contentType:false, processData:false, success:function(arg){ var tag=document.createElement(‘img‘); tag.src=‘/‘+arg; $(‘#container2‘).append(tag); } }) } function upload3(){ document.getElementById(‘f1‘).submit(); document.getElementById(‘ifr‘).onload=loadiframe; } function loadiframe(){ var content=document.getElementById(‘ifr‘).contentWindow.document.body.innerText; var tag=document.createElement(‘img‘); tag.src=‘/‘+content; $(‘#container3‘).append(tag); } </script> </html>
def upload(request): if request.method==‘GET‘: return render(request,‘upload.html‘) else: print(request.POST,request.FILES) file_obj=request.FILES.get(‘fafafa‘) print(file_obj.name) file_path=os.path.join(‘static‘,file_obj.name) with open(file_path,‘wb‘) as f: for chunk in file_obj.chunks(): f.write(chunk) return HttpResponse(file_path)