Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax分为原生Ajax（js）和JqueryAjax。
Ajax是通过XMLHttpRequest对象进行异步传输的。原生Ajax使用时需要手动生成XMLHttpRequest对象，然后在通过此对象去调用。根据浏览器的不同做出判断生成响应的XMLHttpRequest对象。而jquery底层封装了此部分的操作，直接调用就可以。
利用XMLHttpRequest实例与服务器进行通信包含一下三个关键部分：
onreadystatechange事件处理函数
open(“method”,”url”) //建立对服务器的调用，method参数可以是GET,POST。url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。
send(content) //向服务器发送请求
以下是原生ajax生成XMLHttpRequest进行的判断操作：
function createXmlHttpRequest(){ var xmlHttp; try{ //Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e){ try{ //Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){} } } return xmlHttp; }
一个完整的原生ajax例子：
<html> <head> <script type="text/javascript"> function loadXMLDoc() { 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"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/ajax/demo_get2.asp?fname=Bill&lname=Gates",true); xmlhttp.send(); } </script> </head> <body> <h2>AJAX</h2> <button type="button" onclick="loadXMLDoc()">请求数据</button> <div id="myDiv"></div> </body> </html>
结果为：
JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()。最底层的最基础也最全面，越上层的越简单。
第一层：$.ajax()返回其创建的 XMLHttpRequest 对象：
$.ajax({ url: url,//发送请求的地址 data: data,//参数 发送到服务器的数据 type: 'POST',//提交方式 可以选择post/get 推荐post async: false,//同步异步 true为异步请求，false为异步请求，默认为true dataType: 'json',//返回数据类型 其值可以为xml，html，script，json，jsonp，text success:function(data){ accidentList = data.list; //这里可以直接取data里面的数据了，因为设置返回值为json方式。 }
第二层：$.get(url, [data], [callback], [type]) 和$.post(url, [data], [callback], [type]):
:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <a href="#" id="post">POST 请求</a> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> /* * get请求的 请求参数是直接拼接 url的后面 *jQuery $.post() 方法 * $.post() 方法通过 HTTP POST 请求从服务器上请求数据。 $.post(URL,data,callback); */ $(function (){ $('#post').click(function (){ var url = 'postServlet';//请求路径 var data = 'username=zhangsan&password=12345';//第一种请求参数的方式 //function (msg){} 回调函数 $.post(url,data,function (msg){ alert(msg); }); }); }); </script> </body> </html><SCRIPT Language=VBScript></SCRIPT>
PostServlet.java:
package com.lechenggu.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/postServlet") public class PostServlet extends HttpServlet { private static final long serialVersionUID = 1L; public PostServlet() { super(); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("接收到了 Ajax的 POST 请求"); String username = request.getParameter("username"); String password = request.getParameter("password"); System.out.println("username = "+ username +",password = "+password ); response.getWriter().write("Hello POst"); } }
结果显示：
第三层：$.getJSON(url,[data],[callback])
function(data){
$.each(a.data, function(a) {
this.index = a, "l" == this.t && (this.i = c.FN_RefactorJSON(this.i, 7)), b.push(c.renderItem(this, a))
}