Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

cheng_14

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量136

点赞数

本文链接：https://blog.csdn.net/cheng_14/article/details/107219955

版权

AJAX

1. 简介

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax 是一种用于创建快速动态网页的技术，在无需重新加载整个网页的情况下，能够更新部分网页。

2. Ajax的基本使用

<input onblur="check()" />
<h1 id="msg"></h1>

		// 创建异步请求对象
		var xmlhttp = new XMLHttpRequest();
		// 设置请求类型、请求地址以及参数、是否异步
		xmlhttp.open("post","HelloServlet",true);
		// 设置请求头部信息
		xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
		// 发送请求
		xmlhttp.send("userName="+$("input").val());
		// 状态监听
		xmlhttp.onreadystatechange = function(){
			// 当状态为4 响应码为200的时则表示请求完成
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				// 获取返回请求结果
				 var result = xmlhttp.responseText;
				 // 根据请求结果进行处理
				 if(result == 1){
				  	$("#msg").text("恭喜你，可以使用此用户名");					 
				 }else{
				 	$("#msg").text("对不起，此用户名已被使用");					 
				 }
			}
		};

后台代码：

		// 获取用户提交的请求参数
		String name = request.getParameter("userName");
        PrintWriter pw = response.getWriter();
        // 当用户名是seven返回字符串0，否则返回字符串1
        if("seven".equals(name)){
            pw.write("0");
        }else{
            pw.write("1");
        }

3. JQuery中的Ajax使用

			// $.ajax 表示jquery中的ajax的调用方式
			$.ajax({
					 "url":"HelloServlet",  // 请求地址
					 "data":"userName="+$("input").val(),  //参数
					 "type":"POST",  // 请求类型
					 "success":function(data){    // 请求成功时的回调函数
						 if(data == 1){
							 $("#msg").text("恭喜你，可以使用此用户名");
						 }else{
							 $("#msg").text("对不起，此用户名已被使用");
						 }
						
					 },
					 "error":function(){  // 请求失败时的回调函数
						
					 } 
				});

后台代码同上。

如果与服务器交互的数据时json格式可使用如下方式：

			/*
				使用 HTTP GET 请求从服务器加载 JSON 编码的数据
				第1个参数为请求地址，第2个参数为请求参数，请3个参数为成功时的回到函数
			*/
			$.getJSON("HelloServlet",{userName:$("input").val()},function(data){
                // 如果返回的json字符串定义了result的键，可以直接通过键取出值进行判断操作
					if(data.result){
						 $("#msg").text("恭喜你，可以使用此用户名");
					 }else{ 
						 $("#msg").text("对不起，此用户名已被使用");
					 }
			});

后台代码：

		// 获取用户提交的请求参数
		String name = request.getParameter("userName");
		PrintWriter pw = response.getWriter();
		if("seven".equals(name)){
			pw.write("{\"result\":false}");
		}else{
			pw.write("{\"result\":true}");
		}

<%@ 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 type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
	<h1 id="msg"></h1>
	<form>
		<!-- 账号:<input id="userName" onblur="check()" ><br /><br />  -->
		账号：<input id="userName"><br /> <br />
		密码：<input type="password"><br /> <br />
		 <input type="submit">
	</form>

	<script type="text/javascript">
	
	//第三种方法
	/*
		使用 HTTP GET 请求从服务器加载 JSON 编码的数据
		第一个参数为请求地址，
		第二个参数为请求参数，
		第三个参数为成功时的回到函数
	*/
 	


	$(function(){
		
		$("#userName").on("blur",function(){
			
			$.getJSON("${pageContext.request.contextPath}/HelloServlet",
					{"m":"login1","userName":$("#userName").val()},
				function(data){
				// data  {\"result\":false}
				if(data.result){
					$("#msg").text("恭喜你，可以使用此用户名-")  ;
				}else{
					 $("#msg").text("对不起，此用户名已经被使用-")  ;
				}
			})
			
		});

	})
	
	
 
	
	
	
	
	
	
	
	
	
	
	//第二种方式
	
	/*$("#userName").on("blur",function(){
		
		$.ajax({
			"url":"${pageContext.request.contextPath}/HelloServlet",
			"data":"m=login&userName="+ $("#userName").val() ,
			"type":"post",
			"success":function(data){
				if(data==0){
					$("#msg").text("对不起，此用户名已经被使用-");
					
				}else{
					$("#msg").text("恭喜你，可以使用此用户名-");
				}
						
			},
			"error":function(){
				$("#msg").text("error");	
			}
			
		})
		
	})*/
	


	//第一种方式
/* 	function check() {
		var input = document.getElementById("userName");
	
		// 偷偷访问后台此用户名是否已经被注册过
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("post","${pageContext.request.contextPath}/HelloServlet",true);
		xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
		// 发送请求
		xmlhttp.send("m=login&userName="+input.value);
		
		xmlhttp.onreadystatechange = function(){
			// 当状态为4 响应码为200的时则表示请求完成
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				// 获取返回请求结果
				 var result = xmlhttp.responseText;
				 // 根据请求结果进行处理
				 var h = document.getElementById("msg") ;
				if(result == 0){
					h.innerText = "对不起，此用户名已经被使用";
				 }else{
					 h.innerText = "恭喜你，可以使用此用户名";
				 }
			}
		}
	}; */

	
	</script>
</body>
</html>

package com.blb.Demo;

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

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/HelloServlet")
public class HelloServlet extends BaseServlet {
	
	
	public void login(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String name = request.getParameter("userName");
        PrintWriter pw = response.getWriter();
        // 当用户名是seven返回字符串0，否则返回字符串1
        if("seven".equals(name)){
            pw.write("0");
        }else{
            pw.write("1");
        }
	}
	
	public void login1(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//获取用户提交的请求参数
		String name = request.getParameter("userName");
        PrintWriter pw = response.getWriter();
        if("seven".equals(name)){
            pw.write("{\"result\":true}");
        }else{
            pw.write("{\"result\":false}");
        }
		
		
	}
	
}

cheng_14

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax

AJAX1. 简介Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax 是一种用于创建快速动态网页的技术，在无需重新加载整个网页的情况下，能够更新部分网页。2. Ajax的基本使用<input onblur="check()" /><h1 id="msg"></h1> // 创建异步请求对象 var xmlhttp = new XML
复制链接

扫一扫