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的 几个主要新特性进行了归纳总结,犹如脑图一般,让人看 ...
随机推荐
- 模块 序列化模块：json pickle
模块:一个模块就是一个包含了Python定义和声明的文件,文件名就是模块名字加上.py的后缀 模块的形象: 内置模块:安装Python解释器的时候一起安装上的 第三方模块(扩展模块):需要自己安装 自 ...
- 4月9日 python学习总结 模块
1.XML模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融 ...
- Python GUI tkinter 学习笔记（一）
第一个python程序 #!/usr/bin/python # -*- coding: UTF-8 -*- from Tkinter import * # 创建一个根窗口,其余的控件都在这个窗口之上 ...
- 论文解读（GMI）《Graph Representation Learning via Graphical Mutual Information Maximization》2
Paper Information 论文作者:Zhen Peng.Wenbing Huang.Minnan Luo.Q. Zheng.Yu Rong.Tingyang Xu.Junzhou Huang ...
- 12.16 JAVA swing
------------恢复内容开始------------ 12.16JAVA swing 1.框架 JFrame>JPanel>组件JButton JTestfilled JTable ...
- -std=c++11 编译器设置
range-based 'for' loops are not allowed in C++98 mode
- RabbitMQ 的集群?
镜像集群模式 你创建的 queue,无论元数据还是 queue 里的消息都会存在于多个实例上,然后 每次你写消息到 queue 的时候,都会自动把消息到多个实例的 queue 里进行消息 同步. 好处 ...
- Dubbo telnet 命令能做什么？
dubbo 服务发布之后,我们可以利用 telnet 命令进行调试.管理. Dubbo2.0.5 以上版本服务提供端口支持 telnet 命令 连接服务 telnet localhost 20880 ...
- Redis++：Redis做分布式锁真的靠谱吗
Redis做分布式锁真的靠谱吗 Redis的分布式锁可以通过Lua进行实现,通过setnx和expire命令连用的方式 || 也可以使用高版本的方法同时设置失效时间,但是假如在以下情况下,就会造成无锁 ...
- 攻防世界 easytornado
easytornado 进入环境就这样子 我们逐一访问看看 进入flag.txt提示flag in /fllllllllllllag我们访问fllllllllllllag看看 报了一个error,且在 ...