Ajax技术进阶--Ajax关键代码的封装(Get请求)

<!-- 客户端代码实现 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- html关键表单元素设计    -->
<h1>The Ajax 03 Page</h1>
<!-- 该标签的作用是把表单中的相关控件集中起来，形成一个控件组    -->
<fieldset>
<!--该标签用于定义fieldset标签控件组下的标题      -->
<legend>Ajax 表单请求</legend>
<form>
    <input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">
    <input type="button" onclick="doSave()"    value="save">
</form>
<span id="result"></span>
</fieldset>

<!--添加JS关键业务代码    -->
<!-- script标签用于定义客户端脚本  script元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。-->
<script type="text/javascript">
//检测名字是否已经存在
function doClear(){
//表示能向id为result的对象插入“”内容
document.getElementById("result").innerHTML="";
} 

//Get方法的特性
function doCheck(){
//1.定义请求的url
const url="doCheck";
//2.定义请求参数
let name=document.forms[0].name.value;
let params=`name=${name}`;
//3.发送ajax-get请求
doAjaxGet(url,params,function(result1){
    document.getElementById("result").innerHTML=`${result1}`;
});
}

//封装共性,提取特性
//Get方法的共性如下：
function doAjaxGet(url,params,callback){
//1.基于dom事件创建XHR对象
const xhr=new XMLHttpRequest();
//2.设置XHR对象监听状态
xhr.onreadystatechange=function(){//onreadystatechange存储函数，每当readyState属性改变时，就会调用该函数
    if(xhr.readyState==4&&xhr.status==200){
    callback(xhr.responseText);
    }
}
//3.创建与服务端的连接
xhr.open("GET",`${url}?${params}`,true);
//4.发送异步请求实现与服务端的通讯
xhr.send(null);//get请求send方法传值
} 
</script>
</body>
</html>

Ajax技术进阶--Ajax关键代码的封装(Get请求)

汪睦琴

引用和评论

前端复习

flutter3-trip-hotel：2025实战Flutter3.27仿携程旅行App酒店预订系统模板