携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情
ajax
前后端交互的一种手段
通过 JS 向服务端发起请求
所有服务端返回的响应都不会直接显示再页面上
而是返回给 js 这个语言
依赖于浏览器来发送请求
ajax
a: async
j: javascript
a: and
x: xml
这里要简单说一下 session
存在于 服务器 端的存储空间
当他打开的那一瞬间, 就会生成一个 "密码"
这个密码会自动存储到 cookie 里面
等到返回前端的时候, 会自动把"密码"带回去
只要向 session 空间里面存储内容或者获取内容
必须要先开启, 后使用
开启 session 空间
session_start();
存储一些数据
PHP 有一个内置的 关联型数组就叫做 $_SESSION
session_start();
// 2. 存储
$_SESSION['login'] = 1;
echo $_SESSION['login'];
使用方式
1. 找到一个对象能帮我发送 ajax 请求
XMLHttpRequest() 内置构造函数
专门创建实例化对象帮你发送 ajax 请求
const xhr = new XMLHttpRequest()；
2. 对本次请求进行一些配置
open() 的方法
使用方法: xhr.open(请求方式, 请求地址, 是否异步)
请求方式: GET POST PUT ...(大小写无所谓)
请求地址: 你要请求哪一个后端位置
是否异步: 选填, 默认是 true, 可以选填 false, 表示同步
// 2. 配置本次请求的信息
xhr.open('GET', './get.php')；
//发送请求
xhr.send()；
3. 把请求发出去
send() 方法
使用方法: xhr.send()
4. 接收响应
onload 事件
使用方法: xhr.onload = function () {}
本次请求结束以后触发(响应成功了以后触发)
xhr 里面有个属性叫做 responseText 就是响应体
xhr.onload = function () { console.log(JSON.parse(xhr.responseText))； }console.log('end')；
下面是 get.php 的代码部分
<?php
// 报错信息同样是 php 的输出
// $username = $_GET['username'];
// 组装一个数组
$arr = array(
"message" => "接收 GET 请求成功, 参数原样带回", "data" => $_GET );
echo json_encode($arr);
?>
ajax 的异步问题
1. open 的第三个参数可以配置
默认 true 表示异步
false 表示 同步
分析四个步骤
1. 创建 ajax 对象, 同步代码
2. 配置请求信息, 同步代码
3. 发送请求, 异步代码, 当代码执行到这句话的时候, 先把请求发出去
等到响应的过程是异步
4. 事件, 会在满足条件的时候触发
条件: 响应回来
********异步执行的时候：
console.log('start')
1. 创建 ajax 对象
2. 配置请求信息
3-1. 把请求发出去
4. 绑定事件, 请求完成的事件
console.log('end')
3-2. 响应回到客户端, 触发事件
console.log(响应体)
****同步执行的时候：
console.log('start')
1. 创建 ajax 对象
2. 配置请求信息
3-1. 把请求发出去(同步), 等到响应回来再继续执行代码
3-2. 响应回到客户端, 不会触发事件, 因为事件还没有绑定
4. 绑定事件, 事件再也不会触发了
console.log('end')
如果想接收到响应, 需要再 send 之前绑定事件
结论:
同步的时候, 事件必须写在 send 之前
异步的时候, 事件写在前面后面无所谓
书写 ajax 的时候, 都要按照 1 2 4 3 的步骤写
console.log('start')；
// 1. 创建一个 ajax 实例化对象
const xhr = new XMLHttpRequest()；
// 2. 配置本次请求的信息
xhr.open('GET', './get.php', false)；
// 4. 接收结果
xhr.onload = function () {
console.log(JSON.parse(xhr.responseText))； }
// 3. 把这个请求发送出去
xhr.send()；
// 发出去, 接收回来响应
console.log('end')；
ajax 的兼容
ajax 不动向下兼容
ajax 的兼容有两个部分
1. 创建 ajax 对象
2. 接收响应
创建 ajax 对象的兼容
1. new XMLHttpRequest() 标准浏览器使用
2. new ActiveXObject('Msxml.XMLHTTP') IE 7 8 9
3. new ActiveXObject('Msxml2.XMLHTTP') IE 6
4. new ActiveXObject('Microsoft.XMLHTTP') IE 5.5+
5. 再向下的 IE 不支持 ajax
IE 11 浏览器, 跑不起来
ajax 是基于内核的兼容
接收响应的兼容
IE 低版本里面没有 onload 事件
IE 低版本只能使用 onreadystatechange 事件来接收响应
事件里面进行判断
xhr.status 再 200 ~ 299 之间
xhr.readyState === 4 的时候
正常使用响应体
var xhr = new XMLHttpRequest()；
console.log(xhr)；
xhr.open('GET', './get.php')
xhr.onreadystatechange = function () {
if (xhr.status >= 200 && xhr.status < 300 && xhr.readyState === 4) { console.log(xhr.responseText) } }
xhr.send()；
ajax 状态码
状态码
响应状态码: 描述本次请求的状态
ajax 状态码: 描述 ajax 进行到哪一个步骤了
使用方法: xhr.readyState（）;
0: 创建 ajax 对象成功
1: 配置请求信息完成
2: 请求发送出去了, 响应报文回到了浏览器
3: 浏览器正在解析响应报文
4: 浏览器解析响应报文成功, 已经可以正常使用 xhr.responseText
const xhr = new XMLHttpRequest()
console.log(xhr.readyState)
xhr.open('GET', './server/get.php')
console.log(xhr.readyState)
// 绑定一个状态码改变事件
xhr.onreadystatechange = function () {
console.log(xhr.readyState)
if (xhr.readyState === 2) {
console.log('2 响应体 ' , xhr.responseText)
} if (xhr.readyState === 3) {
console.log('3 响应体 ' ,
xhr.responseText) }
if (xhr.readyState === 4)
{
console.log('4 响应体 ', xhr.responseText) } }
xhr.send()
响应状态码
在 xhr 里面还有一个信息表示 响应状态码
xhr.status
描述本次请求的状态
const xhr = new XMLHttpRequest()；
xhr.open('GET', './server/get1.php')；
xhr.onload = function () {
console.log(xhr)； }
xhr.send()；
