关于ajax:Ajax编程框架基本实现

35次阅读

共计 1931 个字符,预计需要花费 5 分钟才能阅读完成。

咱们在理论编程中常常会以面向对象的形式进行实现。
新建 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>

正文完
 0