Ajax原生和Jquery例题

最新推荐文章于 2024-01-26 16:30:15 发布

少年西西

最新推荐文章于 2024-01-26 16:30:15 发布

阅读量494

点赞数 1

CC 4.0 BY-SA版权

分类专栏： D_JavaWeb阶段 # D10_Ajax知识与Filter 过滤器

本文链接：https://blog.youkuaiyun.com/qq_45554909/article/details/117415044

D_JavaWeb阶段同时被 2 个专栏收录

104 篇文章

订阅专栏

D10_Ajax知识与Filter 过滤器

10 篇文章

订阅专栏

创建一个工程TestAJAX
（1）请写出一个原生ajax的示例，发送post请求，在后台输出接收到的请求参数，以key:value的格式输出
（2）将上述需求改为jquery ajax的形式发送
在这里插入图片描述

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.epoint</groupId>
  <artifactId>TestAJAX</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  
    <build>
	  	<plugins>
	  		<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>3.7.0</version>
				<configuration>
				<source>1.8</source>
				<target>1.8</target>
				</configuration>
			</plugin>	
	  	</plugins>
  </build>
</project>

ajaxTest.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax测试</title>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<button onClick="btnFun1()"> 原生AJAX发送请求</button>&nbsp;&nbsp;
	<span id="info1"></span>
	<br/>
	<br/>
	<button onClick="btnFun2()"> jQuery AJAX发送请求</button>&nbsp;&nbsp;
	<span id="info2"></span>
	
	<script type="text/javascript">
		
	//获取xhr对象
	function getXHR(){
		var xhr;
		
		if(window.XMLHttpRequest){
			//IE7+.Chrome,Firefox,Opera,Safari浏览器都支持xhr对象
			xhr = new XMLHttpRequest();
		}else{
			//IE5,IE6等比较旧的浏览器
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		return xhr;
	}
	
	//原生Ajax
	function btnFun1(){
		// 1、我们首先要创建XMLHttpRequest
		var xhr = getXHR();
		
		// 2、调用open方法设置请求参数
		xhr.open("POST","/TestAJAX/AjaxServlet",true);
		
		 // 3、调用send方法发送请求
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xhr.send("username=zhangsan&passowrd=1111");
		
		// 4、接收到响应信息之后的信息
		//每当 readyState 改变时，就会触发 onreadystatechange 事件。
		xhr.onreadystatechange = function(){
			if(this.status == 200 && this.readyState == 4){
				document.getElementById("info1").innerHTML = this.responseText;
			}
		}
		
	}
	
	//jQuery AJAX
	function btnFun2(){
		
		var info = {"username":"lisi","password":"111"}
		$.ajax({
			type: "POST",
			url: "/TestAJAX/AjaxServlet",
			data: info,
			success: function (result) {
				document.getElementById("info2").innerHTML = result;
			},
			error: function (e) {//请求失败
				document.getElementById("info2").innerHTML = e.status;
			}
		});
		
	}
	</script>
</body>
</html>

AjaxServlet.java

package com.epoint.servlet;

import java.io.IOException;
import java.util.Enumeration;

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

/**
 * Servlet implementation class AjaxServlet
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxServlet() {
        super();
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("UTF-8");
		
		//获取所有请求参数的名称和值
		Enumeration<String> parameterNames = request.getParameterNames();
		
		while (parameterNames.hasMoreElements()) {
			String parameterName = (String) parameterNames.nextElement();
			
			String[] parameterValues = request.getParameterValues(parameterName);
			
			for (String value : parameterValues) {
				System.out.println(parameterName + ":" + value);
				//返回响应
				response.getWriter().append(parameterName + ":" + value + "&nbsp;&nbsp;");
			}
			
		}
		
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}