原生Ajax、JQuery、伪Ajax三种方式使用优先级

如果发送的是【普通数据】

  • jQuery
  • XMLHttpRequest
  • iframe

如果发送的是【文件】

  • iframe
  • jQuery(FormData)
  • XMLHttpRequest(FormData)

原生Ajax操作

Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)

1、XmlHttpRequest对象介绍

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...

主要属性

2、用原生Ajax做个请求

HTML文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<input type="button" value="Ajax1" onclick="Ajax1();" /> <script>
function Ajax1(){
var xhr = new XMLHttpRequest();
xhr.open('POST', '/ajax_json/',true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 接收完毕
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>
</html>

处理文件:

def ajax(request):
return render(request,'ajax.html') def ajax_json(request):
print(request.POST)
ret = {'code':True,'data':None}
import json
return HttpResponse(json.dumps(ret))

3、跨浏览器支持 

XmlHttpRequest

  • IE7+, Firefox, Chrome, Opera, etc.

ActiveXObject("Microsoft.XMLHTTP")

  • IE6, IE5
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> <h1>XMLHttpRequest - Ajax请求</h1>
<input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
<input type="button" onclick="XmlPostRequest();" value="Post发送请求" /> <script src="/statics/jquery-1.12.4.js"></script>
<script type="text/javascript"> function GetXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr; } function XhrPostRequest(){
var xhr = GetXHR();
// 定义回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 已经接收到全部响应数据,执行以下操作
var data = xhr.responseText;
console.log(data);
}
};
// 指定连接方式和地址----文件方式
xhr.open('POST', "/test/", true);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
// 发送请求
xhr.send('n1=1;n2=2;');
} function XhrGetRequest(){
var xhr = GetXHR();
// 定义回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 已经接收到全部响应数据,执行以下操作
var data = xhr.responseText;
console.log(data);
}
};
// 指定连接方式和地址----文件方式
xhr.open('get', "/test/", true);
// 发送请求
xhr.send();
} </script> </body>
</html>

基于原生AJAX - Demo

“伪”AJAX

由于HTML标签的iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求,进行偷偷的发送请求

def ajax(request):
return render(request,'ajax.html') def ajax_json(request):
print(request.POST)
ret = {'code':True,'data':None}
import json
return HttpResponse(json.dumps(ret))

处理文件

① Form表单提交到iframe中,页面不刷新

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<input type="button" value="Ajax1" onclick="Ajax1();" /> <form action="/ajax_json/" method="POST" target="ifm1"> <!-- target跟iframe进行关联 -->
<iframe id="ifm1" name="ifm1" ></iframe>
<input type="text" name="username" />
<input type="text" name="email" />
<input type="submit" value="Form提交"/>
</form>
</body>
</html>

② Ajax提交到iframe中,页面不刷新  

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<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> <script src="/static/jquery-1.12.4.js"></script>
<script> function iframeRequest(){
var url = $('#url').val();
$('#ifm').attr('src',url);
}
</script>
</body>
</html>

③ Form表单提交到iframe中,并拿到iframe中的数据

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<input type="button" value="Ajax1" onclick="Ajax1();" /> <form action="/ajax_json/" method="POST" target="ifm1">
<iframe id="ifm1" name="ifm1" ></iframe>
<input type="text" name="username" />
<input type="text" name="email" />
<input type="submit" onclick="sumitForm();" value="Form提交"/>
</form> <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
<script>
function sumitForm(){
$('#ifm1').load(function(){
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text);
console.log(obj)
})
}
</script>
</body>
</html>

  

XmlHttpRequest、JQuery、Iframe进行文件上传

下面分别进行原生Ajax、Ajax、伪Ajax进行上传文件的请求 

def upload(request):
return render(request,'upload.html') def upload_file(request):
username = request.POST.get(('username'))
fafafa = request.FILES.get('fafafa') #获取文件 with open(fafafa.name,'wb') as f:
for item in fafafa.chunks():
f.write(item)
print(username,fafafa)
ret = {'code': True, 'data': request.POST.get('username')}
import json return HttpResponse(json.dumps(ret))

