ajax 学习记录

news2024/11/15 18:20:55

ajax 学习记录

- - ecplise 下载安装
  - 创建项目
  - 创建ajax后台请求处理类
  - - 新建包
    - 创建servlet
    - AjaxServlet 内容
  - web.xml
  - 新建index.html
  - - `index.html`内容
  - 运行

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 不是新的编程语言，而是一种使用现有标准的新方法。</br>\r\n"
				+ "AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下\r\n");
	}

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

}

web.xml

修改web.xml

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

<?xml version="1.0" encoding="UTF-8"?>
<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>ajax</display-name>
  
      <servlet>
   		 <servlet-name>AjaxServlet</servlet-name>
        <servlet-class>ajax.servlet.AjaxServlet</servlet-class>
    </servlet>
    
 
     <servlet-mapping>
        <servlet-name>AjaxServlet</servlet-name>
        <url-pattern>/AjaxServlet</url-pattern>
    </servlet-mapping>
  
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

复制类的全类名方法：

在这里插入图片描述

新建index.html

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

`index.html`内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<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>