【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控件）。
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】getopt使用
来源:http://blog.chinaunix.net/uid-21566578-id-438233.html 注意对比:[python]argparse模块 作者:limodou版权所有limod ...
- 【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: ...
随机推荐
- Qt笔记——元对象系统
Qt元对象系统提供了对象间的通信机制:信号和槽.以及执行类形信息和动态属性系统的支持.是标注C++的一个扩展,它使得Qt可以更好的实现GUI图形用户界面编程.Qt的元对象系统不支持C++模板.虽然模板 ...
- Android创建JSON格式数据
Android创建JSON格式数据 作为上一篇博客的补充,简单那解说了一下Android创建JSON格式数据的小Demo. 1. 创建JSON格式数据 对于Android创建JSON格式数据.因为An ...
- tcp/ip ---数据链路层
- php中的匿名函数的注意事项
在php5.3以后,php加入匿名函数的使用,今天在使用匿名的时候出现错误,不能想php函数那样声明和使用,详细看代码 $callback=function(){ return "aa&qu ...
- 关于angularjs在IE里的坑——F12工具打开，功能正常，关闭之后，angularjs not working
前端时间在做项目的时候,用到了angularjs,期间,发现了一个奇葩的问题,就是在IE11浏览器下,点击下方图1上箭头所示的位置,将此处的开关变为图2中箭头所示的样子,但是发觉没有反应,开关还是灰色 ...
- HNU 13411 Reverse a Road II（最大流+BFS）经典
Reverse a Road II Time Limit: 10000ms, Special Time Limit:25000ms, Memory Limit:65536KB Total submit ...
- C++语言基础(14)-typeid
typeid可用来判断类型是否相等: 例如有下面的定义: char *str; ; ; float f; 类型比较 结果 类型比较 结果 typeid(int) == typeid(int) true ...
- C语言基础(17)-作用域
一个C语言变量的作用域可以是代码块 作用域,函数作用域或者文件作用域. 不推荐写法 int a; // 出现了语法的二义性,可能是声明也可能是定义,所以最好定义完成之后声明 void func(); ...
- 141. Linked List Cycle【easy】
141. Linked List Cycle[easy] Given a linked list, determine if it has a cycle in it. Follow up:Can y ...
- org.mockito.exceptions.misusing.CannotStubVoidMethodWithReturnValue
错误原因:mock的时候,不能mock重载的方法 解决方法:直接mock它的父类的方法 org.mockito.exceptions.misusing.CannotStubVoidMethodWith ...