Ajax概述
1.作用介绍(理解)
Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
2.适用场景(理解)
检查用户名是否已经被注册
省市二联下拉框联动
内容自动补全
3.同步请求和异步请求的概念
例如 要发送三个请求：
1).请求获取学员信息；
2).请求获取课程信息；
3).请求获取老师信息；
A).同步：发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，会处于一直等待过程中。(卡死)
1).发送请求，获取学员信息：
2).学员信息返回
3).发送请求，获取课程信息；
4).课程信息返回
5).发送请求，获取老师信息；
6).老师信息返回。
B).异步：发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。通过回调函数可以获取到请求的结果。
1). 发送请求，获取学员信息：
2). 发送请求，获取课程信息；
3). 发送请求，获取老师信息；
4). 学员信息返回
5). 课程信息返回
6). 老师信息返回
Jquery的Ajax插件
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中 经常使用的有三种：
| 请求方式 | 语法 |
|---|---|
| GET请求 | $.get(url, [data], [callback], [type]) |
| POST请求 | $.post(url, [data], [callback], [type]) |
| AJAX请求 | $.ajax([settings]) |
1.get请求方式
概述
通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能，如需复杂的ajax参数设置请使用$.ajax。
语法
jQuery.get(url, [data], [callback], [type])
其中，参数说明如下：
| 参数名称 | 解释 |
|---|---|
| url | 请求的服务器端url地址 |
| data | 发送给服务器端的请求参数，格式可以是key=value |
| callback | 回调函数,服务器响应成功后,AJAX自动调用函数 |
| type | 预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery框架封装的ajax的get请求方式</title>
<!--导入jQuery的外部js文件-->
<script src="js/jquery-3.4.1.js"></script>
<script>
/*
需求:当点击页面按钮时，触发函数，
在函数中，使用Ajax获取服务器上的一个文件中的数据，并显示到当前的页面的div中
*/
//定义页面的加载事件:让页面先加载出来,在使用页面中的元素
$(function () {
/*
使用jQuery框架封装的ajax的get请求方式
jQuery.get(url, [data], [callback], [type])
$.get(url, [data], [callback], [type])
url:请求服务器的路径,必须
data:发送到服务器的数据 格式:k=v&k=v
callback:回调函数,服务器给客户端返回数据成功,会自动执行回调函数
type:预设服务器返回的数据类型(text(默认),json)
*/
//获取id是but的按钮,给按钮添加一个鼠标点击事件
$("#but").click(function () {
//在事件的响应函数中,发送ajax的get请求方式
$.get(
"data/demo01.txt",
"username=jack&password=1234",
function (data) {//回调函数,服务器返回的数据会自动赋值给回调函数的变量data
//alert(data);
//获取id是myDiv的对象,设置标签体为服务器返回的数据
$("#myDiv").html(data);
},
"text"
);
});
});
</script>
</head>
<body>
<input id="but" type="button" value="发送异步ajax请求"/>
<div id="myDiv"></div>
</body>
</html>
2.ajax请求方式
概述
通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见get和post方法。$.ajax()方法可以更加详细的设置底层的参数。
语法
jQuery.ajax([settings])
其中，settings是一个js字面量形式的对象，格式是{name:value,name:value… …}，常用的name属性名如下：
| 属性名称 | 解释 |
|---|---|
| url | 请求的服务器端url地址 |
| async | (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false |
| data | 发送到服务器的数据，可以是键值对形式 k=v&k=v |
| type | (默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET” |
| dataType | 预期服务器的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等 |
| success | 请求成功后的回调函数 |
| error | 请求失败时调用此函数 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery封装的ajax底层方式请求服务器</title>
<!--引入jQuery文件-->
<script src="js/jquery-3.4.1.js"></script>
<script>
/*
需求:当点击页面按钮时，触发函数，
在函数中，使用Ajax获取服务器上的一个文件中的数据，并显示到当前的页面的div中
*/
//页面加载事件
$(function () {
/*
使用jQuery封装的ajax底层方式请求服务器
jQuery.ajax(url,[settings])
$.ajax(url,[settings])
ajax方式设置的参数,都是以键值对的方式设置的
格式:
$.ajax({
url:请求服务器的路径,
async:设置异步提交方式(true:异步方式(不写默认);false:同步方式),
data:发送到服务器的数据,格式k=v&k=v,
type:设置请求服务器的方式get(不写默认),post,
dataType:预设服务器返回的数据类型(text,json),
success:请求服务器成功的回调函数,
error:请求服务器失败的回调函数,
...
});
*/
//获取id是but的按钮,给按钮绑定一个鼠标点击事件
$("#but").click(function () {
//在事件的响应函数中发送ajax请求
$.ajax({
url:"data/demo02.txt",
data:"username=jack&password=1234",
type:"get",
dataType:"text",
success:function (data) {//请求服务器成功的回调函数,会把服务器返回的数据赋值给data
//把服务器返回的数data放到div的标签体中
$("#myDiv").html(data);
},
error:function () {
$("#myDiv").html("请求服务器失败!");
}
});
});
});
</script>
</head>
<body>
<input id="but" type="button" value="发送异步ajax请求"/>
<div id="myDiv"></div>
</body>
</html>
3.ajax预设服务器返回json格式的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送jQuery的ajax请求</title>
<!--引入jQuery-->
<script src="js/jquery-3.4.1.js"></script>
<script>
//页面加载事件
$(function () {
//给id是but的按钮绑定鼠标点击事件
$("#but").click(function () {
//发送jQuery的ajax请求
$.ajax({
url:"data/demo02.json",
dataType:"json",
success:function (data) {
//alert(data);//返回json本质是一个对象[object Object]
//对象名.属性名,获取属性
alert(data.firstname);
alert(data.lastname);
alert(data.age);
},
error:function () {
alert("请求服务器失败!")
}
});
});
});
</script>
</head>
<body>
<input id="but" type="button" value="发送异步ajax请求"/>
</body>
</html>
demo02.json
{
"firstname": "张",
"lastname": "三丰",
"age": 100
}
2534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
