Ajax技术进阶--封装共性，提取特性（Get,Post）,采用js文件引入共性

1.在static目录下新建一个js目录，在js目录中添加一个名为ajax.js的文件。

将get方法和post方法的ajax共性提取到ajax.js文件，具体代码如下：

//封装共性,提取特性
//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方法传值
} 
//Post方法的共性如下：
function doAjaxPost(url,params,callback){
    const xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            callback(xhr.responseText);
            }
    }
    xhr.open("POST",url,true);
    //使用post请求要设置请求头（规定）
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //4.发送异步请求实现与服务端的通讯
    xhr.send(params);//Post请求send方法传值
}

2.在html中引入改js文件,通过添加<script></script>标签引入js文件,具体代码如下：

<script type="text/javascript" src="/js/ajax.js"></script>

客户端代码：

<!-- 客户端代码实现 -->
<!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" src="/js/ajax.js"></script>
<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}`;
    });
}
//保存表单中名字的值
function doSave(){
    //1.定义请求的url
    const url="/doSave";
    //2.定义请求参数
    let name=document.forms[0].name.value;
    let params=`name=${name}`;
    //3.发送ajax-get请求
    doAjaxPost(url,params,function(result1){
        alert(result1);//响应结果不同的处理方式
    });
}  
</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,Post）,采用js文件引入共性

汪睦琴

引用和评论

前端复习

手写一个动态海洋和天空效果的vue hooks

你可能不知道的图片加载相关知识

原生JS大揭秘—JS代码执行原理解刨

原生electron起步-从零到一完成构建和打包

LRU算法，你别跑，我就要吃透你

亚像素渲染：浏览器如何处理小数像素的渲染？