![ee71f92569237b55a8a2aae54f53914f.png](https://img-blog.csdnimg.cn/img_convert/ee71f92569237b55a8a2aae54f53914f.png)
1.ajax入门案例
1.1 搭建Web环境
ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输。
如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧。
打开eclipse,新建一个web项目。
如果对JavaWeb项目还不太清楚的,可以去参考我之前的文章。我
目录结构:
![30c3a3883cd9d7280177203ac3262c33.png](https://img-blog.csdnimg.cn/img_convert/30c3a3883cd9d7280177203ac3262c33.png)
<?xml version="1.0" encoding="UTF-8"?>
这样就好了,web项目搭建完毕。
暂时不要往下写,先确保我们到目前为止的工作是没问题的。
验证方法就是在WebContent目录下,新建一个空的jsp页面,里面随便写的什么。
![86fd431540ecac409801e31f215b89b9.png](https://img-blog.csdnimg.cn/img_convert/86fd431540ecac409801e31f215b89b9.png)
Insert title here
Hello World
启动tomcat,把这个项目跑起来。
![e99fbc52947cf03524729dfa428c3e70.png](https://img-blog.csdnimg.cn/img_convert/e99fbc52947cf03524729dfa428c3e70.png)
没报错。
打开浏览器,输入访问地址,我这里的tomcat端口号是80 ,默认可以不写。
http://localhost/ajax/index.jsp
![5c5838a42adc69e6d66311c0e1f15def.png](https://img-blog.csdnimg.cn/img_convert/5c5838a42adc69e6d66311c0e1f15def.png)
1478764554890071423.png
来了,没问题。
好的,这说明我们的web项目搭建没有问题。
1.2 编写服务器程序Servlet
个人感悟,精粹整理
web环境已经搭好,接下来,让我们来编写一个简单的Servlet程序,tomcat是一个服务器,现在它里面有一个名字叫做ajax的web项目,那么这些Servlet就好比是web项目里面的一个个小功能。
你的电脑里面有QQ,Word,杀毒软件等程序。一个web项目,也就是一个应用程序。本质上和你电脑上的QQ概念是一样一样的。
你打开QQ,可以聊天,语音,视频。这些小功能,类比到JavaWeb项目,就是一个个Servlet。
很多人都知道框架,比如大名鼎鼎的SpringMVC,里面有一个个的Controller,其实这些Controller到底是什么玩意,不要怕,他们其实就是对Servlet做了一个封装,本质上还是一样一样的。
我们写一个Servlet,都需要去web.xml里面注册一下,否则就用不了。你安装一个QQ,注册表里面是不是肯定也需要注册一下啊,这不还是一样一样的吗?
好了,闲话不多说。我们来写一个小功能,也就是一个Servlet。
![708ee487ce23bdf4c43f5775886454ee.png](https://img-blog.csdnimg.cn/img_convert/708ee487ce23bdf4c43f5775886454ee.png)
继承HttpServlet,同时改写doGet方法
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 MyServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("111"); }}
里面我们先什么也不写。
接下来,我们要在web.xml里面把这个Servlet注册一下。
<?xml version="1.0" encoding="UTF-8"?>MyServletMyServletMyServlet/MyServlet
OK,Servlet注册完毕,我们先来访问一下这个功能。
重启tomcat。
访问:http://localhost/ajax/MyServlet
![d7f4bc04af1a9a985c8c8d882ab918dd.png](https://img-blog.csdnimg.cn/img_convert/d7f4bc04af1a9a985c8c8d882ab918dd.png)
1.3 前台页面设计
服务器小程序已经差不多了,现在我们为了和服务器进行交互,就需要编写前台页面。这个页面也就是给用户看的。换言之,用户只能通过前台页面来访问我们的Servlet。
我们来写一个小案例,在页面上发送一句话到服务器,然后服务器给出一个回应就行了。
就是这么一个简单的案例,主要用来熟悉一下流程。
为了简单起见,我就不自己调css样式了,直接用bootstrap吧。
引入bootstrap的核心css文件。
![4169bb6bf12eaf8d07b1f0e45031c203.png](https://img-blog.csdnimg.cn/img_convert/4169bb6bf12eaf8d07b1f0e45031c203.png)
然后,修改index.jsp
Insert title here
提交
页面效果:
![ebd973226a9ef45a8cbacc09c87d6b03.png](https://img-blog.csdnimg.cn/img_convert/ebd973226a9ef45a8cbacc09c87d6b03.png)
1.4 基于get方式的数据请求
当我们点击提交按钮,就alert()一下,如果成功的话,那么说明点击事件没有问题。然后,继续往下写代码。
如果是以往,我们都是通过form表单来进行提交的,可是这样的话,就会有一个问题,就是页面会刷新,而且代码也相对比较难懂。
自从ajax出来了之后,这种情况得到了巨大的改善,局部刷新技术在当时来看,还是非常不错的。
我先把实现代码给出:
btn.onclick = function(){ var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("get