Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
Ajax 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。AJAX可以更新部分页面，而不需要整个刷新，从而提升用户体验。
XMLHttpRequest 对象
是Ajax的核心，所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建方法：
var xhr = new XMLHttpRequest();
常用方法：
open("GET/POST" "URL地址" true/false) 打开连接
true和false代表异步或同步。
同步表示需要等待服务器响应后才能执行后面的代码
异步表示不需要等待服务器响应，响应后会进行通知
推荐使用异步方式。
状态
名称
描述
0
Uninitialized
初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1
Open
open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2
Sent
Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3
Receiving
所有响应头部都已经接收到。响应体开始接收但未完成。
4
Loaded
HTTP 响应已经完全接收。
responseText 服务器响应文本内容
status 响应码、如：200、404、500等
案例：使用ajax和Servlet进行交互
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://img.6geng.comjs/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#div1").click(function(){
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//打开连接
xhr.open("GET" "ajax.do?name=张三" true);
//发送请求
xhr.send(null);
//监听状态改变事件
xhr.onreadystatechange = function(){
console.log("状态：" xhr.readyState);
if(xhr.readyState == 4 && xhr.status == 200){
//更新页面内容
$("#div1").text(xhr.responseText);
}
};
});
});
</script>
</head>
<body>
<div id="div1">点击我连接服务器</div>
</body>
</html>
@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req HttpServletResponse resp) throws ServletException IOException {
resp.setContentType("text/html;charset=UTF-8");
//处理请求的中文乱码
String name = req.getParameter("name");
name = new String(name.getBytes("ISO-8859-1") "UTF-8");
//给ajax客户端发送数据
resp.getWriter().println("你好！！" name " 我是服务器！！");
}
}
jquery中的Ajax函数：
除了原生的Ajax代码外，JQuery框架也封装了几个ajax函数，让我们能更容易地与服务器交互。
$.ajax
常用参数：
type 请求方法GET、POST
url 服务器地址（必须）
data 请求参数
async 是否异步true，false
success 正常情况调用函数
error 错误情况调用函数
示例：
$.ajax({url:'check.do' data:{tel:‘13001112222’} async:true
success:function(data){
alert('服务器返回内容' data);
}
error:function(){
alert('服务器操作出现错误');
}
});
$.post函数
以post方式和服务器交互
$.post("URL地址" {参数名:值} function(data){
回调代码
});
案例：
//使用jquery的post方法
function post(){
$.post("ajax.do" {name:'李四'} function(data){
$("#div1").text(data);
});
}
$.get 函数
以get方式和服务器交互
$.get("URL地址?参数" function(data){
回调代码
});
案例：
//使用jquery的get方法
function get(){
$.get("ajax.do?name=赵六" function(data){
$("#div1").text(data);
});
}
load函数
使用load方法，将ajax加载的内容直接插入到标签中
案例：
$(function(){
$("#div1").click(function(){
//post();
//get();
$("#div1").load("ajax.do?name=马九");
});
});
应用场景：
用户注册时检查用户名是否存在
需求：用户注册时，填写手机号后，当输入框失去焦点时，对手机号进行服务器验证后在手机号输入框后面显示”用户名已存在"或"用户名可以使用";
思路：
1、在input的onblur事件中进行验证
2、通过ajax发送手机号给后台Servlet
3、Servlet对手机号进行数据库查询，返回是否存在的文字给ajax
4、ajax收到返回文字后，显示到标签上
总结：Ajax能够让浏览器和服务器进行交互，并且在不刷新页面的情况下对网页内容进行更新，大大提高了用户体验，通过Ajax技术能够构建交互性极强的Web应用程序。
〖特别声明〗：本文内容仅供参考，不做权威认证，如若验证其真实性，请咨询相关权威专业人士。如有侵犯您的原创版权或者图片、等版权权利请告知 wzz#tom.com，我们将尽快删除相关内容。
微信扫一扫