Ajax--记录
一、什么是Ajax技术
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，减轻了服务器的负担，增强用户体验。但是也存在缺陷，AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持；AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；对搜索引擎支持不好。
二、Ajax请求--get四部曲、post五部曲
1、get
<script>
// get四部曲：
const xhr = new XMLHttpRequest();
xhr.open(‘get‘, "url地址?参数名1=参数值1&参数名2=参数值2")
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
}
}
</script>
2、post
// post五部曲：
const xhr = new XMLHttpRequest();
xhr.open(‘post‘, "url地址")
xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘)
xhr.send(‘参数名1=参数值1&参数名2=参数值2‘)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let data = JSON.parse(xhr.responseText)
}
}
3、Ajax封装--无注释版
/*
Ajax请求封装
Created By Lilian Yang On 2021/01/06
*/
function paraStr(data) {
let str = ‘‘;
for (let key in data) {
str += ‘&‘ + key + ‘=‘ + data[key]
}
return str.substr(1);
}
$http = {
ajax: function (options) {
const defaultValue = {
type: ‘get‘,
data: {},
}
const parameter = Object.assign({}, defaultValue, options);
const type = parameter.type.toLowerCase();
const url = parameter.url;
const data = parameter.data;
const success = parameter.success;
const xhr = new XMLHttpRequest();
let strParameter = paraStr(data);
if (type === ‘get‘) {
xhr.open(type, strParameter ? url + ‘?‘ + strParameter : url);
xhr.send();
}
if (type === ‘post‘) {
xhr.open(type, url);
xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);
xhr.send(strParameter);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
success(data)
}
}
},
get: function (url, success) {
this.ajax({
type: ‘get‘,
url: url,
success: success,
})
},
post: function (url, data, success) {
this.ajax({
type: ‘post‘,
url: url,
data: data,
success: success,
})
},
}
4、Ajax封装--注释版
/*
Ajax请求封装
Created By Lilian Yang On 2021/01/06
*/
// 对象拼接为参数所需的字符串
function paraStr(data) {
let str = ‘‘;
for (let key in data) {
str += ‘&‘ + key + ‘=‘ + data[key]
}
return str.substr(1);
}
$http = {
ajax: function (options) {
// 配置默认参数
const defaultValue = {
type: ‘get‘,
data: {},
}
// 合并参数
const parameter = Object.assign({}, defaultValue, options);
// 获取每项参数
const type = parameter.type.toLowerCase();
const url = parameter.url;
const data = parameter.data;
const success = parameter.success;
// 常见ajax
const xhr = new XMLHttpRequest();
// 对象转为字符串
let strParameter = paraStr(data);
// 判断
if (type === ‘get‘) {
xhr.open(type, strParameter ? url + ‘?‘ + strParameter : url); //拼接
xhr.send();
}
// 判断
if (type === ‘post‘) {
xhr.open(type, url);
xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘); //设置请求头
xhr.send(strParameter);
}
// 监听状态变化 接收数据
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
success(data)
}
}
},
get: function (url, success) {
// 调用上面的ajax
this.ajax({
type: ‘get‘, //默认配置请求类型为get
url: url,
success: success,
})
},
post: function (url, data, success) {
// 调用上面的ajax
this.ajax({
type: ‘post‘, //默认配置请求类型为post
url: url,
data: data,
success: success,
})
},
}
5、调用操作
<script>
$http.ajax(
{
type: ‘get‘,
url: url,
data: {
参数名1: 参数值1,
参数名2: 参数值2,
},
success: function (result) {
console.log(‘后台响应结果：‘, result);
}
}
)
$http.post(url,data,
function (result) {
console.log("后台响应数据：", result)
})
$http.get(url, function (result) {
console.log("后台响应数据：", result);
})
</script>