处理文件

① 原生Ajax(XmlHttpRequest)上传文件+定制好看的上传按钮:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.upload{
display: inline-block;padding: 10px;
background-color: brown;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 90;
}
.file{
width: 100px;height: 50px;opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 100;
}
</style>
</head>
<body>
<div style="position: relative;width: 100px;height: 50px;">
<input class="file" type="file" id="fafafa" name="afafaf" />
<a class="upload">上传</a>
</div>
<input type="button" value="提交XHR" onclick="xhrSubmit();" /> <script>
function xhrSubmit(){
// $('#fafafa')[0]
var file_obj = document.getElementById('fafafa').files[0]; //获取文件对象 var fd = new FormData();
fd.append('username','root');
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);
}
</script>
</body>
</html>

② JQuery进行文件的上传:  

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.upload{
display: inline-block;padding: 10px;
background-color: brown;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 90;
}
.file{
width: 100px;height: 50px;opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 100;
}
</style>
</head>
<body>
<div style="position: relative;width: 100px;height: 50px;">
<input class="file" type="file" id="fafafa" name="afafaf" />
<a class="upload">上传</a>
</div>
{# <input type="button" value="提交XHR" onclick="xhrSubmit();" />#}
<input type="button" value="提交jQuery" onclick="jqSubmit();" />
<div id="preview"></div> <script src="/static/jquery-1.12.4.js"></script>
<script>
function jqSubmit(){
// $('#fafafa')[0]
var file_obj = document.getElementById('fafafa').files[0]; var fd = new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj); $.ajax({
url: '/upload_file/',
type: 'POST',
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success:function(arg,a1,a2){
console.log(arg);
console.log(a1);
console.log(a2);
// Object {readyState: 4, responseText: "{"data": "root", "code": true}", status: 200, statusText: "OK"}
}
})
}
</script>
</body>
</html>

上面两种方式都用到FormData(),但是如果是IE浏览器的话是不支持FormData(),所以就得用到下面这种方式

③  Iframe进行文件的上传:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" />
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function iframeSubmit(){
$('#ifm1').load(function(){
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text);
console.log(obj)
})
}
</script>
</body>
</html>

上传文件时图片预览

① 点击上传文件提交

处理文件:

def upload(request):
return render(request,'upload.html') 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) #static下创建imgs目录
with open(img_path,'wb') as f:
for item in fafafa.chunks():
f.write(item)
print(username,fafafa)
ret = {'code': True, 'data': img_path}
import json return HttpResponse(json.dumps(ret))

HTML文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" />
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form>
<div id="preview"></div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function iframeSubmit(){
$('#ifm1').load(function(){
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text);
console.log(obj) $('#preview').empty();
var imgTag = document.createElement('img');
imgTag.src = "/" + obj.data;
$('#preview').append(imgTag);
})
}
</script>
</body>
</html>

② 选择文件后,直接上传

HTML文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" onchange="changeUpalod();" /> //onchange 选中文件时触发
{# <input type="submit" onclick="iframeSubmit();" value="Form提交"/>#}
</form>
<div id="preview"></div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function changeUpalod(){
$('#ifm1').load(function(){                //load 绑定load事件,有数据时执行
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text); $('#preview').empty();
var imgTag = document.createElement('img');
imgTag.src = "/" + obj.data;
$('#preview').append(imgTag);
});
$('#form1').submit();
}
</script>
</body>
</html>

  

 

更多-》跳转

