Ajax基本业务实现（GET请求）

实现效果：

客户端代码实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- html关键表单元素设计    -->
    <h1>The Ajax Page</h1>
    <!-- 该标签的作用是把表单中的相关控件集中起来，形成一个控件组    -->
    <fieldset>
    <!--该标签用于定义fieldset标签控件组下的标题      -->
    <legend>Ajax 表单请求</legend>
    <!-- form标签用于创建供用户输入的html表单，该标签可以包含一个或多个表单元素button    input    keygen    object    output    select    textarea -->
        <form>
        <input type="text" name="name" id="nameId"> 
        <input type="button" onclick="doSave()" value="save">
        </form>
        <span id="result"></span>
    </fieldset>

    <!--添加JS关键业务代码    -->
    <!-- script标签用于定义客户端脚本  script元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。-->
    <script type="text/javascript">
    
   function doCheck(){
    //在此函数中向服务端发起异步请求，检测name是否存在
    //1.基于dom事件创建XHR对象
    var xhr=new XMLHttpRequest();
    //2.设置XHR对象监听状态
    xhr.onreadystatechange=function(){
    //onreadystatechange存储函数，每当readyState属性改变时，就会调用该函数
/*xhr.readyState == 状态 (0,1,2,3,4)
0：请求未初始化，还没有调用 open()。
1：请求已经建立，但是还没有发送，还没有调用 send()。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
4：响应已完成；您可以获取并使用服务器的响应了。*/
if(xhr.readyState==4&&xhr.status==200){//请求完成并成功返回
document.getElementById("result").innerHTML=xhr.responseText;//获取响应数据
        }
    };
    //3.创建与服务端的连接
    var name=document.forms[0],name.value;
    //console.log("name:",name);
    xhr.open("GET","/doCheck",true);
    //4.发送异步请求实现与服务端的通讯
    xhr.send(null);//get请求send方法传值
} 
    </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请求）

汪睦琴

引用和评论

前端复习

第6章：Vue中的ajax（包含：回顾发送ajax请求方式、vue-cli脚手架配置代理服务器）

回顾前端页面发送ajax请求方式