一、概念
AJAX:Asynchronos JavaScript And AML (异步JavaScript和XML)
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
- 异步和同步的概念
- 同步: 相当于是 当客户端发送请求给服务端,在等待服务端响应的请求时,客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。
- 异步: 当客户端发送给服务端请求时,在等待服务端响应的时候,客户端可以做其他的事情,这样节约了时间,提高了效率。
二、实现方式
1、原生的js实现方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js实现ajax</title>
<script>
//定义方法
function fun() {
//发送异步请求
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.建立连接
/*
参数:
1.请求方式
1.get方式:请求参数在URL后拼接。send方法为空参
2.post方式:请求参数在send方法中定义
2.请求的url
3.同步或异步请求:true(异步),false(同步)
*/
xmlhttp.open("post","aJAXServlet?username=tom",true);
//3.发送请求
xmlhttp.send();
//4.接受并处理来自服务器的响应结果
/*获取方式:xmlhttp.responseText
xmlhttp.responseXML*/
// 当服务器响应成功后获取
//当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange
xmlhttp.onreadystatechange=function() {
//判断readyState就绪状态是否为4,判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input >
</body>
</html>
2、JQuery实现方式
1、$.ajax()
语法:$.ajax({键值对});
<script>
//定义方法
function fun(){
//使用$.ajax()发送异步请求
$.ajax({
url:"aJAXServlet", //请求路径
type:"POST", //请求方式 ("POST" 或 "GET"), 默认为 "GET"
async:false, //同步或异步请求。true为异步,false为同步。默认为true
//请求参数的两种方式。GET 请求中将附加在 URL 后。
//第一种
// data:"username=lisi&age=23", //请求参数
//第二种
data:{"username":"lisi","age":23},
success:function (data) {
alert(data);
}, //响应成功后的回调函数
error:function () {
alert("出错了")
},
dataType:"text" //设置接受到的响应数据的格式
})
}
</script>
2、$.get()
发送get请求
语法:$.get(url, [data], [callback], [type])
- 参数:[]中括号中的参数为可选参数
- url : 请求路径
- data :请求参数
- callback :回调函数
- type :响应结果的类型
<script>
//定义方法
function fun(){
//使用$.get()发送异步请求
$.get("aJAXServlet",{username:"lisi"},function (data) {
alert(data);
},"text")
}
</script>
3、$.post()
发送post请求
语法:$.post(url, [data], [callback], [type])