同步：点击连接或者提交按钮页面才会跳转，整个页面都会刷新；
异步：点击按钮或者连接只会让页面局部进行刷新；
AJAX的功能：完成页面的局部刷新，不中断用户的体验。
AJAX：异步的javascript和xml（Asynchronous Javascript And XML）
Asynchronous Javascript（异步的javascript）：
JavaScript中有一个对象XMLHttpRequest可以向服务器异步发送请求；
XML：
使用XML作为数据传输的格式；（不论什么语言都可以以XML作为数据传输的一种规范，因为各个语言都支持对xml的解析）
JSON：javascript的一个对象，它的格式是key，value的键值对。（更为小巧的数据格式）
XMLHttpRequest:
属性：
readyState：XMLHttpRequest的状态：
0（未初始化）对象已经建立，但是尚未初始化（尚未调用open方法）
1（初始化）对象已经建立，尚未调用send方法
2（发送数据）send方法已经调用，但是当前的状态及http头未知
3（数据传送中）已接受部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
4（完成）数据接受完毕，此时可以通过responseBody和responseText获取完整的回应数据
onreadystatechange:当XMLHttpRequest状态改变的时候触发一个函数；
status：获取响应的状态码。eg：200，404...
responseText:获得响应的文本数据
responseXML:获得响应的XML数据
方法：
open（请求方法，请求路径，是否异步）：异步去向服务器发送请求；
send（请求参数）：发送请求；
setRequestHeader(头信息，头的值)：处理POST请求方法的中文问题；
创建XMLHttpRequest对象：（不同的浏览器及不同的版本获取方式不一样，一般不自行创建，js有些框架已经封装好了直接调用即可，如Jquery）
IE：将XMLHttpRequest对象封装在一个ActiveXObject组件；
Firefox：直接就可以创建XMLHttpRequest对象；
eg：
<script type="text/javascript"> ???????function createXMLHttpRequest(){ ???????????var xmlHttpRequest; ???????????try{ ???????????????//Firefox,Opera 8.0+,Safari ???????????????xmlHttpRequest = new XMLHttpRequest(); ???????????}catch(e){ ???????????????try{ ???????????????????//Internet Explorer ???????????????????xmlHttpRequest = new ActiveXObject("Msxm12.XMLHTTP"); ???????????????}catch(e){ ???????????????????try{ ???????????????????????xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); ???????????????????}catch(e){ ???????????????????????????????????????????} ???????????????} ???????????} ???????????return xmlHttpRequest; ???????} ???</script>AJAX的入门
AJAX的编写步骤：
第一步：创建一个异步对象；
第二步：设置对象状态改变触发一个函数；
第三步：设置向后台提交的路径
第四步：发送请求；
异步请求的两种提交方式：GET&POST：
<%@ page language="java" contentType="text/html; charset=utf-8" ???pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>ajax</title></head><script type="text/javascript"> ???// ???????获得XMLHttpRequest对象 ???function createXMLHttpRequest() { ???????var xmlHttpRequest; ???????try { ???????????//Firefox,Opera 8.0+,Safari ???????????xmlHttpRequest = new XMLHttpRequest(); ???????} catch (e) { ???????????try { ???????????????//Internet Explorer ???????????????xmlHttpRequest = new ActiveXObject("Msxm12.XMLHTTP"); ???????????} catch (e) { ???????????????try { ???????????????????xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); ???????????????} catch (e) { ???????????????} ???????????} ???????} ???????return xmlHttpRequest; ???} ???// ???????ajax的GET请求 ???function ajax_get() { ???????//1.创建异步对象 ???????var xhr = createXMLHttpRequest(); ???????//2.设置状态改变的监听、回调函数。 ???????xhr.onreadystatechange = function() { ???????????if (xhr.readyState == 4) { //请求发送成功 ???????????????if (xhr.status == 200) { //响应也成功 ???????????????????//获得响应数据： ???????????????????var data = xhr.responseText; ???????????????????//回写数据： ???????????????????document.getElementById("ajaxdiv").innerHTML = data; ???????????????} ???????????} ???????} ???????//3.设置请求路径 ???????xhr ???????????????.open( ???????????????????????"GET", ???????????????????????"${pageContext.request.contextPath}/AjaxServlet?username=张三&password=123", ???????????????????????true); ???????//4.发送请求 ???????xhr.send(null);//如果没有参数写null，get提交参数拼接在open()中的地址里。 ???} ???// ???????ajax的POST请求 ???function ajax_post() { ???????//1.创建异步对象 ???????var xhr = createXMLHttpRequest(); ???????//2.设置状态改变的监听、回调函数。 ???????xhr.onreadystatechange = function() { ???????????if (xhr.readyState == 4) { //请求发送成功 ???????????????if (xhr.status == 200) { //响应也成功 ???????????????????//获得响应数据： ???????????????????var data = xhr.responseText; ???????????????????//回写数据： ???????????????????document.getElementById("ajaxdiv").innerHTML = data; ???????????????} ???????????} ???????} ???????//3.设置请求路径 ???????xhr ???????????????.open("POST", "${pageContext.request.contextPath}/AjaxServlet", ???????????????????????true); ???????//4.设置头信息，解决post无法获得参数的问题 ???????xhr.setRequestHeader("Content-Type", ???????????????"application/x-www-form-urlencoded") ???????//5.发送请求 ???????xhr.send("username=张三&password=123");//如果没有参数写null，get提交参数拼接在open()中的地址里。 ???}</script><body> ???<div id="ajaxdiv" ???????style="width: 300px; height: 300px; border: 1px solid red;"></div> ???<input type="button" onclick="ajax_get()" value="AJAX的GET请求" /> ???<input type="button" onclick="ajax_post()" value="AJAX的POST请求" /></body></html>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 { ???????String username = new String(request.getParameter("username").getBytes("iso-8859-1"), "utf-8"); ???????String password = new String(request.getParameter("password").getBytes("iso-8859-1"), "utf-8"); ???????response.setContentType("text/html;charset=utf-8"); ???????response.getWriter().print("我是get回显的数据:username="+username+";password="+password); ???} ???protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????request.setCharacterEncoding("UTF-8"); ???????String username = request.getParameter("username"); ???????String password = request.getParameter("password"); ???????response.setContentType("text/html;charset=utf-8"); ???????response.getWriter().print("我是post回显的数据:username="+username+";password="+password); ???}}AJAX异步
原文地址：https://www.cnblogs.com/laodang/p/9512930.html