AJAX
AJAX的概述
目标
- 什么是AJAX
- 它的作用是什么
什么是ajax
概念：Asynchronous JavaScript And XML 异步的JavaScript和XML
- 异步
- JavaScript
- XML
同步和异步的区别
-
同步方式：正常情况下，浏览器与服务器之间是串行操作，类似于一个Java线程的操作。
-
异步方式：浏览器与服务器是并行操作，类似于Java中多个线路同时工作。
即浏览器后台发送数据给服务器，不是通过表单去提交数据给服务器。
用户在前台还是可以继续工作，用户感觉不到浏览器已经将数据发送给了服务器，并且服务器也已经返回了数据。
ajax使用的技术
- JavaScript：用于后台发送数据给服务器，并且对服务器返回的结果进行处理
- XML：用于接收服务器返回的数据，但是已经被JSON格式代替。
AJAX的应用场景
检查用户名是否已经被注册
很多站点的注册页面都具备自动检测用户名是否存在的友好提示，该功能整体页面并没有刷新，但仍然可以异步与服务器端进行数据交换，查询用户的输入的用户名是否在数据库中已经存在。
省市下拉框联动
很多站点都存在输入用户地址的操作，在完成地址输入时，用户所在的省份是下拉框，当选择不同的省份时会出现不同的市区的选择，这就是最常见的省市联动效果。
内容自动补全
百度的搜索补全功能：
京东的搜索补全功能：
小结
- AJAX的全称：异步的JavaScript和XML，用于后台访问服务器
- JavaScript作用：后台发送数据给服务器，并且接收服务器返回的数据
- XML的作用：用来接收服务器的大量的数据，但是已经被JSON代替
- 什么是异步请求？浏览器与服务器是并行工作的。
原生AJAX访问流程
目标
- 了解原生的ajax访问服务器的整个流程
- 核心对象XMLHttpRequest对象
AJAX的执行流程
流程说明：
- 用户在浏览器端由JS创建一个对象XMLHttpRequest对象
- 这个对象是ajax的核心对象，由它发送请求给服务器
- 将请求的数据发送到服务器
- 在服务器处理数据，从数据库中查询用户是否存在，通过XML(JSON)把数据返回
- 在回调函数中得到服务器返回的数据，使用HTML和CSS更新页面的信息
小结
-
什么是原生的ajax？
不使用任何框架来编写ajax
-
它的核心对象是？
XMLHtttpRequest对象
XMLHttpRequest对象(了解)
目标
学习XMLHttpRequest对象有哪些事件，方法和属性
语法
| 创建XMLHttpRequest对象 | 说明 |
|---|---|
| new XMLHttpRequest() | 创建核心对象 |
| XMLHttpRequest对象的事件 | 说明 |
|---|---|
| onreadystatechange | on ready state change 准备状态发生改变的事件 如果服务器返回了数据，并且浏览器接收到了数据就激活 |
| XMLHttpRequest对象的属性 | 说明 |
|---|---|
| readyState | 通过这个属性获取准备状态： 0 正在初始化 1 浏览器开始发送数据给服务器 2 服务器接收数据完毕 3 服务器开始响应数据 4 服务器的数据发送完毕 |
| status | 服务器状态码，200表示服务器正常响应 结论：如果准备状态是4，而且状态码是200 表示服务器正常的响应并且发回了数据 |
| responseText | 接收服务器返回的字符串数据，如果要做为其它类型使用，必须进行类型转换 |
| XMLHttpRequest对象的方法 | 说明 |
|---|---|
| open(“GET”,“URL”,true) | 打开服务器端连接 参数1：GET方法或POST方法发送数据 参数2：服务器的访问地址 参数3：true表示异步，false表示同步 |
| send() | 后台发送数据给服务器 |
小结
- 创建这个对象：new XMLHttpRequest
- 事件：onreadystatechange
- 属性：readyState status responseText
- 方法：open(“GET”, 地址, true) send()
案例：原生的AJAX判断用户名是否存在
目标
了解原生的ajax如何去实现这个案例
需求
用户注册时输入一个用户名，失去焦点以后，通过ajax后台判断用户名是否存在。服务器先不访问数据库，直接判断用户名，如果用户名为newboy，则表示用户已经存在，否则用户名可以注册使用。
效果
服务器端
准备数据文件 users.json
[
"Newboy",
"Jack",
"Rose",
"Tom",
"Lina"
]
客户端
步骤
- 文本框失去焦点，得到文本框中的姓名
- 创建 XMLHttpRequest 请求对象
- 设置请求的 URL
- 调用 open 方法，设置提交给服务器的请求方式和访问地址
- 调用 send 方法发送请求
- 设置请求对象的 onreadystatechange 事件，即"准备状态改变"事件。
a) 当 readyState 等于 4，并且服务器 status 响应码为 200 则表示响应成功
b) 通过 responseText 得到响应的字符串，服务器返回的是一个字符串数组。
c) 转成 JSON 数组，再与文本框中输出的值进行比较，如果存在就设置为 true，否则设置为 false。
d) 如果是 true，则表示用户存在，在后面的 span 显示"用户名已经存在"
e) 否则表示不存在，在后面的 span 中显示"恭喜你，可以注册"。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户是否存在</title>
</head>
<body>
用户名：<input type="text" id="user"> <span id="info"></span>
<script type="text/javascript">
/*用户注册时输入一个用户名，失去焦点以后，通过ajax后台判断用户名是否存在。
服务器先不访问数据库，直接判断用户名，如果用户名为newboy，则表示用户已经存在，否则用户名可以注册使用。 */
//用户名的改变事件
document.getElementById("user").onchange = function () {
//创建XMLHttpRequest对象
let request = new XMLHttpRequest();
//打开服务器的连接，参数：GET或POST，服务器地址，true
request.open("GET", "json/users.json", true);
//发送请求给服务器
request.send();
//设置回调函数，准备状态发生改变时激活这个函数
request.onreadystatechange = function () {
//准备状态等于4，服务器状态码等于200
if (request.readyState == 4 && request.status == 200) {
//接收服务器返回的数据
let text = request.responseText; //字符串
//将字符串转成JSON
let users = JSON.parse(text); //所有用户的数组
//得到用户在文本框中输入的数据
let user = document.getElementById("user").value;
//设置标记
let exists = false;
//遍历服务器返回的数组
for (let u of users) {
if (u == user) { //当前元素等于输入的用户名
exists = true; //修改标记
break;
}
}
//判断标记
if (exists) { //用户名已经存在
document.getElementById("info").innerText = "用户名已经存在";
}
else { //不存在
document.getElementById("info").innerText = "恭喜，可以注册";
}
}
}
}
</script>
</body>
</html>
3.0以前的$.get()和$.post()方法的使用
目标
传统$.get()方法的介绍
与ajax操作相关的jQuery方法
语法
演示案例
步骤
- 导入jQuery框架的js文件
- 编写文本框失去焦点blur()事件
- 得到文本框中的姓名
- 使用$.get方法发送请求给服务器，回调函数的参数就是返回的用户数组
- 根据返回的结果，在回调函数中判断用户是否存在，如果存在返回true，否则返回false
- 判断是true或false，然后在span中显示相应的信息
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户是否存在</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
用户名：<input type="text" id="user"> <span id="info"></span>
<script type="text/javascript">
/*
用户注册时输入一个用户名，失去焦点以后，通过ajax后台判断用户名是否存在。
服务器先不访问数据库，直接判断用户名，如果用户名为newboy，则表示用户已经存在，否则用户名可以注册使用。
$.get(url,data,callback,type) $.post(url,data,callback,type)
只有第1个是必须的选项
1. url: 表示请求服务器地址
2. data: 发送给服务器的数据
格式1：键1=值2&键2=值2
格式2：{键:值,键:值}
3. callback：回调函数，参数是服务器返回的数据
4. type：从服务器返回的数据类型，默认是字符串类型
取值：xml, html, script, json, text
*/
//用户名的改变事件
$("#user").change(function () {
//访问服务器获取数据，参数是服务器返回的数据，返回的类型是json格式
$.get("json/users.json", function (users) {
//判断用户名是否存在
let user = $("#user").val(); //得到文本框的值
//1.设置标记
let exists = false;
//2.遍历数组，查找名字是否存在
for (let u of users) {
if (u == user) {
exists = true; //找到
break;
}
}
//3.根据查找的结果显示信息
if (exists) { //用户存在
$("#info").text("用户名已经存在");
}
else {
$("#info").text("恭喜可以注册");
}
},"json");
});
</script>
</body>
</html>
小结
| G E T 或 GET或 GET或POST参数 | 解释 |
|---|---|
| url | 服务器访问地址 |
| data | 发送给服务器的数据，2种格式： 1. 键=值&键=值 2. {键:值, 键:值} |
| callback | 回调函数，回调函数的参数就是服务器返回的数据 |
| type | 指定服务器返回的数据类型 |
jQuery中$.ajax()方法的使用
目标
- $.ajax()方法的使用
- 案例：使用ajax实现后台用户登录功能
语法
settings是一个JSON形式的对象，格式是{name:value,name:value… …}，常用的name属性名如下：
| $.ajax({键:值,键:值}) 属性名称 | 解释 |
|---|---|
| url | 服务器访问地址 |
| async | 默认是异步，取值是true，设置为false表示同步 |
| method | GET或POST方法 |
| data | 发送给服务器的数据，2种格式： 1. 键=值&键=值 2. {键:值, 键:值} |
| dataType | 服务器返回的数据类型 取值：xml, html, script, json, text |
| success | 服务器正常响应的回调函数，参数就是服务器返回的数据 |
| error | 服务器出现异常的回调函数，参数是XMLHttpRequest对象 |
案例：使用AJAX实现后台用户登录的功能
需求
- 页面上有用户名和密码两个文本框，点登录按钮，使用后台AJAX完成登录成功。
- 如果用户登录成功显示登录成功，否则显示登录失败。
- 后台服务器暂不使用数据库，如果用户名为：newboy，密码为：123，则登录成功。
效果
成功
失败
流程
服务器
准备文件：login.json
[
{
"id": 1,
"name": "NewBoy",
"password": "123"
},
{
"id": 2,
"name": "Jack",
"password": "456"
},
{
"id": 3,
"name": "Rose",
"password": "789"
}
]
客户端
步骤
- 页面代码如下：login.html，页面上有一个登录的表单数据。注：登录按钮是一个普通的button
- 给登录按钮添加点击事件
- 使用$.ajax方法访问服务器
- 设置url请求地址，success成功的回调函数
- 在回调函数中遍历整个集合，比较每个用户名和密码是否与输入的用户名和密码相同
- 如果有相同的，返回true，否则返回false
- 如果为true，输出登录成功，否则输出登录失败
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password"/></td>
</tr>
<tr>
<!--登录按钮是一个普通按钮-->
<td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/></td>
</tr>
</table>
</form>
<script type="text/javascript">
/*
$.ajax({键:值,键:值})
url ： 服务器访问地址
async ：默认是异步，取值是true，设置为false表示同步
method： GET或POST方法，默认是get方法
data ： 发送给服务器的数据，2种格式：1. 键=值&键=值 2. {键:值, 键:值}
dataType ： 服务器返回的数据类型<br />取值：xml, html, script, json, text
success ： 服务器正常响应的回调函数，参数就是服务器返回的数据
error ： 服务器出现异常的回调函数，参数是XMLHttpRequest对象
*/
//登录按钮的点击事件
$("#btnLogin").click(function () {
//1.获取用户输入的用户名和密码
let username = $("#username").val();
let password = $("#password").val();
//2.使用$.ajax访问服务器
$.ajax({
url: "json/login.json",
//服务器正常响应的回调函数，参数就是返回的用户数据
success: function (users) {
let exists = false;
//遍历数组中每个用户
for (let user of users) {
//比较用户名和密码是否相同
if (user.name == username && user.password == password) {
exists = true;
break;
}
}
//输出登录成功或失败
if (exists) {
alert("登录成功，欢迎您：" + username);
}
else {
alert("登录失败，请重试");
}
},
dataType: "json" //指定返回数据类型是json
})
});
</script>
</body>
</html>
其它参数的演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password"/></td>
</tr>
<tr>
<!--登录按钮是一个普通按钮-->
<td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/></td>
</tr>
</table>
</form>
<script type="text/javascript">
/*
$.ajax({键:值,键:值})
url ： 服务器访问地址
async ：默认是异步，取值是true，设置为false表示同步
异步：不会等服务器处理完，会一直向后执行
同步：等服务器处理完毕，才执行后面的JS代码
method： GET或POST方法，默认是get方法
data ： 发送给服务器的数据，2种格式：1. 键=值&键=值 2. {键:值, 键:值}
dataType ： 服务器返回的数据类型<br />取值：xml, html, script, json, text
success ： 服务器正常响应的回调函数，参数就是服务器返回的数据
error ： 服务器出现异常的回调函数，参数是XMLHttpRequest对象
*/
//登录按钮的点击事件
$("#btnLogin").click(function () {
//1.获取用户输入的用户名和密码
let username = $("#username").val();
let password = $("#password").val();
//2.使用$.ajax访问服务器
$.ajax({
url: "json/login.json",
data: "a=1&b=2", //发送的数据，可以在浏览器上按f12,选network可以看到
//async: false, //默认是true，表示异步
//服务器正常响应的回调函数，参数就是返回的用户数据
success: function (users) {
let exists = false;
//遍历数组中每个用户
for (let user of users) {
//比较用户名和密码是否相同
if (user.name == username && user.password == password) {
exists = true;
break;
}
}
//输出登录成功或失败
if (exists) {
alert("登录成功，欢迎您：" + username);
}
else {
alert("登录失败，请重试");
}
},
dataType: "json", //指定返回数据类型是json
error: function (request) { //出现异常回调函数，参数是XMLHttpRequest对象
alert("服务器出现异常，状态码是：" + request.status);
}
});
//alert("浏览器端的代码继续执行"); //不会等服务器处理完，会一直向后执行
});
</script>
</body>
</html>
小结
| 属性名称 | 解释 |
|---|---|
| url | 服务器地址 |
| async | 默认是异步发送请求true |
| data | 发送给服务器数据 |
| method | 请求的方式:get或post |
| dataType | 服务器返回的数据类型 |
| success | 服务器正常响应的回调函数，函数参数就是服务器返回的数据 |
| error | 服务器出现异常的回调函数，参数是XMLHttpRequest对象 |
jQuery3.0的$.get()和$.post方法
目标
- 学习3.0新的 . g e t ( ) 或 .get()或 .get()或.post()方法，签名与$.ajax()完全一样
- 使用 . g e t ( ) 或 .get()或 .get()或.post()方法实现登录
新增签名方式语法
在jQuery框架中， 符 号 相 当 于 j Q u e r y 这 个 单 词 ， 所 有 出 现 符号相当于jQuery这个单词，所有出现 符号相当于jQuery这个单词，所有出现的地方都可以使用jQuery来代替
参数说明
案例：GET新增签名方式实现上面的登录
步骤
- 给登录按钮添加点击事件
- 得到表单中所有的数据项
- 使用$.get()方法发送请求
- 设置url请求地址，success成功的回调函数
- 在回调函数中遍历整个集合，比较每个用户名和密码是否与输入的用户名和密码相同
- 如果有相同的，返回true，否则返回false
- 如果为true，输出登录成功，否则输出登录失败
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password"/></td>
</tr>
<tr>
<!--登录按钮是一个普通按钮-->
<td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/></td>
</tr>
</table>
</form>
<script type="text/javascript">
/*
$.get({键:值,键:值}) $.post
url ： 服务器访问地址
async ：默认是异步，取值是true，设置为false表示同步
异步：不会等服务器处理完，会一直向后执行
同步：等服务器处理完毕，才执行后面的JS代码
method： GET或POST方法，默认是get方法
data ： 发送给服务器的数据，2种格式：1. 键=值&键=值 2. {键:值, 键:值}
dataType ： 服务器返回的数据类型<br />取值：xml, html, script, json, text
success ： 服务器正常响应的回调函数，参数就是服务器返回的数据
error ： 服务器出现异常的回调函数，参数是XMLHttpRequest对象
*/
//登录按钮的点击事件
jQuery("#btnLogin").click(function () {
//1.获取用户输入的用户名和密码
let username = jQuery("#username").val();
let password = jQuery("#password").val();
//2.使用$.get访问服务器
jQuery.get({
url: "json/login.json",
method: "post",
data: "a=1&b=2", //发送的数据，可以在浏览器上按f12,选network可以看到
//async: false, //默认是true，表示异步
//服务器正常响应的回调函数，参数就是返回的用户数据
success: function (users) {
let exists = false;
//遍历数组中每个用户
for (let user of users) {
//比较用户名和密码是否相同
if (user.name == username && user.password == password) {
exists = true;
break;
}
}
//输出登录成功或失败
if (exists) {
alert("登录成功，欢迎您：" + username);
}
else {
alert("登录失败，请重试");
}
},
dataType: "json", //指定返回数据类型是json
error: function (request) { //出现异常回调函数，参数是XMLHttpRequest对象
alert("服务器出现异常，状态码是：" + request.status);
}
});
});
</script>
</body>
</html>
小结
方法常用的三个参数：
| 常用的三个属性 | 解释 |
|---|---|
| url | 服务器访问地址 |
| data | 发送给服务器的数据 |
| success | 服务器正确响应回调函数，函数的参数就是服务器返回的数据 |
扫一扫
5473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
