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>
小结
$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对象 |
回顾
JQ事件动态绑定
JQ对象.on("事件名",function())
JQ对象.on({
"事件名":function,
"事件名":function
})
JQ对象.off("事件名 事件名")
JQ对象.off()
JQ循环遍历方式
JQ数组对象.each(function(index,element));
$.each(集合或数组, function(index,element));
for(let 变量名 of 集合或数组)
注:无论使用上面哪种方式,每个元素都是js对象
XMLHttpRequest对象
创建对象:new XMLHttpRequest()
事件:onreadystatechange
属性:readyState 4 status 200 responseText 得到服务器返回的数据,字符串
方法:open("get","url",true) send()
3.0以前$.get或$.post方法
$.get或$.post
url: 访问地址
data: 发送数据
callback: 回调函数
type: 服务器返回数据类型
3.0以后使用$.ajax
$.ajax{
url: 访问地址
data: 发送数据
async: 同步或异步
dataType: 服务器返回的数据类型
success: 服务器正常响应的回调函数,参数:就是服务器返回的数据
error: 服务器出现异常回调函数,参数:XMLHttpRequest对象
}
以后常用的是以下三个属性:
url, data, success
jQuery3.0的$.get()和$.post方法
目标
-
学习3.0新的$.get()或$.post()方法,签名与$.ajax()完全一样
-
使用$.get()或$.post()方法实现登录
新增签名方式语法
在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框架中,$符号相当于jQuery这个单词,所有出现$的地方都可以使用jQuery来代替
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>
GET请求和POST请求区别
get请求:
post请求:
如果指定method参数,优先使用method中指定的方法
小结
方法常用的三个参数:
常用的三个属性 | 解释 |
---|---|
url | 服务器访问地址 |
data | 发送给服务器的数据 |
success | 服务器正确响应回调函数,函数的参数就是服务器返回的数据 |
案例:输入自动补全
需求
在输入框输入关键字,下拉框中异步显示与该关键字相关的用户名称
效果
服务器端代码
search.json
[
"张三",
"李四",
"王五",
"赵六",
"田七",
"孙八",
"张三丰",
"张无忌",
"李寻欢",
"王维",
"李白",
"杜甫",
"李贺",
"李逵",
"宋江",
"王英",
"鲁智深",
"武松",
"张薇",
"刘小轩",
"刘浩宇",
"刘六"
]
流程分析
分析页面组成
步骤
-
编写文本框的keyup事件
-
得到word文本框的值
-
去掉值前后的空格,判断值是否为空,如果为空,则返回不再继续。
-
否则使用$.post方法发送请求给服务器
-
在success回调函数中得到服务器返回数据:JSON格式所有用户的集合
-
创建正则表达式,匹配以^word开头的用户
-
创建一个数组用来保存符合条件的字符串
-
如果上面的数组不为空,则进行字符串拼接,每个用户是一个div。
-
拼接完成以后使用html()方法填充到#show的div中
-
如果集合为空,则隐藏#show的div
拓展
-
给#show中div添加点击事件
-
将 div 的文本内容显示在#word的值中
-
隐藏#show这个div
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自动完成</title>
<style type="text/css">
.content {
width: 400px;
margin: 30px auto;
text-align: center;
}
input[type='text'] {
box-sizing: border-box;
width: 280px;
height: 30px;
font-size: 14px;
border: 1px solid #38f;
}
input[type='button'] {
width: 100px;
height: 30px;
background: #38f;
border: 0;
color: #fff;
font-size: 15px;
}
#show {
box-sizing: border-box;
position: relative;
left: 7px;
font-size: 14px;
width: 280px;
border: 1px solid dodgerblue;
text-align: left;
border-top: 0;
/*一开始是隐藏不可见*/
display: none;
}
#show div {
padding: 4px;
background-color: white;
}
#show div:hover {
/*鼠标移上去背景变色*/
background-color: #3388ff;
color: white;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content">
<img alt="搜索引擎" src="img/logo.png"><br/><br/>
<input type="text" name="word" id="word">
<input type="button" value="搜索一下">
<div id="show"></div>
</div>
<script type="text/javascript">
/*
alert(event.keyCode); //keyCode键盘码表,每个按键都会对应一个号码
*/
//不能使用change事件,因为change要失去焦点才激活,只要松开任何一个键就激活
$("#word").keyup(function () {
//判断文本框中是否有数据,如果不为空,才继续,去掉前后空格
let word = $("#word").val().trim();
if (word == "") {
//如果文本框中没有内容,也要隐藏div
$("#show").hide();
return; //不再继续
}
//表示有数据的,开始访问服务器
$.get({
url: "json/search.json", //服务器的访问地址
success: function (users) { //返回服务器上所有的数据
//使用正则表达式,只保留指定字符串开头的用户名
let reg = new RegExp("^" + word);
//创建一个数组,用来保存所有以word开头的用户
let arr = new Array();
//遍历整个数组
for (let user of users) {
//判断每个字符串是否匹配正则表达式
if (reg.test(user)) {
arr.push(user); //添加到数组中
}
}
//把arr数组显示在div中
//先判断数组中是否有元素,有元素才显示
if (arr.length > 0) {
//拼接字符串
let html="";
for (let name of arr) {
html+="<div>" + name + "</div>";
}
//放在#show的div中
$("#show").html(html); //括号中是一个变量名html
//显示div
$("#show").show();
//如果点击每个小的div,就把div中文本赋值给文本框的value
$("#show div").click(function () {
//this相当于你点击的那个div
$("#word").val($(this).text());
//隐藏大的div
$("#show").slideUp("normal"); //加个动画
});
}
else { //没有元素隐藏div
$("#show").hide();
}
}
});
});
</script>
</body>
</html>
小结
-
使用文本框的键盘松开事件 keyup
-
$.post() 提交数据给服务器,返回JSON集合
-
遍历集合,拼接成div的字符串
-
使用html()方法将拼接好的字符串覆盖div中原有的内容
-
显示show这个div
总结
-
能够使用jQuery的绑定与解绑方法
事件绑定 语法 JQ对象.on("事件名", function() {}) 动态绑定事件 事件解绑 语法 JQ对象.off("事件名1 事件名2") 解绑一个或多个事件 JQ对象.off() 解绑所有的事件 -
能够使用jQuery对象的遍历方法
JQ对象.each(function(index,element)) JQ对象:要遍历的集合 index: 索引号 element: 每个元素,都是JS对象 -
能够使用jQuery全局的遍历方法
$.each(数组或集合, function(index,element)) 数组或集合: 要遍历的数组或集合 index: 索引号 element: 每个元素,都是JS对象
-
能够理解异步的概念
浏览器与服务器是并行操作,浏览器端的数据是后端发送给服务器,浏览器不会等服务器返回数据会继续向后执行代码。
-
能够了解原生js的ajax
方法 | 说明 |
---|---|
new XMLHttpRequest() | 创建核心对象 |
onreadystatechange | 准备状态发生变化时激活 |
open("GET",URL,true) | 打开链接 |
send() | 发送请求 |
-
能够使用jQuery的$.get() $.post()进行访问
-
传统:
参数名称 | 解释 |
---|---|
url | 访问地址 |
data | 发送的数据,两种格式:键=值 或 {键:值} |
callback | 回调函数,回调函数的参数是服务器返回的数据 |
type | 服务器返回的数据类型 |
-
3.0以后新的
属性名称 | 解释 |
---|---|
url | 请求的地址 |
async | 异步或同步 |
data | 发送的数据,两种格式:键=值 或 {键:值} |
dataType | 服务器返回的数据类型 |
success | 服务器正常响应的回调函数,回调函数的参数是服务器返回的数据 |
error | 服务器异常的回调函数,参数是XMLHttpRequest对象 |
-
能够完成自动补全的案例