ajax入门_ajax入門-CSDN博客

本文链接：https://blog.csdn.net/dzz_bc/article/details/80428905

AJAX A synchronous J A vaScript and X ML 异步刷新

传统方式如果校验用户名的话，需要提交验证，用户名存储在数据库中，只有提交才可与服务器交互。ajax是局部刷新的功能，下边的例子，就是可以直接和servlet交互，从而达到校验的目的。

get方式jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>??</title>
<script type="text/javascript">
	//创建异步对象
	function createXMLHttpRequest() {
		try {
			return new XMLHttpRequest();
		} catch (e) {
			try {
				//适用于ie6
				return new ActiveXObject("Msxm12.XMLHTTP");
			} catch (e) {
				try {
					return new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
					throw e;
					alert("兄弟用的啥浏览器?");
				}
			}
		}
	}
	window.onload = function(){//文档加载完毕后执行
		var btn = document.getElementById("btn");
		
		btn.onclick = function() {//给按钮添加点击事件
			/*
				ajax四步操作
			*/
			//1,得到异步对象
			var xmlHttp = createXMLHttpRequest();
			/*2,打开与服务器的连接
				指定请求方式
				指定请求URL
				指定是否为异步请求
			*/
			xmlHttp.open("GET","/Ajax/Aservlet",true);
			//3发送请求
			xmlHttp.send(null);//get请求没有请求体,但是也要给出null ，否则firefox可能会不能发送
			//4给异步对象的onreadystatechange注册监听器
			
			xmlHttp.onreadystatechange = function() {//xmlHttp状态发生改变时候执行
				//双重判断 xmlHttp状态为4（服务器响应结束） 服务器响应状态码为200（响应成功）
				if(xmlHttp.readyState==4 && xmlHttp.status==200){
					//获取服务器的响应结果
					var text = xmlHttp.responseText;
					//获取h1元素
					var h1 = document.getElementById("h1");
					h1.innerHTML = text;
				}
				
			}
			
		}
		
	}
</script>

</head>
<body>
	
	<button id="btn">ajax2实验</button>
	
	<h1 id="h1"></h1>
</body>
</html>

get方式servlet

package cn.dzz.web.servlet;

import java.io.IOException;
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 Aservlet
 */
@WebServlet("/Aservlet")
public class Aservlet extends HttpServlet {
	
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		System.out.println("Hello Ajax!");
		
		response.getWriter().print("Hello Ajax!!!");
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");//从servlet中响应回ajax的数据编码问题
		
		request.setCharacterEncoding("UTF-8");//请求体参数数据中解决中文乱码，编码问题
		//获取请求参数
		String username = request.getParameter("username");
		System.out.println("(post章)Hello Ajax!"+username);
		
		response.getWriter().print("(post章)Hello Ajax!!!"+username);
	}
}

post方式jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>??</title>
<script type="text/javascript">
	//创建异步对象
	function createXMLHttpRequest() {
		try {			//异步对象
			return new XMLHttpRequest();
		} catch (e) {
			try {
				//适用于ie6
				return new ActiveXObject("Msxm12.XMLHTTP");
			} catch (e) {
				try {
					//适用于ie5
					return new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
					throw e;
					alert("兄弟用的啥浏览器?");
				}
			}
		}
	}
	window.onload = function(){//文档加载完毕后执行
		var btn = document.getElementById("btn");
		
		btn.onclick = function() {//给按钮添加点击事件
			/*
				ajax四步操作
			*/
			//1,得到异步对象
			var xmlHttp = createXMLHttpRequest();
			/*2,打开与服务器的连接
				指定请求方式
				指定请求URL
				指定是否为异步请求
			*/
			/*************POST请求**************/
			xmlHttp.open("POST","/Ajax/Aservlet",true);
			/*************设置请求头:Content-Type**************/
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			
			//3发送请求
			/*************POST请求发送时候指定请求体**************/
			xmlHttp.send("username=zhangsan风 & userpass=123");//post请求有请求体 有参数用post没参数用get   get请求没有请求体,但是也要给出null ，否则firefox可能会不能发送
			//4给异步对象的onreadystatechange注册监听器
			
			xmlHttp.onreadystatechange = function() {//xmlHttp状态发生改变时候执行
				//双重判断 xmlHttp状态为4（服务器响应结束） 服务器响应状态码为200（响应成功）
				if(xmlHttp.readyState==4 && xmlHttp.status==200){
					//获取服务器的响应结果
					var text = xmlHttp.responseText;
					//获取h1元素
					var h1 = document.getElementById("h1");
					h1.innerHTML = text;
				}
			}
		}
	}
</script>

</head>
<body>
	
	<button id="btn">ajax3实验</button>
	
	<h1 id="h1"></h1>
</body>
</html>

post方式servlet

package cn.dzz.web.servlet;

import java.io.IOException;
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 Aservlet
 */
@WebServlet("/Aservlet")
public class Aservlet extends HttpServlet {
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");//从servlet中响应回ajax的数据编码问题
		
		request.setCharacterEncoding("UTF-8");//请求体参数数据中解决中文乱码，编码问题
		//获取请求参数
		String username = request.getParameter("username");
		System.out.println("(post章)Hello Ajax!"+username);
		
		response.getWriter().print("(post章)Hello Ajax!!!"+username);
	}
}