一、ajax请求
使用传统javascript实现ajax请求需要依赖XMLhttpRequest()对象；
1.XMLhttpRequest对象的方法
①：open(type(get/post),url,true):与服务器建立连接
参数true:代表是否异步，true:异步（99.99%使用true） false:同步（不常用）
②：send()
- get 请求：send(null)
- post 请求：send(参数值)
③：setRequestHeader()
- get请求：不需要设置此方法
- post请求：需要设置
a:如果请求元素中包含了文件上传 setRequestHeader("Content-Type","multipart/form-data")
b:如果不包含文件上传 setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
2.XMLhttpRequest 对象的属性
①：readyState 请求状态，只有状态为4代表请求完毕
②：status 相应状态：只有200代表相应正常
③：onreadystatechange : 回调函数
④：responseText ：相应格式为string
⑤：responseXML ：相应格式为XML
二、ajax get请求数据
// 第一步：创建XMLHttpRequest对象
let xhr = new XMLHttpRequest()
// 如果兼容IE6及以下
// var xhr = null
// if(window.XMLHttpRequest){
// xhr = new XMLHttpRequest()
// }else{
// xhr = new ActiveXObject("Microsoft.XMLHTTP")
// }
// 第二步：准备发送
xhr.open('get', `url?userName=${
userName}`, true)
// 第三步：执行发送
xhr.send(null);
// 第四步：通过回调函数获取数据
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
let result = xhr.responseText;
console.log(result)
}
}
}
三、ajax post请求数据
// 第一步：创建XMLHttpRequest对象
let xhr = new XMLHttpRequest()
// 如果兼容IE6及以下
// var xhr = null
// if(window.XMLHttpRequest){
// xhr = new XMLHttpRequest()
// }else{
// xhr = new ActiveXObject("Microsoft.XMLHTTP")
// }
// 第二步：准备发送
xhr.open('post', `${
baseUrl}/posts`, true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
let param = `u=${
1}&b=${
2}`
// 第三步：执行发送
xhr.send(param);
// 第四步：通过回调函数获取数据
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
let result = xhr.responseText;
console.log(result)
}
}
}
四、封装ajax请求 （方式1）
// 封装
function ajax(method, url, params, done) {
method = method.toUpperCase()
var xhr = new XMLHttpRequest()
if (typeof params === 'object') {
var tempArr = []
for (var key in params) {
var value = params[key]
tempArr.push(key + '=' + value)
}
params = tempArr.join('&')
}
if (method === 'GET') {
url += '?' + params
}
xhr.open(method, url, false)
var data = null
if (method === 'POST') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
data = params
}
xhr.send(data)
xhr.onreadystatechange = function () {
if (this.readyState !== 4) {
if (this.status == 200) {
done(this.responseText)
}
}
}
}
// 调用
ajax('get', './time.php', {
}, function (res) {
console.log('hahahahaha')
console.log(res)
console.log('做完了')
})
五、封装ajax请求 （方式2）
// 封装
function $ajax(obj) {
let data = {
url: '',
type: 'get',
data: {
},
dataType: 'text',
success: function (result) {
}
}
for (let key in obj) {
data[key] = obj[key]
}
let xhr = new XMLHttpRequest()
let params = ''
for (let attr in data.data) {
params = params + attr + '=' + data.data[attr] + '&'
}
if (params) {
params = params.substring(0, params.length - 1)
}
if (data.type == 'get') {
xhr.send(null)
} else if (data.type == 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(params)
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
let result = null
if (data.dataType == 'json') {
result = xhr.responseText
result = JSON.parse(result)
} else if (data.dataType == 'xml') {
result = xhr.responseXML
} else {
result = xhr.responseText
}
data.success(result)
}
}
}
}
// 使用
$ajax({
type,
url,
dataType,
function (res) {
console.log(res)
}
})
六、onload
onload 是HTML5 中提供的XMLHttpRequest v2.0定义的（表示加载完成）
// 注意兼容性
xhr.onload = function(){
console.log(this.readyState)
console.log(this.status)
}