本片博客主要是简单介绍Ajax的内容；通过一个玩具式的范例来介绍Ajax实现的三个步骤。

需要理解几点：

（1）以前遇到的请求都是和一个网页面联系在一起的，即前端发起一个请求就是会在一个页面绑定在一起，，也可以理解成以前接触到的都是为了展示一个全新的页面而发起一个请求，，也可以理解成每发起一个新的请求，都会创建一个新的界面来展示本次请求响应的内容。。。。但ajax不是这样，ajax的请求内容并不是为了展示一个新的界面，而是在将本次请求的响应内容，局部刷新展示在已有界面上，本质是，已有的页面是发起一个没有和新的页面绑定的请求（这个请求和已有界面的局部刷新有关）。。。

而这个功能的实现，浏览器中内嵌的ajax起了重要作用。

（2）一个可以接受请求，发出响应的servlet的任务仅仅是接受前台请求数据，处理后再返给前台，具体响应后，前台怎么展示这些数据就和后台servlet无关了，

（3）目前可以这样理解：ajax是内嵌到浏览器中的一种技术，归浏览器解释；当浏览器解析到前端文件中的ajax部分的时候，浏览器会自动采用内置的ajax去解释；

一：Ajax简介：

Ajax主要作用：在不刷新网页的情况下，与后台数据进行交互，从而实现页面局部刷新的功能；

二：Ajax使用流程简介和准备工作：

1.Ajax使用流程简介：

2.准备工作：

创建Web工程ajax，新建index.html和ContentServlet：

index.html：

 
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>test ajax</title>
    </head>
    <body>
    <!-- 当点击“加载”按钮时，向服务器发送请求，将服务器返回的信息动态地写入到divContent这个容器中；即局部刷新和加载 -->
    	<input id="btnLoad" type="button" value="加载">
    	<div id="divContent"></div>
 
    </body>
    </html>

