AJAX（表单验证）/JSON之一

Posted 2021-01-01 贰零一八

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX（表单验证）/JSON之一相关的知识，希望对你有一定的参考价值。

## 什么是Ajax

AJAX = Asynchronous javascript and XML（异步的 JavaScript 和 XML）。

1. 异步通信：浏览器利用独立的线程与服务器进行通信，交换少量信息。

2. 局部刷新：不更新全部页面，只对页面的局部进行更新。

## Ajax的优点

相对表单提交，全部页面更新来说：

1. 异步通信流量少，网络延迟少，用户体验好。

2. 局部刷新，只更新局部信息，避免了全部页面刷新，提升了用户体验。

## 如何进行异步通信

说明：浏览器中提供了异步通信组件XMLHttpRequest，调用其API即可实现异步通信

XMLHttpRequest 经常简称为 XHR 或 Ajax 对象

1.创建XHR对象：

var xhr = new XMLHttpRequest();

2.设置 xhr 对象的通信参数：

xhr.open("get","http://doc.tedu.cn/index.html", true);

> 默认情况下：AJAX 只能与当前页面的原网站进行通信（不能跨域名通信！）

3.发起通信：

xhr.send(); //发起get请求，不发送body

xhr.send(body);//发起post请求，携带body参数

4.获取通信结果：

var body = xhr.responseText;//响应body中的内容

--------------------------------------------------------------------------------------------------

监听通信状态事件：

xhr.onreadystatechange=function (){

//readyState==4 表示请求处理完成以后

//status==200 表示返回结果是正常的

if(xhr.readyState==4 && xhr.status==200){

var data = xhr.responseText;

console.log(data);

}

检查通信状态属性：

xhr.readyState

xhr.status

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/**
 * 异步通信
 */
function demo01(){
    var xhr = new XMLHttpRequest();
    //监听 xhr对象的状态改变事件
    //在通信组件状态改变时候，会自动回调 事件函数
    xhr.onreadystatechange=function (){
        //readyState==4 表示请求处理完成以后
        //status==200 表示返回结果是正常的
        if(xhr.readyState==4 && xhr.status==200){
            var data = xhr.responseText;
            console.log(data);
        }
    }
    xhr.open("get", "index.html", true);
    xhr.send();
    //xhr通信是异步的，由send()发起的子线程进行通信，
    //在通信没有结束之前，responseText的内容一直是空的！
    var body = xhr.responseText;
    console.log(body);//输出是 空的！！！
}

/**
 * 局部更新
 */
function demo02(){
    var p = document.getElementById("msg");
    p.innerHTML="这就是更新了！"; 
}
 
/**
 * 异步通信+局部更新
 */
function demo03(){
    var xhr = new XMLHttpRequest();
    //注册通信成功事件, 在通信成功以后执行
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status==200){
            var msg = xhr.responseText;
            //局部刷新
            var p = document
                .getElementById("message");
            p.innerHTML=msg;
        }
    };
    xhr.open("get", "msg.txt", true);
    xhr.send();
}
</script>
</head>
<body>
    <h1>Ajax 演示</h1>
    <input type="button" value="demo01" 
        onclick="demo01()">
    <p id="msg">局部更新</p>
    <input type="button" value="demo02"
        onclick="demo02()">
        
    <h1>异步通信+局部更新</h1>
    <p id="message">显示信息</p>
    <input type="button" value="demo03"
        onclick="demo03()">
</body>
</html>

---------------------------------------------------------------------------------------------------------------------

## 利用 AJAX 解决用户名存在检查

配置Spring MVC

1. 复制了 pom.xml 中的组件坐标

2. 复制 web.xml 中的前端控制器配置，等。

3. 复制Spring的配置文件

## 利用JSON简化服务器端编程

JSON： Java Script 的对象直接量书写规则（一种数据交换格式）

eg:

var obj = {}; //空对象

var user = {"name":"Tom", "age":10}; //包含属性的对象

var arr = [1,2,3,4];

var users = [{"name":"Jerry","age":10},{"name":"Tom","age":3}];

