写一个简单的Ajax：一个输入框输入值判断，如果输入值 == "sakura" 后面显示名字不可用，否则显示可用
JSP页面
写一个form表单
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="js/jQuery.js"></script>
<script src="js/Ajax.js"></script>
</head>
<body>
<form action="">
<input type="text" id="fname" name="fname" onblur="nameOnblur()"> <span id="sp"></span><br>
</form>
</body>
</html>
JS
js里写Ajax
/*获取XmlHttpRequest*/
function getAjax() {
var xmlHttpRequest;
/*如果是chrome，火狐，safari，IE7以上等主流浏览器*/
try {
xmlHttpRequest = new XMLHttpRequest();
} catch (e) {
try {
/*是否是IE6*/
xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
/*IE5或者更早版本*/
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
/*抛出异常提示*/
alert("不存在XmlHttpRequest的浏览器");
throw e;
}
}
}
//将对象返回
return xmlHttpRequest;
}
/*发送请求给服务器*/
function nameOnblur() {
/*1 打开与服务器的连接*/
var jsRequest = getAjax();
/**
* open(method,url,async) method即提交方式，一般为GET和POST,url为提交的地址，async代表是否异步(true)还是同步(false)
*/
//此处的url为请求的地址
jsRequest.open("GET", "/test/index.jsp", true);
/*2 发送请求*/
//通知服务器发送的数据是请求参数
jsRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
jsRequest.send();
/*3 注册监听*/
jsRequest.onreadystatechange = function () {
//确认readyState和status
if (jsRequest.readyState == 4) {
if (jsRequest.status == 200) {
//得到响应参数,处理请求
//获取input的值
var name = document.getElementById("fname").value;
//获取span
var span = document.getElementById("sp");
//判断
if (name == "sakura") {
span.innerText = "名字不可用";
} else {
span.innerText = "名字可用";
}
}
}
}
}本文参考：https://www.cnblogs.com/youngchaolin/p/11574364.html#_label1_0