Ajax开发步骤解析

最新推荐文章于 2022-11-19 20:29:01 发布

mischen520

最新推荐文章于 2022-11-19 20:29:01 发布

阅读量339

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/miachen520/article/details/51966209

版权

Web 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.先建一个new webproject 工程，在src下面建一个包，在包下面建一个java文件，代码如下：

package com.cdsxt.ajax;

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 AjaxAction extends HttpServlet{
	
	private static final long serialVersionUID = 7004191883547083244L;

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

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		/**
		 * 业务逻辑
		 * 
		 * 
		 * 
		 */
		
		resp.getWriter().write("Hello Ajax!!!");
	}
	
	

}

2.在WebRoot下面的web.xml中配置如下信息：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<display-name></display-name>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
	
	<servlet>
		<servlet-name>ajax</servlet-name>
		<servlet-class>com.cdsxt.ajax.AjaxAction</servlet-class>
	</servlet>
	
	<servlet-mapping>
		<servlet-name>ajax</servlet-name>
		<url-pattern>/ajax</url-pattern>
	</servlet-mapping>
</web-app>

3.在index.jsp下面输入如下信息：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript">
	
		/**
			ajax基本步骤
			第一步：创建XMLHttpRequest对象
			第二步：写监听函数
			第三步：打开请求
			第四部：发送请求
			
		*/
		
		function testAajx(){
			
			//创建一个请求对象
			var request;
			//为了处理浏览器的差异性问题
			//第一个更通用  判断window对象中是否含有 XMLHttpRequest对象   如果有  则直接new出来使用
			//如果没有  则表示是ie浏览器  要采用特殊的方式进行创建
			if(window.XMLHttpRequest){
				//创建对象
				request = new XMLHttpRequest();
			}else if(window.ActiveXObject){
				request = new ActiveXObject("Msxml2.XMLHTTP");
			}
			//监听函数   是一个回调函数
			request.onreadystatechange = function (){
				
				//写业务逻辑的地方
				var code = request.readyState;
				console.log(code);
				if(code==4){
					alert(request.responseText);
				}
				
			};
			
			//第一个参数   表示 提交方式
			//第二个参数  表示提交的地址
			//第三个参数  表示是否位同步   默认值是 true  如果为false  表示同步   是可选的
			//第四个和第五个参数  表示  basic认证所需的用户名和密码   不常用
			request.open("get", "ajax");
			
			//发送请求
			//get方式   需要传入null
			//
			request.send(null);
			
			
		}
	
	</script>
  </head>
  
  <body>
    <input type="button" value="testAjax" οnclick="testAajx()">
  </body>
</html>

4.配置完成，加载服务器，输入正确路径即可看到正确结果，路径一定要输入正确

mischen520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax开发步骤解析

1.先建一个new webproject 工程，在src下面建一个包，在包下面建一个java文件，代码如下：package com.cdsxt.ajax;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax
复制链接

扫一扫

专栏目录