ajax - xhr level2新特性 json等众多内容
1.
今天的内容其实挺多的，我们慢慢来说。首先第一个是xhr的基本使用，什么是xhr？
XMLHTTPRequest是浏览器提供的js对象，可以请求服务器上的数据资源，包括我们前面一直用的jq里面的三个请求资源的方法都是基于xhr来封装的。
那么首先我们看到xhr的get请求怎么来实现
首先要创建xhr实例通过new来实现
然后调用open函数，里面值为请求方式以及url
第三步调用send函数
第四步监听onreadyStateChange事件在这个事件里面要注意一下请求状态和服务器响应状态的固定写法，还有服务器响应回的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.创建xhr对象
var xhr = new XMLHttpRequest()
// 2.调用open函数 决定请求方式和url
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')
// 3.调用send函数
xhr.send()
// 4.监听事件
xhr.onreadystatechange = function() {
// 4.1注意请求状态和服务器响应状态固定写法
if (xhr.readyState ==4 && xhr.status == 200) {
// 4.2获取相应的数据
console.log(xhr.response);
}
}
</script>
</body>
</html>0.2
1
我们看到在监听请求状态变化事件里有一个readystate的属性这个属性表示ajax当前请求所处的状态，其中0表示xhr对象以创建，但请求未调用open。1表示已调用open函数。2表示已调用send函数。3表示数据接收中。最后4表示一切请求完成
那么xhr带参的get请求怎么来实现的呢？只需要在open函数的url里面接一个查询字符串即可
xhr.open('get', 'http://www.ssfddaf.com/api?name=%df%fd%gf')
那么什么是查询字符串？
在url末尾加上？参数=值多个参数间用&来连接这就是查询字符串，无论是jQuery的三个请求方式还是xhr指定的参数其本质都是在url后带查询字符串
这里还要了解一个点url编码与解码
url中只允许出线英文不允许中文等其他语种，所以他就会把除英文外其他语种转换为%开头带两个字符的样式来代替
编码encodeURI('中文;) 解码decodeURI（%的字符）三组%表示一个中文
2.
接下来我们看到xhr怎么发起post请求
第一步创建对象
第二部open函数把请求方式改为post
第三步设置content-type 这是一个固定写法
xhr.setRequestHeader（‘content-type’， ‘application/x-www-form-urlencoded’）
第四步调用send函数 post的参数在这里添加以查询字符串的方式添加进来
第五步监听事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.创建xhr对象
var xhr = new XMLHttpRequest()
// 2.调用open函数
xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook')
// 3.设置cententtype
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
// 4.调用send函数
xhr.send('bookname=水府传&author=我')
// 5.监听事件
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
</script>
</body>
</html>
3.
数据交换格式
即服务器与客户端之间进行数据传输与交换的格式，XML和JSON这两种
XML我们用的比较少，它是可扩展标记语言，跟html很相似
JSON
什么事json，就是js对象和数组的字符串表示法，其中本质还是一个字符串它是轻量级文本数据交换格式
它的结构为有两种对象结构和数组结构
对象结构
‘｛key：value｝’咋一看跟对象很相似，但是首先外面会有引号，其次键值是字符类型必须加双引号
数组结构
【a，a】
要注意的是键值的双引号，json中不能写注释，不能使用undefined和函数作为值
json和对象互转
obj = JSON.parse（json）（反序列化）
json = JSON.stringify（obj）（序列化）
4.
封装自己的ajax函数
①先封装一个处理data对象为查询字符串的函数
②封装函数xhr
③判断不同的请求类型达到不同的方式
这个总之记住一点就是xhr调用请求的总体步骤就没得问题
// 1.先封装函数处理传进来的参数为查询字符串
function revolveData(data) {
var arr = []
for (var k in data) {
arr[arr.length] = k + '=' + data[k]
}
var str = arr.join('&')
return str
}
// console.log(revolveData({name : '张三', age : 19}));
// 2。封装主体函数
function ajaxMine(obj) {
var xhr = new XMLHttpRequest()
var str = revolveData(obj.data)
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse(xhr.response)
obj.success(res)
}
}
// 3.判断不同的请求，做到不同的操作
if (obj.method.toUpperCase() == 'GET') {
xhr.open(obj.method, obj.url + '?' +str)
xhr.send()
} else if (obj.method.toUpperCase() == 'POST') {
xhr.open(obj.method, obj.url)
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send(str)
}
}
验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./封装自己的ajax函数.js"></script>
<script>
/* ajaxMine({
method : 'get',
url : 'http://www.liulongbin.top:3006/api/getbooks',
data : {
id : 2
},
success : function(res) {
console.log(res);
}
}) */
ajaxMine({
method : 'post',
url : 'http://www.liulongbin.top:3006/api/addbook',
data : {
bookname : '收首饰',
author : '东风似旧',
publisher : '身法'
},
success : function(res) {
console.log(res);
}
})
</script>
</body>
</html>
5.
xhr level2新特性
在我们旧版的xhr缺点就是不支持文件上传而且没有进度信息只有完没完成
在我们新版xhr
支持文件上传，有进度信息，还可以设置http时限，还可使用formdata对象管理表单数据
接下来我会一一开始xhr这四个新特性
5.1
首先第一个设置Http时限，也就是在规定时间如果还没有完成请求任务那么这个请求就失败了
xhr.timeout = 2000
与之对应的还有一个ontimeout的事件在超时后会做些什么
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest()
xhr.timeout = 50
xhr.ontimeout = function() {
console.log('请求超时了');
}
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
</script>
</body>
</html>
5..2
formdata管理表单
因为我们ajax主要是用来提交表单数据的嘛，所以H5就新增了一个FormData对象用来模拟表单操作
①新建formdata对象
②为formdata添加表单项
③创建xhr
④用xhr完成请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.创建FormData对象
var fd = new FormData()
// 2.往里面添加表单项
fd.append('uname', '王五')
fd.append('age' , 29)
// 3，创建xhr对象
var xhr = new XMLHttpRequest()
// 4.使用xhr对象制定请求类型与地址
xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata')
// 5.直接提交，formdata对象，这与提交网页表单的效果完全一样
xhr.send(fd)
// 6.验证
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responsete);
}
}
</script>
</body>
</html>
formdata还有一个用法，就是可以用来获取表单的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text" name="uname">
<input type="password" name="pwd">
<input type="submit" value="提交">
</form>
<script>
var form = document.querySelector('form')
form.onsubmit = e => {
e.preventDefault()
var xhr = new XMLHttpRequest()
var fd = new FormData(form)
xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
}
</script>
</body>
</html>
5.3
上传文件
①定义UI结构
②验证是否选择了文件
③像formdata追加文件
④用xhr发起上传请求
⑤监听事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.定义ui结构 -->
<!-- 1.1文件选择框 -->
<input type="file">
<!-- 1.2上传按钮 -->
<input type="submit" value="上传文件">
<!-- 1.3img标签 用来显示上传成功后的图片 -->
<img src="" alt="">
<script>
// 2.验证是否上传了文件
var uploadBtn = document.querySelector('input:nth-of-type(2)')
uploadBtn.addEventListener('click', function() {
// 2.1注意这里这个。files它是一个数组存放的是文件
let files = document.querySelector('input:first-child').files
if (files.length > 0) {
// 3.像formdata中追加文件
var fd = new FormData()
// avator为头像假装这里是上传的头像
fd.append('avatar', files[0]) // 4.使用xhr发起上传文件请求
var xhr = new XMLHttpRequest()
xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
// 5.监听事件
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseText);
let imgData = JSON.parse(xhr.responseText)
if (imgData.status == 200) {
document.querySelector('img').src = 'http://www.liulongbin.top:3006' + imgData.url
} else {
console.log('上传文件失败');
}
}
}
} else {
return alert('请上传文件')
}
})
</script>
</body>
</html>
5.4
显示上传进度
通过xhr.upload.onprogress事件来监听这里面有三个属性值得注意一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.定义ui结构 -->
<!-- 1.1文件选择框 -->
<input type="file">
<!-- 1.2上传按钮 -->
<input type="submit" value="上传文件">
<!-- 1.3img标签 用来显示上传成功后的图片 -->
<img src="" alt="">
<script>
// 2.验证是否上传了文件
var uploadBtn = document.querySelector('input:nth-of-type(2)')
uploadBtn.addEventListener('click', function() {
// 2.1注意这里这个。files它是一个数组存放的是文件
let files = document.querySelector('input:first-child').files
if (files.length > 0) {
// 3.像formdata中追加文件
var fd = new FormData()
// avator为头像假装这里是上传的头像
fd.append('avatar', files[0]) // 4.使用xhr发起上传文件请求
var xhr = new XMLHttpRequest() // --------------------------------
// 1.上传进度监听事件
xhr.upload.onprogress = e => {
// 2.参数一 e.lengthComputable是一个布尔值，表示当前上传的资源是否具有可计算的长度要有才能进去
if (e.lengthComputable) {
// 参数二e.loaded已传输的字节
// 参数三e.total需传输的总字节
var percenComplete = Math.ceil((e.loaded / e.total) * 100)
console.log(percenComplete);
}
}
xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
// 5.监听事件
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseText);
let imgData = JSON.parse(xhr.responseText)
if (imgData.status == 200) {
document.querySelector('img').src = 'http://www.liulongbin.top:3006' + imgData.url
} else {
console.log('上传文件失败');
}
}
}
} else {
return alert('请上传文件')
}
})
</script>
</body>
</html>
知道了上传进度我们就可以通过bootstrap来一个进度条板的上传进度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../day01/lib/bootstrap.css">
</head>
<body>
<!-- 1.定义ui结构 -->
<!-- 1.1文件选择框 -->
<input type="file">
<!-- 1.2上传按钮 -->
<input type="submit" value="上传文件">
<!-- 1.3img标签 用来显示上传成功后的图片 -->
<img src="" alt=""> <!-- 进度条 -->
<div class="progress" style="width: 500px;">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
0%
</div>
</div>
<script>
// 2.验证是否上传了文件
var uploadBtn = document.querySelector('input:nth-of-type(2)')
uploadBtn.addEventListener('click', function() {
// 2.1注意这里这个。files它是一个数组存放的是文件
let files = document.querySelector('input:first-child').files
if (files.length > 0) {
// 3.像formdata中追加文件
var fd = new FormData()
// avator为头像假装这里是上传的头像
fd.append('avatar', files[0]) // 4.使用xhr发起上传文件请求
var xhr = new XMLHttpRequest() // --------------------------------
// 1.监听事件
var program = document.querySelector('.progress-bar')
xhr.upload.onprogress = e => {
// 2.参数一 e.lengthComputable是一个布尔值，表示当前上传的资源是否具有可计算的长度要有才能进去
if (e.lengthComputable) {
// 参数二e.loaded已传输的字节
// 参数三e.total需传输的总字节
var percenComplete = Math.ceil((e.loaded / e.total) * 100)
// console.log(percenComplete);
program.style.width = percenComplete + '%'
program.innerText = '%' + percenComplete
}
}
xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
// 5.监听事件
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseText);
let imgData = JSON.parse(xhr.responseText)
if (imgData.status == 200) {
document.querySelector('img').src = 'http://www.liulongbin.top:3006' + imgData.url
} else {
console.log('上传文件失败');
}
}
}
} else {
return alert('请上传文件')
}
})
</script>
</body>
</html>
最后完善上传成功的进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../day01/lib/bootstrap.css">
</head>
<body>
<!-- 1.定义ui结构 -->
<!-- 1.1文件选择框 -->
<input type="file">
<!-- 1.2上传按钮 -->
<input type="submit" value="上传文件">
<!-- 1.3img标签 用来显示上传成功后的图片 -->
<img src="" alt=""> <!-- 进度条 -->
<div class="progress" style="width: 500px;">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
0%
</div>
</div>
<script>
// 2.验证是否上传了文件
var uploadBtn = document.querySelector('input:nth-of-type(2)')
uploadBtn.addEventListener('click', function() {
// 2.1注意这里这个。files它是一个数组存放的是文件
let files = document.querySelector('input:first-child').files
if (files.length > 0) {
// 3.像formdata中追加文件
var fd = new FormData()
// avator为头像假装这里是上传的头像
fd.append('avatar', files[0]) // 4.使用xhr发起上传文件请求
var xhr = new XMLHttpRequest() // --------------------------------
// 1.监听事件
var program = document.querySelector('.progress-bar')
xhr.upload.onprogress = e => {
// 2.参数一 e.lengthComputable是一个布尔值，表示当前上传的资源是否具有可计算的长度要有才能进去
if (e.lengthComputable) {
// 参数二e.loaded已传输的字节
// 参数三e.total需传输的总字节
var percenComplete = Math.ceil((e.loaded / e.total) * 100)
// console.log(percenComplete);
program.style.width = percenComplete + '%'
program.innerText = '%' + percenComplete
}
}
// -----------------------------------
// 2.上传成功进度条变化
xhr.upload.onload = () => {
program.className = ''
program.className = 'progress-bar progress-bar-success'
}
xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
// 5.监听事件
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseText);
let imgData = JSON.parse(xhr.responseText)
if (imgData.status == 200) {
document.querySelector('img').src = 'http://www.liulongbin.top:3006' + imgData.url
} else {
console.log('上传文件失败');
}
}
}
} else {
return alert('请上传文件')
}
})
</script>
</body>
</html>
6.
jQuery高级用法
用jq来实现文件上传
①定义ui结构和前面一样
②验证是否选择文件
③向formdata追加文件
④使用jq发起上传请求
⑤jq实现loading效果 两个方法一检测到任何ajax开始或失败就会调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.定义UI结构 -->
<form action="">
<input type="file" name="file" id="">
</form>
<!-- 这里出现了一点小问题 我在后面打印res始终打印不出来而且反正就想数据被清了一下思来想去才知道是我把button放在表单里了所以一点击就会造成默认行为 -->
<button type="submit">上传图片</button>
<img style="display: none;" src="../../../../HTML/04-阶段四 前后端交互/第四阶段：前后端交互阶段资料新/ajax课程资料/day3（7-12小节）/code/images/loading.gif" alt="">
<script src="../day01/lib/jquery.js"></script>
<script>
// 5.这个方法是侦听到所有的ajax请求就会开始执行
$(document).ajaxStart(function() {
$('img').show()
})
$(document).ajaxStop(function() {
$('img').hide()
})
// 2.验证是否选择了文件
$('button').on('click', function() {
// 这里需要将jq对象转为原生dom对象来使用files这个属性
var files = $('input')[0].files
// console.log(files);
if (files.length <= 0) {
return alert('请选择文件')
} else {
// 3.向formdata追加文件
var fd = new FormData()
fd.append('avatar', files[0])
// 4.利用jq来发起上传请求
$.ajax({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/upload/avatar',
data: fd,
processData: false,
contentType: false,
success: function (res) {
console.log(res)
}
})
}
})
</script>
</body>
</html>
7.
axios
今天的最后一个内容，什么事axios，专注于网络数据请求的库，相比于原生xhr更简单易用，相比于jq更轻量化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./axios.js"></script>
</head>
<body>
<button>发起get请求</button>
<script>
var btn = document.querySelector('button')
/* btn.onclick = function() {
var url = 'http://www.liulongbin.top:3006/api/get'
var obj = {name : '张三', age : 29}
axios.get(url, {params: obj}).then(function(res) {
console.log(res);
})
} */
btn.onclick = () => {
axios({
method : 'get',
url : 'http://www.liulongbin.top:3006/api/get',
params : {name : '张三', age : 29}
}).then(res => console.log(res))
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./axios.js"></script>
</head>
<body>
<button>发起post请求</button>
<script>
/* document.querySelector('button').onclick =function() {
var url = 'http://www.liulongbin.top:3006/api/post'
var obj = {location : '重庆', address : '江北'}
axios.post(url, {obj}).then(res => console.log(res))
} */
document.querySelector('button').onclick = () => {
axios({
method : 'post',
url : 'http://www.liulongbin.top:3006/api/post',
data : {name : '张三', age : 29}
}).then(res => console.log(res))
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../day01/lib/bootstrap.css">
</head>
<body>
<!-- 1.定义ui结构 -->
<!-- 1.1文件选择框 -->
<input type="file">
<!-- 1.2上传按钮 -->
<input type="submit" value="上传文件">
<!-- 1.3img标签 用来显示上传成功后的图片 -->
<img src="" alt="">
<!-- 进度条 -->
<div class="progress" style="width: 500px;">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
0%
</div>
</div>
<script>
// 2.验证是否上传了文件
var uploadBtn = document.querySelector('input:nth-of-type(2)')
uploadBtn.addEventListener('click', function() {
// 2.1注意这里这个。files它是一个数组存放的是文件
let files = document.querySelector('input:first-child').files
if (files.length > 0) {
// 3.像formdata中追加文件
var fd = new FormData()
// avator为头像假装这里是上传的头像
fd.append('avatar', files[0])
// 4.使用xhr发起上传文件请求
var xhr = new XMLHttpRequest()
// --------------------------------
// 1.监听事件
var program = document.querySelector('.progress-bar')
xhr.upload.onprogress = e => {
// 2.参数一 e.lengthComputable是一个布尔值，表示当前上传的资源是否具有可计算的长度要有才能进去
if (e.lengthComputable) {
// 参数二e.loaded已传输的字节
// 参数三e.total需传输的总字节
var percenComplete = Math.ceil((e.loaded / e.total) * 100)
// console.log(percenComplete);
program.style.width = percenComplete + '%'
program.innerText = '%' + percenComplete
}
}
// -----------------------------------
// 2.上传成功进度条变化
xhr.upload.onload = () => {
program.className = ''
program.className = 'progress-bar progress-bar-success'
}
xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
// 5.监听事件
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseText);
let imgData = JSON.parse(xhr.responseText)
if (imgData.status == 200) {
document.querySelector('img').src = 'http://www.liulongbin.top:3006' + imgData.url
} else {
console.log('上传文件失败');
}
}
}
} else {
return alert('请上传文件')
}
})
</script>
</body>
</html>
ajax - xhr level2新特性 json等众多内容的更多相关文章
- [转帖 ]MySQL 5.7 新特性 JSON
MySQL 5.7 新特性 JSON 的创建,插入,查询,更新 作者: 我不是鱼 (2016-08-31 16:13)分类: MySQL 标签: MySQL JSON MySQL JSON 应用 ...
- ajax利用html5新特性带进度条上传文件
http://blog.csdn.net/pkgray/article/details/27591283 http://www.matlus.com/html5-file-upload-with-pr ...
- mysql8.0 新特性，对json类型的常用操作
mysql8 新特性-json数据类型操作 -- 根据key(可多个)获取value SELECT JSON_EXTRACT('{"id": 14, "name" ...
- [译文]React v16（新特性）
[译文]React v16(新特性) 查看原文内容 我们很高兴的宣布React v16.0发布了! 这个版本有很多长期被使用者期待的功能,包括: fragments (返回片段类型) error bo ...
- 使用示例带你提前了解 Java 9 中的新特性
使用示例带你提前了解 Java 9 中的新特性 转载来源:https://juejin.im/post/58c5e402128fe100603cc194 英文出处:https://www.journa ...
- GrapeCity Documents for Excel 文档API组件 V2.2 新特性介绍
GrapeCity Documents for Excel 文档API组件 V2.2 正式发布,本次新版本包含诸多重量级产品功能,如:将带有形状的电子表格导出为 PDF.控制分页和电子表格内容.将Ex ...
- html5新特性：利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题
一.背景 使用ajax,可以实现不需要刷新整个页面就可以进行局部页面的更新.这样可以开发交互性很强的富客户端程序,减少网络传输的内容.但长期以来存在一个问题,就是无法利用浏览器本身提供的前进和后退按钮 ...
- 使用 HTML5 History 新特性增强 Ajax 的体验(转)
一. 场景再现 如大家熟知,Ajax 可以实现页面的无刷新操作,但会造成两个与普通页面操作(有刷新地改变页面)有着明显差别的问题—— URL 没有修改以及无法使用前进.后退按钮.例如常见的 Ajax ...
- ES6的十大新特性（转）
add by zhj: 该文章是由国外一哥们写的,由腾讯前端团队翻译,图片中的妹子长得挺好看的,很养眼,嘿嘿.我目前在学习ES6,这篇文章把ES6的 几个主要新特性进行了归纳总结,犹如脑图一般,让人看 ...
随机推荐
- VBS文件无限循环解决办法
VBS文件无限循环解决办法,也就相当于编程中的停止运行指令. 那么如何关掉VBS文件呢?当然关机后会自动关掉,还有另外一种方法就是,在"任务管理器"中找到进程"WScri ...
- ArcMap从建库到出图
1前言 本篇博主将介绍关于ArcMap建库.数据采集.拓扑检查.图表.制作符号等的基本操作. 2问题阐述 (1)检查现有block(线要素)图层,保证所有要素闭合,并将其转换为parcel(面要素): ...
- 算法 | Java 常见排序算法（纯代码）
目录 汇总 1. 冒泡排序 2. 选择排序 3. 插入排序 4. 快速排序 5. 归并排序 6. 希尔排序 6.1 希尔-冒泡排序(慢) 6.2 希尔-插入排序(快) 7. 堆排序 8. 计数排序 9 ...
- 如何使用coredump
一.coredump 当用户态进程出现异常后,在该进程的执行目录下生成对应的coredump文件,如果我们想将coredump生成的位置做改变,就需要如下设置. echo "/home/co ...
- struts-032利用工具 PythonGUI
# -*- coding: utf-8 -*- import requests from Tkinter import * class App: def __init__(self, master): ...
- [SniperOJ](web)图书管理系统 注入 源码泄露
0x00 题目概况 题目地址:http://www.sniperoj.cn:10000/ 这是一道注入题,存在git源码泄露,使用githack(freebuf有工具介绍)把源码脱下来,进行审计,然后 ...
- weblogic重要漏洞记录
(PS:之前在freebuf发过,这里直接复制过来的,所以有些图片会有水印) 前言 T3协议存在多个反序列化漏洞CVE-2015-4852/CVE-2016-0638/CVE-2016-3510/CV ...
- JavaScript day04 函数
函数 函数讲解 函数是什么? 函数其实就抽取写好的js代码 作为一个通用的代码块 (封装) 作用: 减少代码冗余 (过多) 方便调用 (提供效率 提高代码的可读性) 便于维护 (二次修改) js有哪些 ...
- python+pytest接口自动化(12)-自动化用例编写思路 (使用pytest编写一个测试脚本)
经过之前的学习铺垫,我们尝试着利用pytest框架编写一条接口自动化测试用例,来厘清接口自动化用例编写的思路. 我们在百度搜索天气查询,会出现如下图所示结果: 接下来,我们以该天气查询接口为例,编写接 ...
- Python的安装与开发环境的选用
2021快要结束了,这一年我依旧深耕于python的广阔土壤,将重点放在机器人和传感器的角度.也收获了一大批正在学习和期望学习python的朋友. 正在学习的暂且不言,这篇主要是写给期望学习的朋友,同 ...