## 什么是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的对象的内容

...

<div id="aa"></div>

...

eg2:

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

AJAX(表单验证)/JSON之一的更多相关文章

  1. jquery php ajax 表单验证

    本实例用到 JQuery 类库本身的函数和功能,所有表单信息利用 PHPMailer 类库邮件的形式发送.   .创建一个表单 html 页面   表单部分 html 代码   以下为引用内容: &l ...

  2. Ajax 表单验证 实现代码

    兼容: opera 9.6 + chrome 2.0 + FF 3 + IE 6 效果:一边输入一边实现验证 image 环境:ruby 1.8.6 + rails 2.1.0 + windows 核 ...

  3. validate+jquery+ajax表单验证

    1.案例 1.1 Html form表单内容 <form class="cForm" id="cForm" method="post" ...

  4. ajax+表单验证+验证码生成例子

    MainController.class.php <?php namespace AjaxYz\Controller; use Think\Controller; class MainContr ...

  5. jQuery Validatede 结合Ajax 表单验证提交

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 转:MVC遇上bootstrap后的ajax表单验证

    使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了,而且有模型在使用模型验证更方便点.怎么解决呢? 当 ...

  7. boostrap ajax表单验证提交

    =============================================================================== 1. 1 <link href=& ...

  8. MVC遇上bootstrap后的ajax表单模型验证

    MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...

  9. JQuery表单验证插件EasyValidator,超级简单易用!

    本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以 ...

  10. JQuery表单验证插件EasyValidator

    本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以 ...

随机推荐

  1. element后太侧边

    $router 是已经在ruterJs里面定义好的路由 以及组件 然后取值赋予进去就是了.但是真正的写法应该是 这样,, 执行点击事件的时候直接让跟换路由., 让后面 router-view 里面路由 ...

  2. 二叉树df

    二叉树 最有搜索算法 打印偶节点 不要用递归

  3. SDN概述:简介、工具、环境部署

    一.前言: 本文初步接触 SDN 的相关概念.需要依次完成下面几项任务: SDN 简介 SDN 工具 SDN 环境部署 推荐阅读 推荐阅读下述内容: Ethane 项目,openflow 的基础 op ...

  4. Xception网络结构理解

    Xception网络是由inception结构加上depthwise separable convlution,再加上残差网络结构改进而来/ 常规卷积是直接通过一个卷积核把空间信息和通道信息直接提取出 ...

  5. ecshop 前台个人中心修改侧边栏 和 侧边栏显示不全 或 导航现实不全

    怎么给个人中心侧边栏加项或者减项 在模板文件default/user_menu.lbi 文件里添加或者修改,一般看到页面都会知道怎么加,怎么删,这里就不啰嗦了 添加一个栏目以后,这个地址跳的页面怎么写 ...

  6. (4)Python3笔记 之 流程控制

    一.条件控制 # 语法规则 if 变量(或表达式): 语句块1 elif 变量(或表达式): 语句块2 else: 语句块3 #示例 score = 83 if score > 90: prin ...

  7. DataGridView控件用法一:数据绑定

    使用DataGridView控件,可以显示和编辑来自多种不同类型的数据源的表格数据. 将数据绑定到DataGridView控件非常简单和直观,在大多数情况下,只需设置DataSource属性即可.在绑 ...

  8. C# 对数据库操作的帮助类SQLHelper.cs

    using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...

  9. idea创建java的web项目

    2. 3. 4. 5. 6. 步骤八: 点击那个倒立的三角形,然后点击Edit Configurations; 步骤八: 步骤九:配置tocat服务器 步骤十:哎,发现,我怎么就只有一个选项呀,art ...

  10. 手动创建mfc工程(留存方便复制)

    案例一. #include <afxwin.h> class CMyWnd : public CWnd { //DECLARE_DYNCREATE(CMyWnd) public: CMyW ...