Ajax在JS和JQuery中的实现
一、基本概念,同步异步
概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML
异步和同步:客户端和服务器端相互通信的基础上
- 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
可以提升用户的体验
二、实现方式
1. 原生的JS实现方式
- 步骤:
- 创建核心对象
- 建立连接
- 发送请求
- 接收并处理来自服务器的响应结果
- 注意:
- get请求方式,请求参数再URL后面拼接,send方法空参。
- post请求方式,请求参数再send方法中定义。
- 代码实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40<script>
//定义方法
function fun() {
//发送异步请求
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.建立连接
/**
* 参数:
* 请求参数:GET POST
* 请求URL:路径
* 同步或异步请求 true(异步) false(同步)
*/
xmlhttp.open("GET","test1.txt",true);
//3.发送请求
xmlhttp.send();
//4.接收并处理来自服务器的响应结果
//获取方式:xmlhttp.responseText;
//什么时候获取?服务器响应成功后获取
//当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange
xmlhttp.onreadystatechange = function () {
//判断readyState就绪状态是否为4,并且判断status响应状态码是否为200
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
};
};
}
</script>2. JQuery实现方式
2.1
$.ajax()
- 语法:
jQuery.ajax({键值对})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<script>
//定义方法
function fun() {
//使用$.ajax()发送异步请求
$.ajax({
url: "ajaxServlet",//请求路径
type: "POST",//请求方式 默认get
//data: "username=yangye&age=21",//请求参数 可以拼接多个
data: {"username": "yangye", "age": 23}, //推荐使用
success: function (data) { //参数为服务器响应的信息
alert("data")
}//响应成功后的回调函数
});
}
</script>
2.2 $.get()
- 语法:
$.get(url, [data], [callback], [type])
- 参数:
url
:请求路径
data
:请求 参数。
callback
:载入成功时回调函数。
type
:返回内容格式,xml, html, script, json, text, _default。 - 代码实现:
1
2
3
4
5
6
7
8<script>
//定义方法
function fun() {
$.get("ajaxServlet",{username:"yanngyeye",age:23},function (data) {
alert(data);
},"text");
};
</script>2.3
$.post()
与get相同