One, ajax request
The use of traditional javascript to implement ajax requests needs to rely on the XMLhttpRequest() object;
1. Methods of XMLhttpRequest object
①: open(type(get/post),url,true): establish a connection with the server
Parameter true: represents whether it is asynchronous, true: asynchronous (99.99% use true) false: synchronous (not commonly used)
②: send()
-get request: send(null)
-post request: send(parameter value)
③: setRequestHeader()
-get request: do not need to set this method
-post request: need to set
a:如果请求元素中包含了文件上传 setRequestHeader("Content-Type","multipart/form-data")
b:如果不包含文件上传 setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
2. Properties of the XMLhttpRequest object
①: readyState request status, only status 4 means the request is completed
②: status corresponding status: only 200 represents the corresponding normal
③: onreadystatechange: callback function
④: responseText: the corresponding format is string
⑤: responseXML: the corresponding format is XML
Two, ajax get request data
// 第一步:创建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)
}
}
}
Three, ajax post request data
// 第一步:创建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)
}
}
}
Four, package ajax request (method 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('做完了')
})
Five, encapsulate ajax request (method 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)
}
})
Six, onload
onload is defined by XMLHttpRequest v2.0 provided in HTML5 (indicating loading is complete)
// 注意兼容性
xhr.onload = function(){
console.log(this.readyState)
console.log(this.status)
}
Click to view the encapsulation of ajax in jQuery