Python开发【前端】:Ajax(二)的更多相关文章

  1. Python开发【十二章】:ORM sqlalchemy

    一.对象映射关系(ORM) orm英文全称object relational mapping,就是对象映射关系程序,简单来说我们类似python这种面向对象的程序来说一切皆对象,但是我们使用的数据库却 ...

  2. PYTHON开发--面向对象基础二

    一.成员修饰符 共有成员 私有成员, __字段名 - 无法直接访问,只能间接访问 1.     私有成员 1.1  普通方法种的私有成员 class Foo: def __init__(self, n ...

  3. python开发初期及二次开发C api

    1,python2 or python 区别, https://wiki.python.org/moin/Python2orPython3 python software foundation 2,p ...

  4. Python开发【前端】:Ajax

    Ajax Ajax即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = ...

  5. Python开发【前端】:Ajax(一)

    Ajax Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 JavaScr ...

  6. Python开发【前端】:jQuery

    jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是&qu ...

  7. Python开发【前端】:DOM

    DOM(文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页 ...

  8. Python开发【前端】:JavaScript

    JavaScript入门 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...

  9. Python开发【第二十二篇】:Web框架之Django【进阶】

    Python开发[第二十二篇]:Web框架之Django[进阶]   猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...

  10. Python web前端 11 form 和 ajax

    Python web前端 11 form 和 ajax 一.打开服务器 将handlers.py.httpd.py和libs.py三个文件放入新文件夹中,双击打开httpd.py文件即可 二.ajax ...

随机推荐

  1. HGNC 数据库-人类基因组数据库

    HGNC 全称为HUGO Gene Nomenclature Committee, 叫做 HUGO基因命名委员会,负责对人类基因组上包括蛋白编码基因, ncRNA基因,甲基因和其他基因在内的所有基因提 ...

  2. 【Java面试题】48 GC是什么? 为什么要有GC?

    GC是垃圾收集的意思(Gabage Collection),内存处理是编程人员容易出现问题的地方,忘记或者错误的内存回收会导致程序或系统的不稳定甚至崩溃,Java提供的GC功能可以自动监测对象是否超过 ...

  3. ChemDraw 16最新版本发布 更效率科研的首选

    ChemDraw一直是全球领先的科学绘图软件,致力于为科学家.教师以及学生提供最新的智能应用程序.ChemDraw 16版本相较于15版本做出了较大的改进,大大缩短科研时间,提高科研效率.扩展Name ...

  4. Oracle居然把Java EE的未来押在Rest API上了

        然而Lehman并不赞同Rahman对Java EE 9的说法,所以他重申Oracle暂时专注于Java EE 8."我们正在倾全力推出EE 8,现在这是我们主要的关注点," ...

  5. [mysql] Install/Remove of the Service Denied

    在windos 的cmd下安装mysql 在mysql的bin目录下面执行: mysqld --install 报错: 信息如下: Install/Remove of the Service Deni ...

  6. SQLServer------begin tran/commit tran事务的使用方法

    转载: http://www.cnblogs.com/accumulater/p/6089838.html 介绍 BEGIN TRAN 标记事务开始 COMMIT TRAN 提交事务 一般把DML语句 ...

  7. VMware 12安装虚拟机Mac OS X 10.10(VMware12安装/共享文件夹)

    推荐电脑配置 1:Inter I5及以上 (A卡请自行百度大神解决方案) 必须开启CPU虚拟化:开机进入BIOS--->Intel Virtualization Technology---> ...

  8. HTML5开发之 -- 模态突出窗(bootstrap)

    最近在学习web端开发相关,bootstrap非常好用! 有个模态弹出窗的效果,在此记录下: 1.导入: <script src="libs/js/jquery-3.2.1.min.j ...

  9. 解决 ssh 登录到ubuntu server 慢的问题

    最近在服务器上使用ubuntu系统,服务器上开启sshd服务,在客户端处使用ssh登录到服务器的时候出现卡顿的现象. 在网上搜索了解决方案,主要是: 1. 修改服务器的 /etc/ssh/sshd_c ...

  10. java基础---->多线程之synchronized(六)

    这里学习一下java多线程中的关于synchronized的用法.我来不及认真地年轻,待明白过来时,只能选择认真地老去. synchronized的简单实例 一. synchronized在方法上的使 ...