共计 1996 个字符，预计需要花费 5 分钟才能阅读完成。
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 01</h1>
<fieldset>
<legend>ajax 表单申请 </legend>
<form>
<input type="text" name="name" onblur="doCheck()" onfocus="doClear()">
<input type="button" onclick="doSave()" value="Save">
</form>
<span id="resultId"></span>
<!-- 心愿此地位服务端响应后果 -->
</fieldset>
<script type="text/javascript">
// 点击框分明残留数据
function doClear() {document.forms[0].name.value = "";// 框中数据清空
document.getElementById("resultId").innerHTML = "";// 上面提醒数据清空
}
// 封装共性；function doCheck() {
// 申请 url
var url = "doCheck";
// 定义申请参数
var name = document.forms[0].name.value;// 获取 name 的值
var params = "name=" + name;// 传参数给服务端
// 发送异步申请 get
doAjaxGet(url, params, function(result) {//rsult 轻易起的名字这个参数对应上面的 callback
document.getElementById("resultId").innerHTML = result;// 获取下面哪个 span 元素的参数
})
}
// 检测名字是否已存在
function doAjaxGet(url, params, callback) {let xhr = new XMLHttpRequest();
//2. 定义 HR 对象的监听
xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {callback(xhr.responseText);//
// 缓存数据
}
}
// 建设连贯
// 返回的是 doCheck 然而拼接了 name 这个值？xhr.open("GET", url + "?" + params, true);
// 发送申请
xhr.send(null);
}
// 点击事件 封装共性；function doSave() {// 另外申明了一个函数
// 这个是 url 的参数
var url = "doSave";// 把值传给了 url 的服务端
// 这个是 name 的参数
let name = document.forms[0].name.value;// 获取 name 的数值
var params = "name=" + name;
doAjaxPost(url, params, function(a) {document.getElementById("resultId").innerHTML = a;// 获取下面哪个 span 元素的参数
})
}
// 点击事件
function doAjaxPost(url, params, callback) {// 这里有 url 的值和 name 的数值和新定义的一个参数
//1/ 创立 XHR 对象
let xhr = new XMLHttpRequest();
//2. 定义 XHR 对象的监听
xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {callback(xhr.responseText);// 调用函数
// 缓存数据
document.getElementById("resultId").innerHTML = xhr.responseText;
}
}
//3. 建设连贯 (post 须要设置申请头信息)
xhr.open("POST", url, true)// 异步申请
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");// 这个是设置申请头
//4. 发送申请
let name = document.forms[0].name.value;// 获取 name 的值
// 构建参数对象三种形式
//var p="name="+name; 淘汰
//let p = `name=${name}`;// 模板字符串 //var p={"name":name};js 对象原生的 ajax 是不能这样用的
xhr.send(params);//post 的申请参数须要写到此地位
// 承受 name 的数值
}
</script>
</body>
</html>
正文完
