前言
AJAX:Asynchronous Javascript And XML(异步JavaScript和XML)
- AJAX 就是浏览器提供的一套 API,可以通过 JavaScript 调用,从而实现通过代码控制请求与响应。实现通过 JavaScript 进行网络编程。
- XML:最早在客户端与服务端之间传递数据时所采用的数据格式
MND 对 Ajax 的解释:
其本身不是一种新技术,而是一个在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后, 网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。
尽管X在Ajax中代表XML, 但由于JSON的许多优势,比如更加轻量以及作为Javascript的一部分,目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。
工作原理
1. 包含的技术
AJAX是基于现有的Internet标准,并且联合使用它们:
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)
2. 工作原理
通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。
Ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作与服务器响应异步化。
并不是所有的用户请求都提交给服务器,像—些数据验证(比如判断用户是否输入了数据)和数据处理(比如判断用户输入数据是否是数字)等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。把这些交给了Ajax引擎,用户操作起来也就感觉更加流畅了。
3. 浏览器普通的交互方式:
4. 浏览器通过Ajax的交互方式:
5. 同步与异步
异步传输是面向字符的传输,它的单位是字符;
同步传输是面向比特的传输,它的单位是帧,它传输的时候要求接受方和发送方的时钟是保持一致的。
同步的话,必须这个操作完了才会执行下一步,在等待期间浏览器会挂起不能执行任何接下来的js代码
异步则是 “告诉” 浏览器去做, “告诉” 是一瞬间的事情,然后就继续执行下一步了,等到结果返回来了,浏览器会通知js执行相应的回调。
Ajax初体验
在 jQuery 中封装了一套 Ajax 方法
jQuery 中使用 Ajax:直接用 $ 打点调用 ajax 方法,Ajax方法中的数据是对象格式,写在花括号内部
语法
$.Ajax({});
示例
<script type="text/javascript">
// jQuery中调用 Ajax 方法
$.ajax({
// 请求的数据接口
url: "https://jsonplaceholder.typicode.com/users",
// 向服务器开启请求的方式
type: "GET",
// 定义获取到的数据类型:json 数据格式
dataType: "json",
// data: 获取到的数据,可以对其进行数据过滤,只拿自己想要的某条数据
data: { "id": 1 },
// 请求成功之后的操作:执行回调函数。函数可以传参:data:获取到的数据
success: function (data) {
console.log(data);
}
});
</script>
原生 JS 实现 Ajax 请求
实现步骤
- 第一步,创建 XMLHttpRequest 对象(浏览器兼容性)
- 第二步,注册回调函数
- 第三步,创建请求,指定请求类型、地址、异步/同步
- 第四步,发送请求
- 第五步,异步获取响应数据
- 第六步,利用js与DOM进行页面局部刷新
示例(不兼容 IE6)
<script type="text/javascript">
// 创建 XMLHttpRequest 类型的请求对象
let xhr = new XMLHttpRequest();
// 打开一个与请求网址之间的连接
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
// 项服务器发送请求
xhr.send(null);
// 指定 xhr 状态变化事件 处理函数
xhr.onreadystatechange = function () {
// 通过 xhr 状态码返回值 判断是否请求成功
if (xhr.readyState === 4) {
// responseText 获得字符串形式的响应数据
console.log(this.responseText);
}
}
</script>
示例(浏览器兼容写法)
<script type="text/javascript">
// 创建一个空对象
var xhr = null;
// 浏览器能力检测
// 判断 window 对象中是否有 XMLHttpRequest 对象
if (window.XMLHttpRequest) {
// 兼容标准浏览器
xhr = new XMLHttpRequest();
} else {
// 兼容 IE6
xhr = new ActiveXObject("Microsoft.XMLTHTTP");
}
// 打开一个与请求网址之间的连接
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
// 向服务器发送请求
xhr.send(null);
// 指定 xhr 状态变化事件 处理函数
xhr.onreadystatechange = function () {
// 通过 xhr 状态码返回值 判断是否请求成功
if (xhr.readyState === 4) {
// responseText 获得字符串形式的响应数据
console.log(this.responseText);
}
}
</script>
xhr对象(XMLHttpRequest)
XMLHttpRequest 是 Ajax 的核心对象,向服务器发送请求和解析服务器响应提供了流畅的接口;一个 XMLHttpRequest 类型,所有的Ajax操作都用到这个类型。
XMLHttpRequest 对象中包含了属性和方法。
方法
1. open() 方法
作用:请求初始化
本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段,所以我 们发送出去的请求仍然是 HTTP 请求,同样符合 HTTP 约定的格式。
语法
xhr.open(method, url, async, user, assword)
参数属性
method:要使用的HTTP的请求方法:GET、POST、PUT、DELETE
URL:要向其发送请求的 URL 地址,字符串格式
async:是否异步请求 传布尔值,默认 true 异步(如果采用同步方式执行,则代码会卡死在 xhr.send() 这一步)
user: 用户名,可选参数,为授权使用;默认参数为空string
password: 密码,可选参数,为授权使用;默认参数为空string
====================================
请求方式: 常用请求方式 GET 和 POST
a. 使用 GET 请求
open() 方法使用 GET 方法请求时,不需要设置请求头 setRequestHeader()方法;如果传参,直接写在网址中,如果不需要传参,可以在 send() 方法中传 null
示例
// 2. 初始化请求
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
// 3. 发送请求
xhr.send(null);
b. 使用 POST 请求
使用 GET 方法请求时,需要通过 setRequestHeader() 方法设置请求头(setRequestHeader 请求头需要设置在 open 方法和 send 方法之间)
语法
xhr.setRequestHeader(header, value);
参数
header: 一般设置 “Content-Type”,传输数据类型,即服务器需要我们传送的数据类 型
value: 具体的数据类型,常用 "application/x-www-form-urlencoded
" 和
"application/json
"。
示例
// 2. 初始化请求
xhr.open("POST", "https://jsonplaceholder.typicode.com/users");
// POST 请求必须设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 3. 发送请求
// POST 请求需要使用 send 方法传参
xhr.send("name=tom&age=19");
2. send() 方法
作用:用于发送 HTTP 请求
语法
xhr.send(body);
参数
body: 在 XHR 请求中要发送的数据体,根据请求头中的类型进行传参。
参数为发送的请求体,不传请求体的话最好传个null
属性
- readyState 属性
readyState 是 XMLHttpRequest 对象的一个属性,用来标识当前 XMLHttpRequest 对象代理当前处于什么状态。 readyState 属性总共有5个状态值,分别为0~4,每个值代表了不同的含义:
readyState | 状态 | 描述 |
---|---|---|
0 | UNSENT(未打开) | open()方法还未被调用 |
1 | OPENED(未发送) | open()方法已经被调用 |
2 | HEADERS_RECEIVED(已获取响应头) | send()方法已经被调用,响应头和响应状态已经返回 |
3 | LOADING(正在下载响应体) | 响应体下载中;responseText中已经获取了部分数据 |
4 | DONE(请求完成) | 整个请求过程已经完毕 |
回调函数
XMLHttpRequest 代理在每个状态发生改变时都会触发 onreadystatechange 事件,监听 readystate 的变化,用一个函数来处理这个变化。
数据处理格式 JSON
处理数据的数据格式有 XML 和 JSON
- XML
是一种数据描述手段, 基本已经被淘汰。
原因:
1.数据冗余太多,元数据占用的数据量比较大,不利于大量的数据传输
2.解析比较复杂,在其他语言中解析内部数据时方法比较复杂
- JSON
工作中使用的较多的就是 json
JOSN: JavaScript Object Notation,JavaScript 对象表示法
json 也是一种数据描述手段,类似于 JavaScript 字面量方式
服务端采用 JSON 格式返回数据,客户端按照 JSON 格式解析数据
SJON 数据格式和 JS 对象字面量书写格式相似,但是有所区别:
- JSON 数据不需要存到变量中
- JSON 数据存放在.json文件中,数据书写在花括号内部,结束时不需要加
;
分号 - JSON 数据中的属性名必须用引号
""
包裹起来,属性值可以根据数据类型自定义
方法
原生 JS 封装中了 JSON 对象,用力来处理数据格式,其中有两个方法:stringify、parse
1. stringify() 方法
将 js 对象字面量 转换 为 字符串
语法
JSON.stringify(obj);
示例
// 创建 js 对象字面量
var obj = {
name: "tom",
age: 19,
friend: {
name: "jack"
}
};
// 创建字符串
var str = '{ "name": "lili", "age": 18 }';
// 使用 JSON 方法对数据进行格式转换
// 将 js 对象字面量 转换 为 字符串
var objtoStr = JSON.stringify(obj);
console.log(objtoStr); // {"name":"tom","age":19,"friend":{"name":"jack"}}
console.log(objtoStr.name); // undefined
2. parse() 方法
将一个对象格式的字符串转换成了 对象,就可以操作其中的属性
语法
JSON.parse(str);
示例
// 创建 js 对象字面量
var obj = {
name: "tom",
age: 19,
friend: {
name: "jack"
}
};
// 创建字符串
var str = '{ "name": "lili", "age": 18 }';
// 使用 JSON 方法对数据进行格式转换
// 将一个对象格式的字符串转换成了 对象,就可以操作其中的属性
var strtoObj = JSON.parse(str);
console.log(strtoObj); // obj 对象
console.log(strtoObj.name); // lili
借鉴 K_ON