咱们在理论编程中常常会以面向对象的形式进行实现。
新建static–>js–>ajaxfk.js,在该js文件中增加如下代码：
(()=>{
//1.定义一个构造函数
var ajax=function(){}//函数表达式（能够将其了解为构造函数）
//2.在构造函数外部的原型对象（Prorotype）上增加ajax函数
ajax.prototype={
doAjaxGet:function(url,params,callback){
//1.创立xhr对象
const xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//服务端响应完结，客户端接管胜利
if(xhr.status==200){//200示意失常响应完结
callback(xhr.responseText);//回调函数
}else{//示意呈现了异样
callback(xhr.status);
}
}
}
//3.建设连贯
xhr.open("GET",`${url}?${params}`,true);
//4.发送申请
xhr.send(null);
},
doAjaxPost:function(url,params,callback){
//1.创立xhr对象
const xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//服务端响应完结，客户端接管胜利
if(xhr.status==200){//200示意失常响应完结
callback(xhr.responseText);//回调函数
}else{//示意呈现了异样
callback(xhr.status);
}
}
}
//3.建设连贯
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-Type","application/x-www.urlencoded");
//4.发送申请
xhr.send(params);
}
}
//3.基于ajax构造函数构建ajax对象，并将对象赋值给全局变量
window.$$=new ajax();
})()//箭头函数批改html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 04 Page</h1>
<fieldset>
<legend>Ajax 表单申请</legend>
<form>
<input type="text" id="nameId" name="name" onblur="doCheck()">
<input type="button" onclick="doSave()" value="Save">
</form>
<span id="resultId"></span><!-- 此地位显示服务端响应后果 -->
</fieldset>
<script type="text/javascript" src="/js/ajaxfk.js"></script>
<script type="text/javascript">
//检测名字是否已存在
function doCheck(){
//1.定义申请的url
var url="http://localhost/doCheck";
//2.定义申请参数
var name=document.forms[0].name.value;
var params=`name=${name}`;
//3.发送ajax get申请
$$.doAjaxGet(url,params,(result)=>{
document.getElementById("resultId").innerHTML=
`<font color=red>${result}</font>`;
});
}
//保留表单中名字的值
function doSave(){//debugger,log,排除法
//1.申请url
const url="http://localhost/doSave";
//2.申请参数
let name=document.forms[0].name.value;
let params=`name=${name}`;
//3.发送ajax post申请
$$.doAjaxPost(url,params,(result)=>{
alert(result);
})
}
</script>
</body>
</html>
发表回复