<!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>