【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: ...
随机推荐
- 使用AVPlayer制作一个播放器
代码地址如下:http://www.demodashi.com/demo/11685.html AVPlayer 是一个强大的视频播放器,可以播放多种格式的视频,缺点是没有控制界面,需要自己去实现. ...
- SAXReader解析xml文件demo
1. 加入jar包 2. 代码解析 package practice; import java.io.File; import java.util.List; import org.dom4j.Doc ...
- <转>c++ builder JSONCPP 注意事项 XE2 解决编译问题 _Mfl
在C++Builder中使用JSONCPP需要注意的问题 1.使用STL的MAP而不是内建的MAP这个问题实际上和编译器无关.内建的MAP不是很稳定,当解析数据大于600K左右时,会崩溃.虽然一般来说 ...
- sql DATEPART() MONTH() convert() cast() dateadd() DATEDIFF() with(nolock)
DATEPART() 函数用于返回日期/时间的单独部分,比如年.月.日.小时.分钟等等. 语法 DATEPART(datepart,date) date 参数是合法的日期表达式.datepart 参数 ...
- CentOS-6.*安装配置SVN
安装说明 系统环境:CentOS-6.3 安装方式:yum install (源码安装容易产生版本兼容的问题) 安装软件:系统自动下载SVN软件 检查已安装版本 #检查是否安装了低版本的SVN [ro ...
- ucosii任务切换OS_TASK_SW()
stm32F103中任务切换定义 //任务切换宏,由汇编实现. #define OS_TASK_SW() OSCtxSw() os_cpu_a.asm中任务切换函数的定义 NVIC_INT_CTRL ...
- 汇编里的IMPORT和EXPORT
IMPORT ,定义表示这是一个外部变量的标号,不是在本程序定义的EXPORT ,表示本程序里面用到的变量提供给其他模块调用的.以上两个在汇编和C语言混合编程的时候用到刚看到一篇不错的BLOG,解说C ...
- Failed to add reference to 'System.Net.Http'. Please make sure that it is in the Global Assembly Cache.
关闭VS再来就好了
- spring 基础回想 tips01
spring 属性注入时,类中必须有setter 和 getter方法. spring配置文件里: java业务类中注入DAO: private StudentDao studentDao; // 通 ...
- 辛星跟您玩转vim第二节之用vim命令移动光标
首先值得一提的是,我的vim教程pdf版本号已经写完了,大家能够去下载.这里是csdn的下载地址:csdn下载.假设左边的下载地址挂掉了,也能够自行在浏览器以下输入例如以下地址进行下载:http:// ...