Ajax 五种方式实现异步刷新

最新推荐文章于 2024-07-28 22:39:32 发布

人不渡人^

最新推荐文章于 2024-07-28 22:39:32 发布

阅读量7.7k

点赞数 6

分类专栏： Ajax 文章标签： Ajax

本文链接：https://blog.csdn.net/iBlog_worker/article/details/82155924

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先创建一个Servlet来充当服务器

package com.xbj.demo;
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;

@WebServlet("/moblie_text")
public class moblie_text extends HttpServlet {
	private static final long serialVersionUID = 1L;
	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");
		System.out.println(mobile);
		PrintWriter writer = response.getWriter();
		if ("123456789".equals(mobile)) {
			//System.out.println("true");
			writer.write("true");
			//writer.write("此号码已经存在");
			
		}else {
			//writer.write("注册成功");
			writer.write("false");
			//System.out.println("false");
		}
	
	writer.close();
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

第一种：用js实现

<%@ 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>Insert title here</title>
<script>
 function regist(){
	var mobile=document.getElementById("mobile").value;
	//alert(mobile)
	xmlHttpRequest=new XMLHttpRequest();
	xmlHttpRequest.open("post","moblie_text",true);
//如果用post请求方式根据有没有上传内容可分为两种
//第一种没有上传内容
	xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//第二种有上传内容
//xmlHttpRequest.setRequestHeader("Content-Type","multipart/form-data");
//如果请求方式为get则可以
//  xmlHttpRequest.send(null);
//想要用GET传递数据则用
// xmlHttpRequest.open("post","moblie_text?mobile="+mobile,true);即可
	xmlHttpRequest.send("mobile="+mobile);
	xmlHttpRequest.onreadystatechange=callBack;
	
 }
//创建一个回调函数用来接受从服务器传递回来的两种状态码
 function callBack(){

	 if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
		//服务器响应有两种类型  一种为responseText（String 类型）一种是responseXml类型
		 var data=xmlHttpRequest.responseText;
		 alert(data)
		
	 }
	 
 }


</script>
</head>
<body>
手机号：<input type="text" id="moblie">
<input type="button" value="注册" onclick="regist()">

</body>

第二种也是最常用的一种用JQuery实现

<%@ 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>Insert title here</title>
//不要忘记导jquery
<script src="js/jquery-1.8.3.min.js"></script>
<script>
 function regist(){
	 var $mobile = $("#mobile").val();
	 $.ajax({
		 //目标路径
		 url:"moblie_text" ,
		 //请求方式
		 type:"post" ,
		 //传递的值
		 data:"mobile="+$mobile ,
		 success:function(result,testStatus){
			 if(result=="true"){
				 alert("用户已经存在");
			 }else{
				 alert("注册成功！");
			 }	 
		 },
		 error:function(xhr,errorMessage,e){
			 alert("系统有误");
		 } 
	 });
 }
</script>
</head>
<body>
手机号：<input type="text" id="mobile">
<input type="button" value="注册" onclick="regist()">
</body>
</html>

第三种方式：用get 实现

<%@ 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>Insert title here</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
 function regist(){
	 var $mobile = $("#mobile").val();
	// alert($mobile)
	 $.get(
			 //目标路径
			 "moblie_text",
			 //数据
	        "mobile="+$mobile,
	        function(result){
				// alert(123)
				 if(result=="true"){
					 alert("用户已经存在");
				 }else{
					 alert("注册成功！");
				 }
			 }
	 );
 }
</script>
</head>
<body>
手机号：<input type="text" id="mobile">
<input type="button" value="注册" onclick="regist()">
</body>
</html>

第四种方式用post 和get 雷同名字换一下即可

第五种方式用load 方式实现

<%@ 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>Insert title here</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
 function regist(){
	 var $mobile = $("#mobile").val();
//直接把从服务器端相应回来的数据直接写入到一个选择器中
//不需要接收返回值 以及状态码
	$("#tip").load(
//目标路径
			"moblie_text",
//传递的参数
			"mobile="+$mobile
			);
 }
</script>
</head>
<body>
手机号：<input type="text" id="mobile"><span id="tip"></span><br />
<input type="button" value="注册" onclick="regist()">
</body>
</html>