python Django之Ajax
AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案。
异步的JavaScript:
使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】。
PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。
XML
XML是一种标记语言,是Ajax在和后台交互时传输数据的格式之一
一、原生AJAX
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)。
1、XmlHttpRequest对象介绍
我们一般使用都是通过jquery来引用Ajax(jquery本身没有Ajax功能,它只是Ajax的搬运工)
原生Ajax使用案例如下:
1 from django.conf.urls importurl2 from django.contrib importadmin3 from app01 importviews4 urlpatterns =[5 url(r'^admin/', admin.site.urls),6 url(r'^add1/', views.add1),7 url(r'^add2/', views.add2),8 url(r'^fake_ajax/', views.fake_ajax),9 ]
urls
1 from django.shortcuts importrender,redirect,HttpResponse2
3 #Create your views here.
4
5 defadd1(request):6 a1= int(request.POST.get('i1'))7 a2= int(request.POST.get('i2'))8 return HttpResponse(a1+a2)9
10
11 defadd2(request):12 if request.method=='GET':13 i1=request.GET.get('i1')14 i2=request.GET.get('i2')15 print('add2.....')16 return HttpResponse(i1+i2)
原生 Ajax views
1
2
3
4
5
Title6
7
8
9 +
10
11 =
12
13
14 {#绑定一个点击事件#}
15
16 {#绑定一个点击事件#}
17
18
19 {#=============================================常用方式========================================#}
20 function add1() {21 $.ajax({22 url:'/add1/',23 type:'POST',24 data:{'i1':$('#i1').val(),'i2':$('#i2').val()},25 {#通过jquery获取标签的值#}
26 success:function (arg) {27 {#回调函数,把arg参数传进去#}
28 $('#i3').val(arg);29 {#通过jquery设置i3标签的值为arg变量的内容#}
30 }31 })32 }33
34
35 function add2() {36 {#==========================================原生Ajax GET方式======================================#}
37 var xhr =new XMLHttpRequest();38 {#使用原生的Ajax 创建一个对象#}
39 xhr.onreadystatechange=function () {40 {#为对象设置回调函数#}
41 if(xhr.readyState==4){42 {#如果对象执行时的数值等于4就执行下边的#}
43 alert(xhr.responseText);44 {#弹出提示框,框内的内容是对象返回的文本信息#}
45 }46
47 };48 xhr.open('GET','/add2/?i1=12&i2=19');49 {#通过对象创建一个连接 参数(GET传输方式,/add2/传输的地址url ?i1=12&i2=19这是放在url上的数据) 通过get方式传输,把传输的内容放在请求头中,传输到/add2/url#}
50 xhr.send();51 {#对象调用进行发送#}
52
53
54 {#==========================================POST方式======================================#}
55 var xhr =new XMLHttpRequest()56 xhr.onreadystatechange =function () {57 if (xhr.readyState == 4){58 alert(xhr.responseText);59 }60
61 }62 };63 xhr.open('POST','/add2/');64 {#通过对象创建一个连接 参数(post传输方式,/add2/传输的地址url ) 通过get方式传输,把传输的内容放在请求体中,传输到/add2/url#}
65 xhr.setRequestHeader('Content-Type','application/x-www-from-urlencoded');66 {#设置请求体,因为后端需要进行请求体的校验#}
67 xhr.send('i1=12&i2=19');68 {#设置要发送的数据#}
69
70
71
原生的 Ajax html
XmlHttpRequest对象的主要方法:
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()
终止请求
XmlHttpRequest对象的主要属性:
a. Number readyState
状态值(整数)
详细:
0-未初始化,尚未调用open()方法;
1-启动,调用了open()方法,未调用send()方法;
2-发送,已经调用了send()方法,未接收到响应;
3-接收,已经接收到部分响应数据;
4-完成,已经接收到全部响应数据;
b. Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数(回调函数)
c. String responseText
服务器返回的数据(字符串类型)
d. XmlDocument responseXML
服务器返回的数据(Xml对象)
e. Number states
状态码(整数),如:200、404...
f. String statesText
状态文本(字符串),如: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, html7
8
9 jQuery.post(...)10 所有参数:11 url: 待载入页面的URL地址12 data: 待发送 Key/value 参数13 success: 载入成功时回调函数14 dataType: 返回内容格式,xml, json, script, text, html15
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 elsewill be returned as a string60
61 converters: 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数62 $.ajax({63 accepts: {64 mycustomtype: 'application/x-some-custom-type'
65 },66
67 // Expect a `mycustomtype` back fromserver68 dataType: 'mycustomtype'
69
70 // Instructions forhow to deserialize a `mycustomtype`71 converters: {72 'text mycustomtype': function(result) {73 //Do Stuff74 returnnewresult;75 }76 },77 });
jQuery Ajax 方法列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 function JqSendRequest(){18 $.ajax({19 url: "http://c2.com:8000/test/",20 type: 'GET',21 dataType: 'text',22 success: function(data, statusText, xmlHttpRequest){23 console.log(data);24 }25 })26 }27
28
29
30
31
基于jQueryAjax - Demo
二、伪Ajax 顾名思义Ajax就是伪造而成的
由于HTML标签的iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求。
请输入要加载的地址:
加载页面位置:
window.οnlοad= function(){
var myDate = new Date();
document.getElementById('currentTime').innerText = myDate.getTime();
};
function LoadPage(){
var targetUrl = document.getElementById('url').value;
document.getElementById("iframePosition").src = targetUrl;
}
1 deffake_ajax(request):2 print(request.POST)3 return render(request,'fake_ajax.html',{'obj':'提交成功'})
伪Ajax views
1
2
3
4
5
Title6
7
8
9 {#通过form标签指定以post传输 传输的url是fake_ajax 提交方式使用form表单里的ifr 这样就达到不刷新页面也能把所有信息打包发送#}
10 {% csrf_token %}11 {#csrf验证#}
12
13 提交
14 {#绑定点击事件#}
15
16 {#使用iframe 标签 访问http://www.baidu.com链接 这样就成功的伪造了一个Ajax#}
17
18
19 function submitForm() {20 {#定义函数#}
21 document.getElementById('ifr').οnclick=loadIframe;22 {#查找id是ifr的标签设置一个点击事件,相当于绑定一个回调函数#}
23 document.getElementById('f1').submit();24 {#找到id是f1的标签.触发提交函数#}
25 }26
27 function loadIframe() {28 {#定义一个相当于回调函数的函数#}
29 alert(123);30 }31
32
33
伪 Ajax html
三、使用原生Ajax做一个文件上传功能
1
2
3
4
5
Title6
7
8
9
原生Ajax上传文件
10
11 上传
12
13
14
15
16 {#======================================================原生Ajax上传文件======================================#}
17 function upload1() {18 {#定义一个点击事件函数#}
19 var formData =new FormData();20 {#通过FornData 实例化一个对象,FormData是个特殊的功能,可以传输文件和字符串#}
21 formData.append('k1','v1');22 {#给对象添加俩个值键是k1 值是v1#}
23 formData.append('fafafa',document.getElementById('i1').files[0]);24 {#给对象添加键是fafafa 值是i1标签的第一个#}
25 var xhr =new XMLHttpRequest();26 {#实例化一个对象#}
27 xhr.onreadystatechange =function () {28 {#给对象设置一个回调函数#}
29 if (xhr.readyState==4){30 {#判断如果xhr对象的执行数字等于4#}
31 var file_path =xhr.responseText;32 {#获取对象的文本信息赋值给file_path responseText是返回文本字符串#}
33 var tag = document.createElement('img');34 {#创建一个img标签,标签名字是tag#}
35 tag.src='/'+file_path;36 {#通过标签名创建一个图片路径#}
37 document.getElementById('container1').appendChild(tag);38 {#通过id找到container1标签 然后再通过标签的名添加个子标签#}
39 }40 }41 };42 xhr.open('POST','/upload/');43 {#对象调用open方法创建一个连接,参数post传输方式 /upload/传输地址url#}
44 xhr.send(formData);45 {#通过对象发送FormData实例化的对象#}
46
47
48
49
50
原生Ajax 文件上传html
1
2
3
4
5
Title6
7
8
9
10
JQuery Ajax上传文件
11
12 上传
13
14
15
16 {#======================================================JQuery Ajax上传文件======================================#}
17 function upload2() {18 {#定义一个函数#}
19 var formData =new FormData();20 {#通过FornData 实例化一个对象,FormData是个特殊的功能,可以传输文件和字符串#}
21 formData.append('k1','v1');22 {#给对象添加俩个值键是k1 值是v1#}
23 formData.append('fafafa',$('#i2')[0].files[0]);24 {#把fafafa作为键 值是id等于i2的标签转换成Dom对象的第一个#}
25 $.ajax({26 url:'/upload/',27 type:'POST',28 data:formData,29 contentType:false,30 {#告诉后端不进行请求头设置#}
31 processData:false,32 {#告诉后端不进行请求头设置#}
33 success:function (arg) {34 {#回调函数#}
35 var tag =document.createElement('img');36 {#创建一个img标签名称为tag#}
37 tag.src='/'+arg;38 {#为名字为tag的标签设置路径#}
39 $('#container2').append(tag);40 {#为id是container2标签的添加名字是tag的标签为子标签#}
41 }42 })43
44 }45
46
47
48
49
50
51
JQuery Ajax 文件上传 html
Title原生Ajax上传文件
上传
JQuery Ajax上传文件
上传
伪 Ajax上传文件
上传
{#======================================================原生Ajax上传文件======================================#}
function upload1() {
{#定义一个点击事件函数#}
var formData =new FormData();
{#通过FornData 实例化一个对象,FormData是个特殊的功能,可以传输文件和字符串#}
formData.append('k1','v1');
{#给对象添加俩个值键是k1 值是v1#}
formData.append('fafafa',document.getElementById('i1').files[0]);
{#给对象添加键是fafafa 值是i1标签的第一个#}
var xhr =new XMLHttpRequest();
{#实例化一个对象#}
xhr.onreadystatechange =function () {
{#给对象设置一个回调函数#}
if (xhr.readyState==4){
{#判断如果xhr对象的执行数字等于4#}
var file_path =xhr.responseText;
{#获取对象的文本信息赋值给file_path responseText是返回文本字符串#}
var tag = document.createElement('img');
{#创建一个img标签,标签名字是tag#}
tag.src='/'+file_path;
{#通过标签名创建一个图片路径#}
document.getElementById('container1').appendChild(tag);
{#通过id找到container1标签 然后再通过标签的名添加个子标签#}
}
}
};
xhr.open('POST','/upload/');
{#对象调用open方法创建一个连接,参数post传输方式 /upload/传输地址url#}
xhr.send(formData);
{#通过对象发送FormData实例化的对象#}
{#======================================================JQuery Ajax上传文件======================================#}
function upload2() {
{#定义一个函数#}
var formData =new FormData();
{#通过FornData 实例化一个对象,FormData是个特殊的功能,可以传输文件和字符串#}
formData.append('k1','v1');
{#给对象添加俩个值键是k1 值是v1#}
formData.append('fafafa',$('#i2')[0].files[0]);
{#把fafafa作为键 值是id等于i2的标签转换成Dom对象的第一个#}
$.ajax({
url:'/upload/',
type:'POST',
data:formData,
contentType:false,
{#告诉后端不进行请求头设置#}
processData:false,
{#告诉后端不进行请求头设置#}
success:function (arg) {
{#回调函数#}
var tag =document.createElement('img');
{#创建一个img标签名称为tag#}
tag.src='/'+arg;
{#为名字为tag的标签设置路径#}
$('#container2').append(tag);
{#为id是container2标签的添加名字是tag的标签为子标签#}
}
})
}
function upload3() {
{# 定义一个函数#}
document.getElementById('ifr').οnlοad=loadIframe;
{# 查找id是ifr的标签并设置在加载时调用loadIframe函数#}
document.getElementById('f1').submit();
{#查找id是f1的标签并启动#}
}
function loadIframe() {
{#定义一个函数#}
var content =document.getElementById('ifr').contentWindow.document.body.innerText;
{#查找id是ifr的标签,的window内容的请求体的文本信息#}
var tag = document.createElement('img');
{#创建一个img标签并设置标签名字是tag#}
tag.src='/'+content;
{#找到名字是tag标签设置路径#}
$('#container3').append(tag);
{#找到id 是container3的标签添加一个名字是tag的标签tag#}
}