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(){
    document.getElementById("result").innerHTML="";
    } 
    //检测名字是否已经存在
    //Get方法的特性
    function doCheck(){
    var url="/doCheck";
    var name=document.forms[0].name.value;
    var params="name="+name;
    doAjaxGet(url.params,function(result){
        document.getEmlementById("result").innerHTML=result;
    })
    }
    //在业务方法中应用封装好的代码,保存业务的关键客户端代码分析及实现
    function doSave(){
    var url="/doSave";
    var params="name="+document.forms[0].name.value;
    //发送请求
    doAjaxGet(url,params,function(result){
        document.getElementById("result").innerHTML=result;
    })
    }  

    //封装共性,提取特性
    //提取get方法的共性进行封装：
    function doAjaxGet(url,params,callback){
    const xhr=new XMLHttpRequest();
    xhr.onreadstatechange=function(){
        if(xhr.onreadyState==4&&xhr.status==200){
            callback(xhr.responseText);
        }
    }
    xhr.open("GET",url+"?"+params,true);
    xhr.send(null);
    } 
    </script>
    </body>
    </html>

服务端代码实现：

package com.cy.ajaxcontroller;
import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

//这是一个服务端,用来处理客户端的请求
@Controller
@RequestMapping("/")
public class AjaxController {
    private List<String> names=new ArrayList<String>();
    //假如这是存储数据的表
    @RequestMapping("doSave")
    @ResponseBody 
    //将客户端请求的数据name写入到names对应的集合
    public String doSave(String name){
        System.out.println("name="+name); 
        names.add(name);  
        return name+"save ok"; 
    }

    @RequestMapping("doCheck")
    @ResponseBody 
    //通过此方法检验名字是否已经存在 
    public String doCheck(String name) {
        if(names.contains(name)) 
        return "名字："+name+"已经存在，请选择其他名字"; 
        return "名字："+name+"不存在，可以注册"; 
    }
}

Ajax技术进阶--提取共性，封装特性（Get）

汪睦琴

引用和评论

前端复习

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