js原生态的Ajax实现+SpringMVC

最新推荐文章于 2020-11-01 16:22:55 发布

木偶线

最新推荐文章于 2020-11-01 16:22:55 发布

阅读量1.1k

点赞数

分类专栏： SSH学习 Ajax

本文链接：https://blog.csdn.net/qq_31796663/article/details/71512776

版权

SSH学习同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Ajax

3 篇文章 0 订阅

订阅专栏

Ajax概述

Ajax是Asynchronous JavaScript and XML的缩写，也叫做异步的JavaScript和XML。

同步和异步的区别

同步：当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面进入假死状态，当这个AJAX执行完毕后才会继续运行其他代码，页面假死状态才会解除。也就是说，如果用ajax的话，同步那就没有什么意义了。

异步：当JS代码加载到当前的AJAX的时候，这时候浏览器在发送请求的同时，也在解析页面的代码，也就是说浏览器同时在做两件事。

js原生态代码实现

一般分四个步骤：创建对象XMLHttpRequest对象、连接数据库、发送请求、处理响应结果函数

以Struts2为例

测试页面testAjax.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 'login.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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	<script type="text/javascript">
	/*
	*考虑到浏览器的不同，创建XMLHttpRequest的方法也不同
	*/
	function createXMLHttpRequest() {
		try {//符合大部分浏览器
			return new XMLHttpRequest();
		} catch (e) {//符合IE6.0
			try {
				return new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {//符合IE5.5及更低的版本
				try {
					return new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
					alert("未识别浏览器类型");
					throw e;
				}
			}
		}
	}
	
	window.onload = function() {
		/*
		*获取文本框的DOM对象
		*/
		var username1 = document.getElementById("username");
		/*
		*为文本框对象添加失去焦点事件监听器
		*/
		username1.onblur = function() {
			/*
			*Ajax的四步操作：创建XMLHttpRequest对象、连接数据库、发送请求、处理响应结果
			*/
			/*
			*第一步：创建获取XMLHttpRequest对象
			*/
			var xmlHttp = createXMLHttpRequest();
			
			/*
			*第二步：连接数据库，open方法，
			*参数1：采用POST请求方式
			*参数2：请求后台资源 ValidateUsernameServlet
			*参数3：采用异步请求方式，true
			*/
			xmlHttp.open("POST", "/SSH_SpringMVC/ajax/testAjax.do", true);
			//因为是POST请求方式，所以需要设置请求体，是固定的
			xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			
			/*
			*第三步：发送请求，send方法
			*参数就是要传递给后台服务器的，使用使用像键值对那样的方式，如果有多个就使用&链接
			*将用户名的内容value传送
			*/
			xmlHttp.send("username="+username1.value);
			
			/*
			*第四步：处理服务器传回来的结果,onreadystatechange
			*如果为1：在span标签中输出“用户名已经被注册”
			*如果为0：什么都不用做
			*/
			xmlHttp.onreadystatechange = function() {
				console.log("正常");
				if(xmlHttp.readyState==4 && xmlHttp.status==200) {//双重判断，xmlHttp的状态为4（说明服务器响应结束），服务器响应成功为200
					var flag = xmlHttp.responseText;//服务器响应返回的结果
					var info = document.getElementById("red");
					info.innerHTML = flag;
				}
			};
		};
	};
	</script>
	

  </head>
  
  <body>
    <form>
    	username:<input type="text" name="username" id="username"><span id="red"></span><br />
    	password:<input type="password" name="password"><br />
    	address:<input type="text" name="address"><br />
    	<input type="submit" value="login">
    </form>
  </body>
</html>

Controller：

package com.yxd.controller;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

/**
 * 
 * @ProjectName SSH_SpringMVC
 * @package com.yxd.controller
 * @ClassName TestAjaxController.java
 * @Author YXD
 * @Time 2017年5月9日 下午10:20:55
 * @Description 测试ajax
 *
 */
@Controller
@RequestMapping("/ajax")
public class TestAjaxController {

	@RequestMapping("/testAjax.do")
	public String testAjax(HttpServletResponse response, String username) throws IOException {
		//静态数据jack
		String realname = "jack";
		if(realname.equals(username)) {
			//设置编码为utf-8，可以显示中文
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().print("<font style='color:red;'>用户名已经存在</font>");
		} else if("".equals(username)) {
			//设置编码为utf-8
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().print("<font style='color:red;'>用户名不能为空</font>");
		} else {
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().print("<font style='color:green;'>用户名可以注册</font>");
		}
		return null;
	}
}

总结：

SpringMVC的Controller中的方法的返回值可以是void、String、ModelAndView，但是如果是String和ModelAndView的话，需要返回null。
Controller方法中的参数必须要有HttpServletResponse对象，否则就会报错。
这只是单纯的测试Ajax，并不说明就只是这些。
如果有错误的话，可以留言。