34.Ajax
时间:2022-05-08
本文章向大家介绍34.Ajax,主要内容包括优先级、原生Ajax、伪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()
终止请求
主要方法
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做个请求
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>
views.py
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
由于HTML标签的iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求,进行偷偷的发送请求
views.py
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))
1.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>
2.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>
3.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>
文件上传的三种方式
原生Ajax、Ajax、伪Ajax进行上传文件
views.py
from django.shortcuts import render,HttpResponse
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))
1.原生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>
2.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(),所以就得用到下面这种方式
3.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>
上传文件时预览
1.预览
views.py
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))
upload.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>
2.选择文件后直接上传
<!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>
- 比特币是什么?比特币从何而来?
- Django内置Admin
- Python内置函数property()使用实例
- 区块链技术的历史发展的不同阶段
- 微信力推搜一搜,培养用户微信搜索习惯,搜一搜直接给红包
- datetime
- [转自JeffreyZhao]在LINQ to SQL中使用Translate方法以及修改查询用SQL
- Flask-SQLAlchemy
- 2017全球存储大会:存储设备面临三大挑战
- cobbler自动安装系统(Centos7.X)
- Python接口自动化-7-unittest
- cobbler自动安装系统(Centos7.X)
- Linux NTP时间服务器
- 子查询的另一种方式——映射
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 高维数据 | R语言数据可视化之热力图
- 高维数据 | R语言数据可视化之日历图
- 打卡群刷题总结0804——二叉树的中序遍历
- 基础知识 | R语言数据管理之SQL语句
- 文本挖掘| 某作者文章的词频统计排序
- spring注解配置之@Configuration
- TS核心知识点总结及项目实战案例分析
- 用Python开发 写个消消乐小游戏
- 原理+代码|Python实战多元线性回归模型
- nestjs+vue+ts打造一个酷炫的星空聊天室(含完整数据库设计)
- JUnit 5基础指南
- 记录一则expdp任务异常处理案例
- Jenkins打造多分支流水线指南
- Spring中的设计模式
- java单元/集成测试中使用Testcontainers