原生封装AJAX
1.什么是AJAX?
2.实现简单原理?
3.如何实现封装?
4.需要注意问题?
5.AJAX的优缺点?
AJAX
AJAX: Asynchronous Javascript And XML (异步的JS和XML)
是一种前后端数据交互的手段。
实现原理
基于Ajax的核心对象 xmlHttpRequest ,异步发送一个HTTP请求,去后端服务器获取数据,带回给前端浏览器,然后用javascript来操作DOM而对页面进行更新。
实现封装
函数封装原则:不变的固定写在函数内,变化的部分作为参数传入
AJAX发送流程
- 初始化XHR
- 调用该对象的 open 方法
- 服务器响应处理(同步/异步)
- 请求结束后,执行相关代码
此处封装一个函数,让函数帮忙发送AJAX,我们只需传入相关参数即可
- [ ] List item
var QF = {
get(url, data, callback) {
// data是一个对象 假如用户传递的是 {a: 1, b: 2,c: 3, d: 4}
// 我们要把它格式化成 a=1&b=2&c=3&d=4 这种querystring字符串
var querystring = "";
for (var i in data) {
querystring += i + "=" + data[i] + "&";
}
querystring = querystring.slice(0, -1);
// 1 初始化xhr
var xhr = new XMLHttpRequest();
// 2 监听状态
xhr.onreadystatechange = function () {
// xhr.readyState 是一个属性 共有5个值
// 0 未初始化
// 1 调用了open方法
// 2 已经接收到响应头
// 3 解析了一部分数据 不一定解析完毕
// 4 解析完毕全部数据 数据可以使用了
if (xhr.readyState === 4) {
var obj = JSON.parse(xhr.responseText);
callback(obj);
}
}
// 3 open
xhr.open("get" , url + "?" + querystring, true);
// 4 send
xhr.send();
},
post(url, data, callback) {
var querystring = "";
for (var i in data) {
querystring += i + "=" + data[i] + "&";
}
querystring = querystring.slice(0, -1);
// 1 初始化xhr
var xhr = new XMLHttpRequest();
// 2 监听状态
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
// State HTTP 状态码
// 1开头的表示继续
// 2开头的表示成功
// 3开头的表示缓存或者重定向
// 4开头的表示资源错误
// 5开头的表示服务器错误
callback(JSON.parse(xhr.responseText));
}
}
// 3 open
xhr.open("post" , url, true);
// 将请求头内容更改 改为表单的内容类型
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=utf-8")
// 4 send
xhr.send(querystring);
}
}
//在htm中引入封装好AJAX的js文件,然后传递参数就可以发送ajax了
var info = {username: "wanglaowu111", password: "123123123"};
// QF.get("http://localhost/03.php", info, function(data) {
// console.log(1)
// })
QF.post('http://localhost/post.php', info, function(data) {
console.log(data)
});
注意问题
- send 负责往请求正文中添加数据 如果是post请求 就把数据往send 里传递
- AJAX不是一门技术,是一整套技术体系 包含HTML、CSS、DOM、BOM、JSON等
- AJAX兼容性很好,兼容到IE5
GET 和 POST 区别
GET:
没有请求正文
信息会挂在URL上,安全性不足
信息量不大,首地址栏的长度限制
触发方式多:img\video\a标签\表单\script标签\ajax
POST:
有请求正文
信息放在请求正文上,安全性较高
信息量没有限制
触发方式只有:表单\ajax
考虑兼容性
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHttp");
} else {
throw new Error("您的浏览器不支持AJAX,请升级!");
}
AJAX的优缺点
优点:
1.减少用户等待时间,提高用户体验
2.使用异步的方式与服务器通信,不需要中断操作
3.按需取数据,可以最大程度的减少冗余请求和响应
4.页面无需刷新,在页面内与服务器通信
缺点:
1.浏览器机制的破坏——干掉了Back和History功能
2.存在安全问题——如跨站点脚步攻击、SQL注入攻击等
3.对搜索引擎的支持比较弱。