## 什么是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>

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

##javascript中的innerHTML是什么意思，怎么个用法？

innerHTML在js中的功能：获取或插入对象内容。

eg1:

var obtain=document.getElementById("aa").innerHTML;//获取为aa的对象的内容

...

...

eg2:

document.getElementById("abc").innerHTML;//向id为abc的对象插入内容

巴特西

AJAX（表单验证）/JSON之一

##javascript中的innerHTML是什么意思，怎么个用法？

最新文章

热门文章