AJAX-01-一分钟快速入门
1.概述
AJAX(Asynchronous JavaScript And XML) :异步的JavaScript和XML
使用的技术:
- JavaScript:用于后台发送数据给服务器,并处理服务器响应的结果
- XML:用于接收服务器返回的数据,目前已被JSON代替
好处
一般网页若需要更新内容,会将整个页面全部重新加载一遍。而AJAX可以通过浏览器与服务器进行少量的数据交换,只局部更新网页的部分内容。等待服务器响应期间可进行其他操作
2.同步和异步的区别
-
同步方式:正常情况下,浏览器与服务器之间是串行操作,类似于Java单线程的操作。
-
异步方式:浏览器与服务器是并行操作,类似于Java中多线程。
3.原生JavaScript实现AJAX访问流程
- 用户在浏览器端由JS创建一个对象XMLHttpRequest对象
- 这个对象是ajax的核心对象,由它发送请求给服务器
- 将请求的数据发送到服务器
- 在服务器处理数据,从数据库中查询用户是否存在,通过XML(JSON)把数据返回
- 在回调函数中得到服务器返回的数据,使用HTML和CSS更新页面的信息
具体代码这里就不实现了,实际工作不会使用这种方式。
4.jQuery3.0之前使用的$.get()和$.post()方法
-
$.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
users.json文件(模拟服务器响应的数据)
[
{
"id": 1,
"name": "Tom",
"password": "123"
},
{
"id": 2,
"name": "Jack",
"password": "456"
},
{
"id": 3,
"name": "Rose",
"password": "789"
}
]
代码:
<!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后台判断用户名是否存在。
user.json模拟服务器访问数据库后响应的数据,直接判断用户名,如果用户名为Tom,则表示用户已经存在,否则用户名可以注册使用。
*/
//用户名的改变事件
$("#user").blur(function () {
//访问服务器获取数据,参数是服务器返回的数据,返回的类型是json格式
let user = $("#user").val(); //得到文本框的值
$.get(
//请求的地址
"json/users.json",
//请求传递的参数
//"user="+user,
//回调函数
function (users) {
//判断用户名是否存在
//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>
5.jQuery 的通用方式$.ajax()实现 AJAX
- $.ajax([settings]): settings是一个JSON形式的对象
$.ajax({键:值,键:值}) 属性名称 | 解释 |
---|---|
url | 服务器访问地址 |
async | 默认是异步,取值是true,设置为false表示同步 |
method | GET或POST方法 |
data | 发送给服务器的数据,2种格式: 1. 键=值&键=值 2. {键:值, 键:值} |
dataType | 服务器返回的数据类型 取值:xml, html, script, json, text |
success | 服务器正常响应的回调函数,参数就是服务器返回的数据 |
error | 服务器出现异常的回调函数,参数是XMLHttpRequest对象 |
代码:
<!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">
//登录按钮的点击事件
$("#btnLogin").click(function () {
//1.获取用户输入的用户名和密码
let username = $("#username").val();
let password = $("#password").val();
//2.使用$.ajax访问服务器
$.ajax({
url: "json/users.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>
6.jQuery3.0新增的$.get()和$.post()方法
-
$.get([settings])
-
$.post([settings])
settings是一个JSON形式的对象
代码同$.ajax,只需修改方法名即可