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

汪睦琴

1.在static目录下新建一个js目录,在js目录中添加一个名为ajax.js的文件。
image.png
将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+"不存在,可以注册"; 
    }
}

浏览器效果:
image.png

阅读 514
4 声望
0 粉丝
0 条评论
4 声望
0 粉丝
文章目录
宣传栏