1 AJAX基本概述
AJAX是一门很重要的技术,主要作用就是增强用户的体验。AJAX全名为:ASynchronous JavaScript And XML,异步的JavaScript和XML。其中同步和异步的差异,以客户端向服务器发送请求及服务器响应的过程,简单说明下:
同步 | 异步 |
---|---|
客户端发出请求后只能等待服务器的响应,期间不能进行其他操作 | 客户端发出请求后不需要原地等待服务器的响应,期间可以进行其他操作 |
借用百度百科的AJAX概念如下:
Ajax是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页页面。 |
---|
AJAX实现方式有两种:
【实现步骤】:
【练习案例】:
【代码实现】:
1)html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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、建立连接
/*
* 参数:请求方式、请求的url路径、同步或异步请求(true为异步)
* get方式:请求参数在url后面拼接,send方法为空;
* post方式:请求参数在send方法中定义。
* */
xmlhttp.open("GET","ajaxServlet?username=Tim",true);
//3、发送请求
xmlhttp.send();
//4、接收及处理响应结果,当服务器响应成功了再获取
xmlhttp.onreadystatechange = function () { //当xmlhttp对象就绪状态改变时会触发事件
if(xmlhttp.readyState==4 && xmlhttp.status == 200){ //请求已完成且响应就绪,响应状态码为200
alert(xmlhttp.responseText);
}
};
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input type="text">
</body>
</html>
2)AjaxServlet
package cn.test.web.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1、获取请求参数
String username = request.getParameter("username");
//模拟业务处理
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
System.out.println(username);
//2、响应
response.getWriter().write("hello"+username);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
【演示效果】:对比测试看下AJAX的优势
1)首先看建立连接时采用同步请求时(xmlhttp.open方法参数为false),浏览器端只能等待响应,不能在文本框中输入,5s后才能输入:
2)首先看建立连接时采用同步请求时(xmlhttp.open方法参数为true),浏览器端无需死等响应,可以在文本框中输入:
JQuery实现方式有三种:.ajax()、.get()、
1)$.ajax()
【语法】:$.ajax({键值对});其中参数比较多,如下是常用的:
【代码实现】:还是用上一节的AjaxServlet,此处使用$.ajax异步方式请求,html中的代码简洁的太多!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function fun() {
//1、$.ajax()方式实现异步请求,参数比较多,如下几个是常用的
$.ajax({
url:"ajaxServlet",//请求路径
type:"POST", //请求方式
// data:"username=Tim&age=20", //请求参数 ,方式一
data:{"username":"Tim","age":20},//请求参数 ,方式二,JSON格式,推荐使用
success:function (data) { //响应成功后的回调函数,data为接收的响应值
alert(data);
},
error:function () { //响应出错,会执行的回调函数
alert("出错了~~");
},
dataType:"text"//设置接收到响应数据的格式
})
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input type="text">
</body>
</html>
2)$.get():用来发送GET请求
【语法】:$.get(url, [data], [callback], [type]),参数如下:
【代码实现】:这种方法要比$.ajax()更加方便!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function fun() {
//1、$.get()方式实现异步请求
$.get("ajaxServlet",{"username":"Tim"},function (data) {
alert(data);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input type="text">
</body>
</html>
3)$.post():用来发送POST请求
用法和参数与.get()一致,不再赘述了,实际项目开发中.get()、
———————————————————————————————————————
本文为博主原创文章,转载请注明出处!