一、Ajax的概述
Ajax是异步的JS和XML，它并不是一种新的编程语言，是一种使用了现有标准的新方法。
异步：通俗的说，就是开了一个线程，然后去发送请求，在这个请求完成前，之前做的什么仍然继续。
Ajax是一种JS和WEB服务器交互的技术，它可以让页面在不需要重新加载的情况下，实现页面内容的更新。
在网站上有许多Ajax的案例，例如我们在一个网站注册的时候，如果我们的用户名已经被注册，往往我们没有提交的时候，页面就会提醒我们，这就是Ajax的应用。
作用：
（1）动态的加载数据，按需获得数据，例如高德地图搜索一个地点后，就会加载地点附近的地图数据；
（2）改善用户体验，例如百度输入内容后会有提示，还有上面描述的注册页面；
（3）电子商务的应用 例如：添加商品到购物车。
学习Ajax必须掌握的技术：
HTML
CSS
JS/DOM/jQuery
补充：同步和异步的区别
同步和异步的区别
二、Ajax的入门案例
步骤：
创建请求对象
设置请求状态变化时所触发的事件
请求状态有五种，可以使用请求对象调用readyState方法获取请求状态：
0 连接未创建
1 连接已经创建
2 请求已接收
3 请求处理中
4 请求处理完成，响应已经就绪
创建的事件需要赋值给请求对象的一个参数onreadystatechange
创建连接（请求方式，请求地址，请求模式）
请求地址是tomcat服务器访问地址
请求模式就是同步或者异步，参数是true，异步状态；参数是false，同步状态
发送请求
案例的实现：
创建访问的HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function sendAjax(){
//创建请求对象
var xmlHttp = new XMLHttpRequest();
//设置请求状态变化时触发的事件
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
//请求处理完成
if(xmlHttp.status == 200){
//响应成功
alert(xmlHttp.responseText);
}
}
}
//创建连接
xmlHttp.open("POST","http://localhost:8080/web14/AJAXServlet",true);
//发送请求
xmlHttp.send();
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="sendAjax();" />
</body>
</html>
创建Servlet，设置响应内容
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AJAXServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().println("hello AJAX");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
案例实现结果：
打开HTML页面
HTML页面
点击按钮
响应内容
三、AJAX提交数据至服务器
1、使用get请求方式提交数据
get请求方式提交的数据在请求头中。
步骤：
创建请求对象
设置请求状态变化时所触发的事件
创建连接（请求方式，请求地址，请求模式）
发送请求
案例的实现
创建访问的HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function sendAJAX() {
//创建请求对象
var xmlHttp = new XMLHttpRequest();
//设置事件
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//请求处理完成
if (xmlHttp.status == 200) {
//响应成功
alert("请求成功！");
}
}
}
//创建连接
xmlHttp.open("GET",
"/web14/AJAXServlet2?username=zhangsan&password=123456", true);
//发送请求
xmlHttp.send();
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="sendAJAX();" />
</body>
</html>
创建Servlet，设置响应内容
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AJAXServlet2 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("请求接收成功");
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(username+"---"+password);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
案例实现结果：
打开HTML页面
HTML页面
点击按钮
点击按钮
控制台
2、使用post请求方式提交数据
post请求方式提交的数据在HTML的请求体中，提交方式与get稍有不同。
步骤：
创建请求对象
设置请求状态变化时所触发的事件
创建连接
设置编码类型
发送请求
案例的实现
创建访问的HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function sendAJAX() {
//创建请求对象
var xmlHttp = new XMLHttpRequest();
//设置事件
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//请求处理完成
if (xmlHttp.status == 200) {
//响应成功
alert("请求成功！");
}
}
}
//创建连接
xmlHttp.open("POST","/web14/AJAXServlet2", true);
//设置编码类型
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
//发送请求
xmlHttp.send("username=zhangsan&password=123456");
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="sendAJAX();" />
</body>
</html>
创建Servlet，设置响应内容
Servlet与get请求相同，这里不再重写。
案例的结果
打开HTML页面
HTML页面
点击按钮
请求成功
控制台
3、乱码问题的处理
（1）客户端提交数据包含中文，服务器端获取出来是乱码
GET请求：
原因：
客户端提交数据：UTF-8
服务器获取数据：ISO-8859-1
处理方式：
将字符串打回原形，再用UTF-8还原
String username = new String(request.getParameter("username").getBytes("ISO-8859-1"),"UTF-8");
POST请求：
原因：
客户端提交数据：UTF-8
服务器获取数据：ISO-8859-1
处理方式：
设置请求编码类型
request.setCharacterEncoding("UTF-8");
（2）服务器端发送数据包含中文，客户端获取出来的是乱码
原因：
服务器端提交数据：ISO-8859-1
客户端获取数据：UTF-8
处理方式：
response.setContentType("text/html;charset=UTF-8");
网友评论