为了解决服务器向客户端传输多个对象数据，可以将多个数据对象封装为 JSON 规则字符串，将JSON字符串传输到客户端。

JSON 字符串可以通过JS API 简单的转换为 JS 对象。

package cn.tedu.ssm.controller;

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

@Controller
public class TestController {
    
    //produces 可以在SpringMVC的控制器中设置响应的
    //ContentType, 也包含服务端的编码
    @RequestMapping(value="/checkUserName.do",
            produces="text/plain;charset=utf-8")
    //ResponseBody 注解是自动化注解，会自动解析控制器
    //方法的返回值，并且将返回值填充到 响应消息的body中
    //1. 如果控制器返回值是字符串，就直接将字符串放到body
    @ResponseBody 
    public String checkUserName(String name){
        //模拟逻辑
        if("Tom".equals(name)){
            return "已经注册";
        }else{
            return "可以注册";
        }
    }
    
    /*
     * 在控制器方法中返回 Java Bean 对象，与@ResponseBody
     * 注解配合时候，ResponseBody注解会自动调用Jackson
     * API 将 Java Bean 转换为 JSON 字符串，放到响应Body
     * 中，发送到浏览器。并且会自动设置 ContentType 头
     * 以及 ContentType 中的编码 
     */
    @RequestMapping("/check.do")
    @ResponseBody
    public Message check(String name){
        if("Jerry".equals(name)){
            return new Message(0, "已经使用");
        }else{
            return new Message(1, "可以注册");
        }
    }
    
    
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
    <h1>注册表单</h1>
    <form action="regist.do" method="post"
         >
        <h2>注册</h2>
        <div>
            <label>用户：</label>
            <input id="name" type="text" name="name">
            <span id="name-msg"></span>            
        </div>
        <div>
            <label>密码：</label>
            <input id="pwd" type="password" name="pwd">
        </div>
        <div>
            <label>电话：</label>
            <input id="mobile" type="text" name="mobile">
        </div>
        <div>
            <input type="submit" value="保存"> 
        </div>
    </form>
<script type="text/javascript">
var nameField = document.getElementById("name");
//为 nameField 添加失去焦点事件
nameField.onblur=function(){
    //console.log("失去焦点！");
    //获取用户名
    var name = document.getElementById("name").value;
    //发起异步通信将用户名传递到服务器
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        //通信完成以后，利用局部更新显示结果 
        if(xhr.readyState==4 && xhr.status==200){
            var msg=xhr.responseText;
            document.getElementById("name-msg")
                .innerHTML=msg;
        }
    };
    //xhr.open("post", "checkUserName.do", true);
    //xhr.setRequestHeader("Content-Type", 
    //        "application/x-www-form-urlencoded");
    //xhr.send("name="+name);
    xhr.open("get", "checkUserName.do?name="+name, true);
    xhr.send();
};


</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
    <h1>注册表单</h1>
    <form action="regist.do" method="post"
         >
        <h2>注册</h2>
        <div>
            <label>用户：</label>
            <input id="name" type="text" name="name">
            <span id="name-msg"></span>            
        </div>
        <div>
            <label>密码：</label>
            <input id="pwd" type="password" name="pwd">
        </div>
        <div>
            <label>电话：</label>
            <input id="mobile" type="text" name="mobile">
        </div>
        <div>
            <input type="submit" value="保存"> 
        </div>
    </form>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
    $(‘#name‘).blur(function(){
        var n = $(‘#name‘).val();
        //异步请求: Jquery 封装了XHR，使用更加简便
        $.ajax({
            url:‘check.do‘,   //请求目标地址
            data: {‘name‘:n}, //向服务器发送的数据
            type: ‘post‘,     //请求方式
            dateType: ‘json‘, //服务器返回数据类型
            success: function(obj){ //请求成功后执行的方法
                //obj 代表服务器返回的数据，
                //返回数据已经解析为js对象
                //局部更新网页中的数据
                $(‘#name-msg‘).text(obj.message);
            }
        });
    });
});
</script>
</body>
</html>