javaee之AJAX练习

最新推荐文章于 2024-09-01 19:13:21 发布

只有自己努力才是真

最新推荐文章于 2024-09-01 19:13:21 发布

阅读量828

点赞数

分类专栏： javaee 文章标签： java ee

本文链接：https://blog.csdn.net/css1223mjf/article/details/52480994

版权

javaee 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

Ajax：
ajax，不是一个新的技术，是用于实现网页的异步请求和局部刷新，减轻服务器的压力，提高用户的体验

在一个网页上，可能需要实现这样一个功能效果，当某个地方的数据不正确的时候只是局部刷新该地方的数据，其他的地方
的功能数据不改变，这就是异步请求的效果

实现ajax需要的步骤：
①创建一个ajax对象，不是现代浏览器的AJAX对象需要创建的是ActiveXObject类；而现代浏览器创建的是XMLHttpRequest对象
②打开连接；请求的方式和请求的路径，open(method,url)
③发送请求正文：send()；如果请求的方式是GET，则参数为null，参数为POST，参数为所需要带的数据的键值对，同时还需要
设置请求头setRequestHeader("content-type","application/x-www-form/data")
④监听服务器响应的数据：onreadystatechange(readyState == 4 && status == 200)

使用get的方式来实现ajax的异步

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'user.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">
		window.onload = function(){
			document.getElementById("username").onblur = function(){
				//使用get的方式进行ajax
				//1、创建一个ajax对象
				var ajax;
				try{
					ajax = new XMLHttpRequest();
				}catch(e){
					ajax = new ActiveXObject();
				};
				//2、调用回调函数
				ajax.onreadystatechange = function(){
					if(ajax.readyState==4 && ajax.status==200){
						var result = ajax.responseText;
						if(result=="1"){
							document.getElementById("span1").innerHTML = "该名字已被注册";
						}else{
							document.getElementById("span1").innerHTML = "该名字可以注册";
						}
					}
				};
				//3、调用open方法
				var url = "<c:url value='/CheckName' />";
				ajax.open("GET",url+"?name="+this.value );
				//4、调用send方法
				ajax.send(null);
			};
		};
	</script>


  </head>
  
  <body>
    用户名：<input type="text" name="username" id="username" /><span id="span1"></span><br />
    密码：<input type="password" name="password" />
  </body>
</html>

使用post的方式来使用ajax的异步

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'user.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">
		window.onload = function(){
			document.getElementById("username").onblur = function(){
				//使用post的方式进行ajax
				//1、创建一个ajax对象
				var ajax;
				try{
					ajax = new XMLHttpRequest();
				}catch(e){
					ajax = new ActiveXObject();
				};
				//2、调用回调函数
				ajax.onreadystatechange = function(){
					if(ajax.readyState==4 && ajax.status==200){
						var result = ajax.responseText;
						if(result=="1"){
							document.getElementById("span1").innerHTML = "该名字已被注册";
						}else{
							document.getElementById("span1").innerHTML = "该名字可以注册";
						}
					}
				};
				//3、调用open方法
				var url = "<c:url value='/CheckName' />";
				ajax.open("POST",url);
				//还要设置一个请求头
				ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
				//4、调用send方法
				ajax.send("name="+this.value);
			};
		};
	</script>


  </head>
  
  <body>
    用户名：<input type="text" name="name" id="username" /><span id="span1"></span><br />
    密码：<input type="password" name="password" />
  </body>
</html>

readyState:
在服务器接收请求的状态中：
ajax.readyState==0：表示Ajax异步对象已经创建好，但是还没有调用open()方法
ajax.readyState==1: 表示Ajax异步对象已经调用open()方法，但是还没有调用send()方法
ajax.readyState==2:表示Ajax异步对象已经调用send（）方法，但是请求还没有到达服务器
ajax.readyState==3：表示服务端已经接收到Ajax异步对象的请求，正在处理响应中
ajax.readyState==4:表示Ajax异步对象已经完全接收到了响应信息