JSP用JS实现Ajax(笔记)

本文介绍了Ajax的核心概念,展示了如何使用XMLHttpRequest进行异步请求,并通过一个实际示例(Java Servlet)演示了如何在页面注册功能中应用Ajax。重点讲解了POST请求设置及响应处理。
摘要由CSDN通过智能技术生成

一、Ajax(Asynchronous JavaScript and XML)

Ajax核心为异步刷新。JSP中通常为重定向或者请求转发的方式全局刷新。异步刷新使得只需要修改的部分被刷新。将JS与XML进行了组合。

本文以用JS实现。如果以Jquery实现会更简单。

Jquery为JS的进一步封装。

axios为Ajax的进一步封装。

二、XMLHttpRequest对象

方法部分

a. open(方法名称(get/post),服务器地址,true):与服务器建立连接

b. send():

              使用get:send(null)

              使用post:send(参数值)

c. setRequestHeader(header,value):

        get:不需要设置此方法。

        post:需要设置。

                                若请求元素包含了文件上传:

                                        setRequestHeader("Content-Type","multipart/form-data");

                                 若请求元素不包含文件上传:

                                        setRequestHeader("Content-Type","application/x-www-form-urlencoded")

属性部分

d. readyState:请求状态 

状态值简介
0XMLHttpRequest对象未被初始化
1XMLHttpRequest对象已开始发送请求,已执行了open()方法及相关准备
2XMLHttpRequest对象已将请求发送完毕,已经执行了send()方法,但并未收到响应
3XMLHttpRequest对象已开始读取响应信息,已收到HTTP响应的头部信息,但是还没有将响应体接收完毕
4XMLHttpRequest对象已将响应信息全部读取完毕

e. status:响应状态

状态码含义
200服务器正常响应
400无法找到请求资源
403无访问权限
404访问资源不存在
500服务器内部错误

f. onreadystatechange:通过该方法设置回调函数

g. responseText:相应格式为String

h. responseXML: 相应格式为XML

三、实现

servlet部分

package webtest;

import java.io.IOException;
import java.io.PrintWriter;

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 MobileServlet
 */
@WebServlet("/MobileServlet")
public class MobileServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public MobileServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		String mobile = request.getParameter("mobile");
		PrintWriter out = response.getWriter();
		//判断该手机号是否存在
		if("18181818181".equals(mobile)) {
			out.write("true");
		}
		else{
			out.write("false");
		}
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

页面部分

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script tpype="text/javascript">
	function register(){
		var mobile = document.getElementById("mobile").value;
		xmlHttpRequest = new XMLHttpRequest();//全局变量
		//设置xmlHttpRequest对象的回调函数
		xmlHttpRequest.onreadystatechange = callBack;
		//通过ajax异步方式请求服务器		
		xmlHttpRequest.open("post","MobileServlet",true);
		//xmlHttpRequest.open("get","MobileServlet?mobile="+mobile,true);//get方式
		//同时send(null)
		//设置post方式的头信息		
		xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlHttpRequest.send("mobile="+mobile);//key=value
		//xmlHttpRequest.send();
	}
	//定义回调函数(接收服务端的返回值)
	function callBack(){
		if(xmlHttpRequest.readyState == 4 &&xmlHttpRequest.status == 200){
			//接收服务端返回数据
			var data = xmlHttpRequest.responseText;//字符串格式接收
			if(data=="true"){
				alert("号码存在!");
			}
			else{
				alert("成功注册");
			}
		}
	}
</script>
</head>
<body>
手机:<input id="mobile"/>
<br/>
<input type="button" value="注册" onclick="register()"/>
</body>
</html>
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值