ajax 学习记录

ecplise 下载安装

ecplise 21.06 Eclipse IDE for Enterprise Java and Web Developers 下载

下载完直接解压运行

创建项目

先下载好 tomcat 8.5

创建web项目
在这里插入图片描述

选择Next->Next

在这里插入图片描述
勾选，创建web.xml 然后点击Finish

创建ajax后台请求处理类

新建包

在这里插入图片描述

创建servlet

在这里插入图片描述

AjaxServlet 内容

在这里插入图片描述
选择自己实现doGet, doPost 方法

package ajax.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServlet;

public class AjaxServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 设置response缓冲区的编码
		resp.setCharacterEncoding("UTF-8");
		resp.getWriter().write("AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
\r\n"
				+ "AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下\r\n");
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req,resp);
	}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

web.xml

修改web.xml

在这里插入图片描述
内容为：


<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>ajaxdisplay-name>
  
      <servlet>
   		 <servlet-name>AjaxServletservlet-name>
        <servlet-class>ajax.servlet.AjaxServletservlet-class>
    servlet>
    
 
     <servlet-mapping>
        <servlet-name>AjaxServletservlet-name>
        <url-pattern>/AjaxServleturl-pattern>
    servlet-mapping>
  
  <welcome-file-list>
    <welcome-file>index.htmlwelcome-file>
    <welcome-file>index.htmwelcome-file>
    <welcome-file>index.jspwelcome-file>
    <welcome-file>default.htmlwelcome-file>
    <welcome-file>default.htmwelcome-file>
    <welcome-file>default.jspwelcome-file>
  welcome-file-list>
web-app>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

复制类的全类名方法：

在这里插入图片描述

新建index.html

在这里插入图片描述
目录结构

`index.html`内容

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>

<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// 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","AjaxServlet",true);
	xmlhttp.send();
}
script>
head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容h2>div>
<button type="button" onclick="loadXMLDoc()">修改内容button>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37