ContentServlet.java：

    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
 
    /**
     * Servlet implementation class ContentServlet
     */
    @WebServlet("/content")
    public class ContentServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
 
        /**
         * @see HttpServlet#HttpServlet()
         */
        public ContentServlet() {
            super();
            // TODO Auto-generated constructor stub
        }
 
    	/**
    	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		response.getWriter().println("<b>I'm server Content</b>");
    		// （1）用于应对Ajax请求的Servlet，该Servlet不进行任何页面的跳转，而是直接返回要响应给Ajax请求的信息（或者说是
    		//提供用户所需要的数据就可以了；（2）通常数据的格式会采用JSON，很少这样直接回传一个html字符串；）
    	}
 
    }

目前的需求是：当点击“加载”按钮时，向服务器发送请求，将服务器返回的信息动态地写入到divContent这个容器中；即局部刷新和加载：

三：利用Ajax实现：

第一步：创建XmlHttpRequest对象

 
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>test ajax</title>
    </head>
    <body>
    <!-- 当点击“加载”按钮时，向服务器发送请求，将服务器返回的信息动态地写入到divContent这个容器中；即局部刷新和加载 -->
    	<input id="btnLoad" type="button" value="加载">
    	<div id="divContent"></div>
    	<script>
    		document.getElementById("btnLoad").onclick = function(){
    			//1.创建XMLHttpRequest对象
    			var xmlhttp;
    			if(window.XMLHttpRequest){  // 新版本浏览器支持这句话
    				xmlhttp = new XMLHttpRequest();  // 创建一个新的XmlHttpRequest对象
    			}else{   // 老版本浏览器
    				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			console.log(xmlhttp);
    			//2.发送Ajax请求
    			//3.处理服务器响应
    		}
 
    	</script>
 
    </body>
    </html>

效果：

第二步：发送Ajax请求

 
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>test ajax</title>
    </head>
    <body>
    <!-- 当点击“加载”按钮时，向服务器发送请求，将服务器返回的信息动态地写入到divContent这个容器中；即局部刷新和加载 -->
    	<input id="btnLoad" type="button" value="加载">
    	<div id="divContent"></div>
    	<script>
    		document.getElementById("btnLoad").onclick = function(){
    			//1.创建XMLHttpRequest对象
    			var xmlhttp;
    			if(window.XMLHttpRequest){  // 新版本浏览器支持这句话
    				xmlhttp = new XMLHttpRequest();  // 创建一个新的XmlHttpRequest对象
    			}else{   // 老版本浏览器
    				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			console.log(xmlhttp);
    			//2.发送Ajax请求
    			// xmlhttp.open("GET","http://localhost:8080/ajax/content","true");
    			// 请求地址可以写成上面的完整的http的形式，也可以采用下面的简写形式
    			xmlhttp.open("GET","/ajax/content",true);
    			xmlhttp.send();
    			//3.处理服务器响应
    		}
 
    	</script>
 
    </body>
    </html>

效果：

查看content：

查看response：

当多次点击“加载”按钮时：

第三步：处理服务器的响应

（1）核心事件是onreadystatechange，当ajax在发送过程中，各个状态发生变化的时候，就会触发这个事件；（注：onreadystatechange是XmlHttpRequest对象的事件 ）

（2）readyState用以判断Ajax执行到了哪一步，最重要的是为4的时候；（ 注：readyState是XmlHttpRequest对象的属性 ）

（3）status：服务器处理的状态，200代表处理成功；（ 注：status 是XmlHttpRequest对象的属性 ）

readyState=4和status=200，就代表响应已经被接受，而且服务是处理成功了。（服务器处理不成功时，其也还是会有响应的，只是这个响应是一个出错的响应，比如当 status=404的时候；对于响应出错的时候，后续应该采取其他策略）；

（4）使用了XmlHttpRequest对象的responseText属性，获取服务器响应的文本；（ 注：responseText 是XmlHttpRequest对象的属性 ）

获取服务器响应的文本后，对这个文本进行后续处理就可以了；（这个文本一般是JSON形式的，JSON作为一种功能强大、前后端都能解释的表示方法很给力哦）

 
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>test ajax</title>
    </head>
    <body>
    <!-- 当点击“加载”按钮时，向服务器发送请求，将服务器返回的信息动态地写入到divContent这个容器中；即局部刷新和加载 -->
    	<input id="btnLoad" type="button" value="加载">
    	<div id="divContent"></div>
    	<script>
    		document.getElementById("btnLoad").onclick = function(){
    			//1.创建XMLHttpRequest对象
    			var xmlhttp;
    			if(window.XMLHttpRequest){  // 新版本浏览器支持这句话
    				xmlhttp = new XMLHttpRequest();  // 创建一个新的XmlHttpRequest对象
    			}else{   // 老版本浏览器
    				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			console.log(xmlhttp);
    			//2.发送Ajax请求
    			// xmlhttp.open("GET","http://localhost:8080/ajax/content","true");
    			// 请求地址可以写成上面的完整的http的形式，也可以采用下面的简写形式
    			xmlhttp.open("GET","/ajax/content",true);
    			xmlhttp.send();
    			//3.处理服务器响应
    			xmlhttp.onreadystatechange = function(){
    				if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    					var t = xmlhttp.responseText;
    					alert(t);
    					// 这个对响应文本的后续处理肯定会比较复杂的,不会像下面这样简单赋值就OK了的;
    					document.getElementById("divContent").innerHTML = t;
    				}
    			}
    		}
 
    	</script>
 
    </body>
    </html>

效果：

注：上面几个Ajax演示过程，仅仅是演示了Ajax的基本流程；上面过程有两点有待完善的：

（1）其中请求中并没有附带请求参数；（2）响应的数据也仅仅是响应一个html字符串；一切都很简单，主要目的是展示Ajax的使用步骤而已；；；所以，上面的演示案例仅仅是一个骨架，或者是一个玩具式的范例。。

疑问：？？？？？ （1）在实际开发中，对于成熟的前端程序员，是不是有这个习惯？jquery和原生JavaScript混用，实现起来简单的地方就用“容易理解的”JavaScript，逻辑复杂的地方就用“形式简略、高度浓缩的”的jquery？

jQuery只是在JavaScript基础上提炼出来的一种“plugin”，JavaScript才是根本，而且前端框架一天一个样，但都是以JavaScript为基础的，目前比较火的框架是Vue，React等这些。。。

（2）ajax中的window是什么意思？window应该值浏览器打开的窗口；意识就是，XmlHttpRequest对象的真正实际的创建是需要浏览器去实际创建的。。。（这也印证了ajax是内嵌在浏览器中的。。。ps：JavaScript也是内嵌到浏览器中的，感觉浏览器好辛苦哎，，，，，）

HL🌱数字花园

探索

Ajax简介