定义：
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
日常中比较常见的就是我们在注册网站时，实时显示你填写的用户名是否可用，这里用到的就是AJAX
readyState代码：
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
Status代码：200 ok
在readyState代码为4，Status代码为200时，才可以根据响应进行操作。
JS原生代码实现：
异步访问代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><script> ???function check(){ ???????var xmlhttp = new XMLHttpRequest();//获取一个XMLHttpRequest对象，用来发送请求 ???????var text = document.getElementById("text").value; ???????var result = document.getElementById("result"); ???????xmlhttp.onreadystatechange=function(){//在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。 ???????????if(xmlhttp.readyState==4 && xmlhttp.status==200){//响应就绪 ???????????????result.innerHTML=xmlhttp.responseText;//显示响应内容 ???????????} ???????} ???????xmlhttp.open("GET","ajax?text="+text,true);//GET方式，请求地址，异步请求，可以连续发送请求而不必等待响应 ???????xmlhttp.send();//发送请求 ???}</script><title>Insert title here</title></head><body> ???<span id="result"></span> ???<input type="text" name="message" id="text" onKeyUp="check()"></body></html>注意：POST方式请求需要设置请求头：
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
??xmlhttp.send("name="+name);//请求参数
Servlet：
public class AJAXServlet extends HttpServlet { ???@Override ???public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????String text = request.getParameter("text"); ???????response.setContentType("text/html;charset=utf-8"); ???????try { ???????????Thread.sleep(5000);//线程等待，用来观察同步、异步访问的区别 ???????} catch (InterruptedException e) { ???????????// TODO Auto-generated catch block ???????????e.printStackTrace(); ???????} ???????if(text.equals("123")) { ???????????response.getWriter().print("你输入的是123"); ???????}else { ???????????response.getWriter().print("你输入的不是123"); ???????} ???} ???@Override ???public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????doGet(request, response); ???}}同步与异步访问的区别：
异步访问可以不必等待服务端响应完成，连续发送请求，而同步访问则必须等待服务端响应完成才能发送下次请求，在上例代码中，Servlet的线程等待5秒，当同步访问时，输入框输内容，check()函数执行，但是此时没法继续输入内容，因为函数在等待服务端响应，5秒后响应完成，才能继续输入。
JSON：
JavaScript 对象表示法（JavaScript Object Notation） 是一种存储数据的方式。
<script>var obj = {"name":"god","hp":616};document.write("这是一个JSON对象: "+obj);</script>JSON对象由 名称/值对组成 名称和值之间用冒号:隔开
名称必须用双引号" 包含起来
值可以是任意javascript数据类型，字符串，布尔，数字 ，数组甚至是对象
不同的名称/值对之间用 逗号 , 隔开
JSON数组：
<script> var heros=[ ???{"name":"盖伦","hp":616}, ???{"name":"提莫","hp":313}, ???{"name":"死哥","hp":432}, ???{"name":"火女","hp":389}] document.write("JSON数组大小"+heros.length); </script>多类型值混合
var multiple = {"name":"zero","address":{"Country":"china","Provence":"ShanDong"}};jQuery AJAX：
利用jQuery可以大幅简化ajax代码：
<!doctype html><html><head><meta charset="utf-8"><script src="jquery-3.3.1.min.js"></script><script> ???$(function(){ ???????$("#name").keyup(function(){ ???????????var page = ""; ???????????var value = $(this).val();//输入框内容 ???????????????$.ajax({ ???????????????????url: page,//提交地址 ???????????????????type: get,//提交方式，不写默认get ???????????????????async: true,//异步请求 false为同步 不写默认true
contentType: "application/x-www-form-urlencoded",//post请求时需要设置请求头 ???????????????????data:{"name":value},//json格式提交数据
dataType:"html",//返回值类型，可以是xml/html/script/json/text/jsonp ???????????????????success: function(result){//请求成功回调函数，成功响应执行的代码 result就是response的内容 ???????????????????????$("#checkResult").html(result); ???????????????????}
error:function(){//请求失败时的回调函数
alert("请求失败");
} ???????????????}); ???????}); ???}); ???$(function(){//get方式提交请求，post语法相同 ???????$("#name").keyup(function(){ ???????????var page = ""; ???????????var value = $(this).val(); ???????????????$get( ???????????????????page, ???????????????????{"name":value}, ???????????????????function(result){ ???????????????????????$("#checkResult").html(result); ???????????????????} ???????????????); ???????}); ???});
//load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。 ???$(function(){//load实现ajax ??????????$("#name").keyup(function(){ ????????????var value = $(this).val(); ????????????var page = "/study/checkName.jsp?name="+value; ????????????$("#checkResult").load(page); ??????????}); ???});</script><title>无标题文档</title></head><body> ???<div id="checkResult"></div> ?????输入账号 :<input id="name" type="text"></body></html>当要提交的内容很多时，用一个个的变量去接收非常繁琐，这里就要用到序列化serialize：
<!doctype html><html><head><meta charset="utf-8"><script src="jquery-3.3.1.min.js"></script><script> ???$(function(){ ???????$("input").keyup(function(){ ???????????var data = $("#form").serialize();//序列化表单内所有提交数据 ???????????var url = "http://how2j.cn/study/checkName.jsp"; ???????????var link = url+"?"+data; ???????????$("a").html(link);//实时显示请求URL ???????????$("a").attr("href",link);//改变链接值 ???????????????$.get( ???????????????????page, ???????????????????data, ???????????????????function(result){ ???????????????????????$("#checkResult").html(result); ???????????????????} ???????????????); ???????}); ???});</script><title>无标题文档</title></head><body> ???<div id="checkResult"></div> ???<div id="data"></div> ???<a href="http://how2j.cn/study/checkName.jsp">http://how2j.cn/study/checkName.jsp</a> ???<form id="form"> ??????输入账号 :<input id="name" type="text" name="name"> <br> ???输入年龄 :<input id="age" type="text" name="age"> <br> ???输入手机号码 :<input id="mobile" type="text" name="mobile"> <br> ?????</form></body></html>AJAX
原文地址：https://www.cnblogs.com/whwjava/p/9055607.html