ajax的封装

最新推荐文章于 2020-11-01 20:04:47 发布

道法—自然

最新推荐文章于 2020-11-01 20:04:47 发布

阅读量153

点赞数

分类专栏：前端页面

本文链接：https://blog.csdn.net/wyqwilliam/article/details/103900369

版权

前端页面专栏收录该内容

38 篇文章 0 订阅

订阅专栏

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 'ajaxUname.jsp' starting page</title>
    <!--引入js文件  -->
    <script type="text/javascript" src="js/ajaxUtil.js"></script>
    <!-- 声明js代码域 -->
	<script type="text/javascript">
		//声明用户名校验函数
			
			function checkUname(){
				var uname=document.getElementById("uname").value;
				myAjax("get", "/ajax/us","uname="+uname, function(ajax){
					//获取响应数据
					var data=ajax.responseText;
					//处理响应数据
					if(eval(data)){
						document.getElementById("unameSpan").innerHTML="用户名被占用";
					}else{
						document.getElementById("unameSpan").innerHTML="用户名OK";
					}
				});
			}
					
	
	/* function deal200(ajax){
		//获取响应数据
		var data=ajax.responseText;
		//处理响应数据
		if(eval(data)){
			document.getElementById("unameSpan").innerHTML="用户名已被占用";
		}else{
			document.getElementById("unameSpan").innerHTML="用户名OK";
		}
	} */
	
	</script>
  </head>
  
  <body>
   	<h3>ajax用户名校验</h3>
   	<hr />
   	用户名:<input type="text"  name="uname" id="uname" value="" onblur="checkUname()"/><span id="unameSpan"></span>
  </body>
</html>

js代码部分：

/*
				method：接收请求方式。值为get或者post
				url:请求地址
				data:请求数据。使用键值对进行传值，不同的键值对使用&符号隔开，例如:"a=123&b=456";
					如果没有请求数据，传入null即可
				ansyc:设置异步和同步，true表示异步，false表示同步，默认是true
				deal200:接收一个函数对象，用来处理响应数据的函数，函数必须声明一个形参用来接收ajax对象。
				deal404:接收一个函数对象，用来处理404的函数
				deal500:接收一个函数对象，用来处理500错误的函数
				
			*/
			function myAjax(method,url,data,deal200,deal404,deal500,ansyc){
				//使用ajax校验用户名是否存在
					//创建ajax引擎对象
						var ajax;
						if(window.XMLHttpRequest){
							ajax=new XMLHttpRequest();
						}else if(window.ActiveXObject){
							ajax=new ActiveXObject("Msxml2.XMLHTTP");
						}
					//覆写onreadystatechange
						ajax.onreadystatechange=function(){
							//判断ajax状态码
								if(ajax.readyState==4){
									//判断响应状态码
									if(ajax.status==200){
										if(deal200){
											deal200(ajax);
										}
									}else if(ajax.status==404){
										if(deal404){
											deal404();
										}
									}else if(ajax.status==500){
										if(deal500){
											deal500();
										}
									}
								}
								
						}
					//发起请求
						if("get"==method.toLowerCase()){
							//使用get
							ajax.open("get",url+(data==null?"":"?"+data),ansyc);
							//发起请求
							ajax.send(null);
						}else if("post"==method.toLowerCase()){
							ajax.open("post", url,ansyc);
							ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");	
							ajax.send(data);
						}
						
			}

servlet文件

package com.bjsxt.userServlet;

import java.io.IOException;

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

import com.bjsxt.pojo.User;
import com.bjsxt.unameservice.UnameService;
import com.bjsxt.unameserviceImpl.UnameServiceImpl;
import com.google.gson.Gson;

public class AjaxAservlet extends HttpServlet {
	UnameService us = new UnameServiceImpl();
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		//创建请求编码格式
		req.setCharacterEncoding("utf-8");
		//创建响应编码格式
		resp.setContentType("text/hrml;charset=utf-8");
		//获取请求信息
		String uname = req.getParameter("uname");
		//处理请求信息
		System.out.println("AjaxAservlet.service()"+uname);
		//响应处理结果
		try {
			Thread.sleep(3000);
		} catch (Exception e) {
			e.printStackTrace();
		}
		//响应ajax数据
		//响应字符串数据：适合于简单的请求处理
//		resp.getWriter().write("this is my first ajax");
		//响应大量数据
//		创建用户对象
			User u = new User(1,"赵六","678","男","写代码");
			//重定向
			//请求转发
			//响应用户信息（响应对象给ajax引擎对象）
			//注意：响应js对象给ajax引擎，使用json数据格式
			System.out.println("AjaxAservlet.service()"+u);
		String str = new Gson().toJson(u);
		System.out.println("AjaxAservlet.service()"+str);
		resp.getWriter().write(str);
	}

}

道法—自然

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax的封装

jsp代码部分：<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()...
复制链接

扫一扫

专栏目录