乐趣区

关于ajax:Ajax技术进阶封装共性提取特性GetPost采用js文件引入共性

jiezi

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+"不存在，能够注册"; 
    }
}

浏览器成果:

退出移动版