Ajax 的介绍
1.1 含义
Ajax 的全称是 Asynchronous JavaScript and xml
简单理解下: Ajax 就是异步的 JS 和服务端的数据
1.2 组成
异步的 JS: 事件, 对象等
其他 JS: 数据处理和解析的 JS
服务器的载体: xhr 对象
服务端的数据: JSON,xhr,html,txt 等字符型数据
1.3 作用
它作为前端向后端发送数据请求的重要手段, 可以实现网页无刷新加载数据.
1.4 利弊
与传统的 form 表单的 get 和 post 方式相比较, Ajax 的优点很明显
优点: 1. 提升加载速度, 实现局部加载
2. 节省性能, 能很好提升用户体验
当然, 事物都是相对的, 缺点如下
缺点: 1. 破坏了浏览器的前进后退功能
2. 破坏了 seo 的网络优化
Ajax 的书写
2.1.1 Ajax 的 GET 请求方式
GET 请求的数据会附在 URL 之后, 以 ? 分割 URL 和传输数据, 参数之间以 & 相连
- //1. 创建 xhr 对象
- var xhr = new XMLHttpRequest();
- //2.xhr 的发送方式: get
- xhr.open("GET", url, true)
- // 参数 1: 请求方式
- // 参数 2:url 是后端文件所在服务器的位置
- // 参数 3: 异步 true; 同步 false
- //3. 监听 xhr 对象的状态
- xhr.onreadystatechange = function () {
- if (xhr.readyState == 4 && xhr.status == 200) {
- // 客户端状态码为 4: 响应内容解析完成, 可以调用
- // 服务端的状态码为 200: 交易成功
- console.log(xhr.responseTxt)
- // 返回响应信息
- }
- //4. 发送信息
- xhr.send();
2.1.2 小 bug
以上是最基本的 Ajax 代码, 有两处小 bug, 在封装过程中会解决
bug1: 传的参数为空时, 会报错
bug2: 浏览器的缓存干扰使得数据无法刷新
2.1.3 Ajax 的 Get 方式封装
- // 接收三个参数: 后端文件地址, 回调函数和数据 (对象格式)
- function ajaxGet(url, callback, data) {
- //1. 解析发送的数据
- data = data || {};
- // 修复 bug1: 参数为空变为空对象
- var str = "";
- for (var i in data) {
- str += `${i}=${data[i]}&`;
- // 拼接 get 的数据格式
- }
- //2. 拼接 url
- var d = new Date();
- url = url + "?" + str + "__sjc=" + d.getTime();
- // 修复 bug2: 拼接一个不会重复的时间戳, 欺骗缓存;
- // 时间戳的命名应该尽量复杂, 防止后端读取到.
- //3. 准备 Ajax
- var xhr = new XMLHttpRequest();
- xhr.open("GET", url, true);
- xhr.onreadystatechange = function () {
- if (xhr.readyState == 4 && xhr.status == 200) {
- callback(xhr.responseText);
- }
- }
- xhr.send();
- }
2.2.1 Ajax 的 POST 请求方式
Ajax 的 POST 和 GET 的结构大体相同, 但有以下三点区别
区别 1:post 发送数据位置是 send() 内, 而不是拼接在 url 后
区别 2:open 的请求方式变为 POST
区别 3:send 会原样发送数据, 为确保后端能识别, 必须设置数据格式为表单格式
2.2.1 Ajax 的 POST 方式封装
- function ajaxPost(url, callback, data) {
- data = data || {};
- var str = "";
- for (var i in data) {
- str += `${i}=${data[i]}&`;
- }
- // 不必拼接时间戳
- var xhr = new XMLHttpRequest();
- // 区别 2
- xhr.open("POST", url, true);
- xhr.onreadystatechange = function () {
- if (xhr.readyState == 4 && xhr.status == 200) {
- callback(xhr.responseText);
- }
- }
- // 区别 3: 发送前设置数据格式
- xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
- // 区别 1: 数据发送在 send 内
- xhr.send(str);
- }
年初整理了一批 web 前端教程, 帮助想要成为 Web 前端程序员的人. 从零基础到各种框架的教程都有. 只需要加入到 Web 前端学习 qun:296,212,562. 即可免费领取, 学习过程中有任何问题可以在里面问. 种一颗树最好的时间是十年前, 其次是现在. 只要想学习, 不存在早晚.
来源: http://www.jianshu.com/p/029dac8bede6