JavaScript中浅讲ajax图文详解

JavaScript中浅讲ajax图文详解

1.1 搭建Web环境

ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输。

如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧。

打开eclipse,新建一个web项目。

如果对JavaWeb项目还不太清楚的,可以去参考我之前的文章。我

目录结构:

JavaScript中浅讲ajax图文详解

<?xml version="1.0" encoding="UTF-8"?> <web-app> </web-app>

这样就好了,web项目搭建完毕。

暂时不要往下写,先确保我们到目前为止的工作是没问题的。

验证方法就是在WebContent目录下,新建一个空的jsp页面,里面随便写的什么。

JavaScript中浅讲ajax图文详解

<%@ 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>Insert title here</title> </head> <body> <h1>Hello World</h1> </body> </html>

启动tomcat,把这个项目跑起来。

JavaScript中浅讲ajax图文详解

没报错。

打开浏览器,输入访问地址,我这里的tomcat端口号是80 ,默认可以不写。

JavaScript中浅讲ajax图文详解

来了,没问题。

好的,这说明我们的web项目搭建没有问题。

1.2 编写服务器程序Servlet

JavaScript中浅讲ajax图文详解

个人感悟,精粹整理

web环境已经搭好,接下来,让我们来编写一个简单的Servlet程序,tomcat是一个服务器,现在它里面有一个名字叫做ajax的web项目,那么这些Servlet就好比是web项目里面的一个个小功能。

你的电脑里面有QQ,Word,杀毒软件等程序。一个web项目,也就是一个应用程序。本质上和你电脑上的QQ概念是一样一样的。

你打开QQ,可以聊天,语音,视频。这些小功能,类比到JavaWeb项目,就是一个个Servlet。

很多人都知道框架,比如大名鼎鼎的SpringMVC,里面有一个个的Controller,其实这些Controller到底是什么玩意,不要怕,他们其实就是对Servlet做了一个封装,本质上还是一样一样的。

我们写一个Servlet,都需要去web.xml里面注册一下,否则就用不了。你安装一个QQ,注册表里面是不是肯定也需要注册一下啊,这不还是一样一样的吗?

好了,闲话不多说。我们来写一个小功能,也就是一个Servlet。

继承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"?> <web-app> <servlet> <!-- 这里是servlet的名字 --> <servlet-name>MyServlet</servlet-name> <servlet-class>MyServlet</servlet-class> <!-- 这里写servlet类在的包路径 --> </servlet> <servlet-mapping> <!-- 这里是地址映射 --> <servlet-name>MyServlet</servlet-name> <!-- 这里写servlet映射地址 --> <url-pattern>/MyServlet</url-pattern> </servlet-mapping> </web-app>

OK,Servlet注册完毕,我们先来访问一下这个功能。

重启tomcat。

访问:

JavaScript中浅讲ajax图文详解

1.3 前台页面设计

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzfzx.html