<%@ 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">
var xmlHttpRequest=null;
//创建Ajax引擎
function getXmlHttpRequest() {
if (window.ActiveXObject) {
//ie
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
//firefox
xmlHttpRequest = new XMLHttpRequest();
}
}
//检查用户名是否重复
function checkUserName() {
//创建ajax引擎
getXmlHttpRequest();
//如果ajax引擎创建成功
if (xmlHttpRequest) {
//第一个参数表示请求的方式get/post
//第二个参数指定url
//第三个参数true表示使用异步机制
//如果使用get方法请求，第一次进行请求，第二次从缓存里面取
// var url = "/Ajax/CheckUserName?username="+$("username").value;
var url = "/Ajax/CheckUserName";
//post提交数据
var data="username="+$("username").value;
//xmlHttpRequest.open("get", url, true);
xmlHttpRequest.open("post", url, true);
xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//回调函数
xmlHttpRequest.onreadystatechange =chuli;
//发送请求,如果是get，写null， 可以传参数
//xmlHttpRequest.send(null);
xmlHttpRequest.send(data);
}
}
//回调函数
function chuli() {
if (xmlHttpRequest.readyState == 4) {
$("res").innerHTML=xmlHttpRequest.responseText;
}
}
//$方法
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
用户名:(输入aaa重复)
<input type="text" id="username" οnkeyup="checkUserName();" />
<span id="res" style="color: red;"></span>
</body>
</html>
import java.io.IOException;
import java.io.PrintWriter;
import java.io.Writer;
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 CheckUserName
*/
@WebServlet("/CheckUserName")
public class CheckUserName extends HttpServlet {
private static final long serialVersionUID = 1L;
public CheckUserName() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html; charset=utf-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out=response.getWriter();
String username=request.getParameter("username");
if(username.equals("aaa")){
out.print("GET:用户名重复");
}else{
out.print("GET:用户名可以使用");
}
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html; charset=utf-8");
resp.setHeader("Cache-Control", "no-cache");
PrintWriter out=resp.getWriter();
String username=req.getParameter("username");
if(username.equals("aaa")){
out.print("POST:用户名重复");
}else{
out.print("POST:用户名可以使用");
}
out.close();
}
}
个人技术集锦还为您提供以下相关内容希望对您有帮助：
Ajax中用到get和post会遇到哪些问题以及处理方法
使用get遇到的问题：1.问题一. 缓存：当每次访问的url相同，客户端直接读取本地缓存里面的内容，即使后台数据变化前台也不会有变化；解决方法：在？后面链接一个num=【随机数Math.random()】或者num=【时间戳new Date().getTime()】，'1.php?username="May"&'+num（这里没有变量名，避免和后台参...
ajax中的请求方式(GET、POST、PUT、DELETE、HEAD)
在Ajax中，HTTP方法用于描述客户端向服务器发送请求的方式。这些方法从本质上来说并无差别，都能用于数据交互。在不同场景下，开发者会根据需求选择使用GET、POST、PUT、DELETE、HEAD等方法。GET方法通常用于从服务器获取数据，适用于数据量小、请求频繁的场景。数据通过URL的问号后传递，如/url?参数1=值...
ajax中post与get方法如何使用以及区别
这个技术的应用就意味着可以在不重新加载整个网页的情况下，对网页的某个部分进行更新。【ajax教程】ajax中有两个重要的概念是get与post的知识，今天将和大家介绍这两个知识点的使用方法以及它俩之间的区别GET()请求get() 方法通过远程http get 请求载入信息，请求成功时可调用回调函数参数传递都是通过 U...
注册时 验证数据库里面是否已经有同名信息
view_name.innerHTML = '该用户可以使用！';} else if (req.responseText == 1) { view_name.style.color= 'red';view_name.innerHTML = '该用户名已经被使用！';} } } req.open("POST", "member/ajax!check.do?username="+username);req.setRequestHeader('Content-Type', 'application...
AJAX里的GET和POST请求的区别,以及和HTTP里面GET、POST的区别
1、 get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。2、 对于get方式，服务器端用Request.QueryString获取变量的值...
Ajax中POST和GET的区别
1 对于get请求（或凡涉及到url传递参数的），被传递的参数都要先经encodeURIComponent方法处理.例：var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent(content)+"&id=1" ;使用Post方式需注意：1.设置header的Context-Type为application/x-www-form-...
jquery ajax 的$post跟$get方法有什么区别
2:一.谈Ajax的Get和Post的区别 Get方式:用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，它会被客户端的浏览器缓存起来，那么，别人就可以从...
ajax请求中post和get请求的区别
区别和其他语言中的用法区别是一样的，和ajax没关系,就不在此赘述了。以下是个人观点：都是向服务器发送请求，区别在用的情景不同：GET - 从指定的资源请求数据。POST - 向指定的资源提交要被处理的数据 2.其他的区别，不是重点，可以了解 GET 请求的其他一些注释：GET 请求可被缓存GET 请求保留在...
ajax请求post和get的区别以及get post的选择
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST 没有数据量限制）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠 ...
ajax_get,post请求,请求超时,请求取消
取消请求的实现通常依赖于AJAX库提供的取消请求接口。总结而言，GET和POST请求是处理HTTP数据请求的两种重要方式。了解它们的特点和使用场景有助于我们根据实际需求选择合适的请求方法。同时，合理设置超时时间、实现请求取消功能，可以提高请求的可靠性和用户体验。