<!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>
发表回复