Uno, solicitud ajax
El uso de javascript tradicional para implementar solicitudes ajax necesita depender del objeto XMLhttpRequest ();
1. Métodos del objeto XMLhttpRequest
①: open (type (get / post), url, true): establece una conexión con el servidor
Parámetro verdadero: representa si es asíncrono, verdadero: asíncrono (99,99% usa verdadero) falso: síncrono (no se usa comúnmente)
②: enviar ()
-obtener solicitud: enviar (nulo)
-postar solicitud: enviar (valor del parámetro)
③: setRequestHeader ()
-get request: no es necesario configurar este método
-post request: need to set
a:如果请求元素中包含了文件上传 setRequestHeader("Content-Type","multipart/form-data")
b:如果不包含文件上传 setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
2. Propiedades del objeto XMLhttpRequest
①: estado de la solicitud readyState, solo el estado 4 significa que la solicitud se completó
②: estado correspondiente estado: solo 200 representa el correspondiente normal
③: onreadystatechange: función de devolución de llamada
④: responseText: el formato correspondiente es string
⑤: responseXML: el formato correspondiente es XML
Dos, ajax obtiene datos de solicitud
// 第一步：创建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)
}
}
}
Tres, datos de solicitud de publicación de ajax
// 第一步：创建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)
}
}
}
Cuatro, solicitud de paquete ajax (método 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('做完了')
})
Cinco, encapsular la solicitud ajax (método 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)
}
})
Seis, carga
onload está definido por XMLHttpRequest v2.0 proporcionado en HTML5 (que indica que la carga está completa)
// 注意兼容性
xhr.onload = function(){
console.log(this.readyState)
console.log(this.status)
}
Haga clic para ver la encapsulación de ajax en jQuery