XMLHttpRequest (简称 xhr )是浏览器提供的 Javascript 对象,通过它,可以请求服务器上的数 据资源。
一、发送get请求
//创建Xhr对象
var xhr = new XMLHttpRequest()
//调用open函数
xhr.open('GET','url地址')
//调用send函数
xhr.send()
//监听onreadystatechange事件
xhr.onreadystatechange = function() {
if(xhr.readystate === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
二、发送post请求
//创建xhr对象
var xhr = new XMLHttpRequest()
//调用open函数
xhr.open('POST','url地址')
//设置Content-Type属性
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//调用send函数
xhr.send('(键值对形式的参数)bookname=三十六计&author=老子')
//监听onreadystatechange事件
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
查询字符串:在url地址后面拼接参数 url?id=1
数据交换格式:就是服务器和客户端之间用来传输与交换数据的格式。
JSON格式本质是字符串(用来传输与存储数据)
有固定的格式要求
JSON字符串,表示以{ }或[ ]括起来的结构,里面可以放:字符串、数字、布尔值、null、数组、对象6种类型。
要求:
1、字符串必须用双引号,键也是双引号;
2、不能用undefined或函数作为JSON的值。
两种转换方法
序列化:数据对象转换为字符串:
JSON.stringify(obj)
反序列化:字符串转换为数据对象:
JSON.parse(json_str)
自己封装ajax函数
function alter(data) {
var arr = []
for(var k in data) {
var str = k + '=' + data[k]
arr.push(str)
}
return arr.join('&')
}
function getData(option) {
var xhr = new XMLHttpRequest()
var qs = alter(option.data)
if(option.method.toUpperCase() === 'GET') {
xhr.open(option.method,option.url + '?' + qs)
xhr.send()
} else if(option.method.toUpperCase() === 'POST') {
xhr.open(option.method,option.url)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send(qs)
}
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var result = JSON.parse(xhr.responseText)
option.success(result)
}
}
}
formdate对象(原生方法可以一次性获取表单数据添加到formdate对象中)
new FormDate
var fd = new FormData()
fd.append('avatar',data[0])
Ajax Level2 新特性
设置请求超时时长
xhr.timeout = 500
xhr.ontimeout = function () {}
$('form').serialize(), 一次性获取表单中的所有数据,jQuery 提供了 serialize() 函数
<body>
<input type="file" name="files" id="files">
<br />
<button id="btn">上传文件</button>
<br />
<img src="" alt="">
<script>
$('#btn').on('click', function () {
var data = $('#files')[0].files
if (data.length <= 0) {
return alert('请上传文件!')
}
// console.log(data);
var fd = new FormData()
fd.append('avatar',data[0])
// console.log(fd);
var xhr = new XMLHttpRequest()
xhr.open('POST','url')
xhr.send(fd)
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var result = JSON.parse(xhr.responseText)
// console.log(result);
$('img').attr('src','url' + result.url)
}
}
})
</script>
</body>