一、Ajax 二、JSON数据格式 三、Ajax+Jquery 四、分页的实现

一、Ajax概述
###<1>概述

###<2>组成
以XMLHttpRequest为核心，发送Ajax请求和接收处理结果
以javascript为语言基础
以XML/JSON作为数据的传输格式
以HTML和CSS作为页面的渲染

###<3>作用
局部刷新
异步请求

###<4>作用流程

###<5>实现步骤和核心的API
1. 创建XMLHttpRequest对象(浏览器的兼容性)
2. 调用open方法，创建一个ajax请求
3. 设定回调函数
onreadystatechange = 函数
5. 接收处理结果（判断请求和响应处理的状态）
responseText
responseXML
4. 调用send方法发送ajax请求

XMLHttpRequest:ajax引擎
open()：创建Ajax请求
注意get：可以得到缓存中的数据
在URL后面添加唯一的标识
open("GET","TimeServlet?id="+new Date(),true);

注意post:添加HTTP HEAD
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

send()：发送Ajax请求
post请求时发送请求数据：k=v&k1=v2&...
get请求时直接调用无参send()方法

onreadystatechange：绑定Ajax请求的回调函数
readyState属性值发生变化时，回调指定的回调函数

readyState ：Ajax请求处理的状态
请求未初始化 ： readystate = 0
请求正在发送 ： readystate = 1
发送完毕 ： readystate = 2
响应中 ： readystate = 3
响应完成 ： readystate = 4

status ：服务器处理后HTTP CODE 状态码。
status=200 响应完成
status=404 资源找不到
status=500 服务器端发生错误

responseText ：封装了服务器处理的字符串结果数据
responseXML ：封装了服务器处理的XML结果数据
服务器响应的数据类型
String(JSON)
XML

# 二、JSON数据格式
###<1>概念
和语言没有关系的一种数据交换格式

实现前端和后台的数据交互

###<2>语法格式
对象：｛｝
对象数组：[{},{},{}]
属性和内容：key:value , key2:value2 ,...

###<3>解析json数据
在js中直接可以处理json对象

###<4>json转换
客户端 :处理json对象,可以直接操作
将json字符串转换成json对象
var jsonObj = JSON.parse(jsonStr)
var jsonObj = eval( "("+ jsonStr +")");

服务器 ：
1.json对象转换成json字符串
借助第三方的工具包
JSONObject :将一个java对象转换成JSON对象，从JSON中获取json字符串
JSONObject obj = JSONObject.fromObject(java对象);
String str = obj.toString();

JSONArray :将一个java数组对象转换成JSON数组对象，从JSON数组对象中获取json字符串
JSONArray objArr = JSONArray.fromObject(java数组对象);
String str = objArr.toString();

2.json字符串转换成java对象
借助第三方的工具包

# 三、Jquery+Ajax
###<1>Jquery概念
对JS进行封装，简化代码量，js的框架
write less do more

###<2>使用步骤
1. 下载jquery.js脚本文件,添加到web项目（jquery.js / mini-jquery.js）
2. 在需要使用jquery的页面中，使用<script src=“url”></script>
3. 使用jquery进行各种操作

###<3>实践：登陆异步用户名校验
方式一：$.get(列数列表)

参数列表：url,[data],[callback],[type]
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

方式二：$.post(列数列表)

参数列表：url,[data],[callback],[type]
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

方式三：$.ajax(列数列表)

参数列表：
｛
async:是否异步，true
data:待发送 Key/value 参数。
dataType:指定服务器返回的响应数据的类型。
type:请求的方式。
success： 响应成功后要执行的代码块，成功的回调函数
error: 响应失败的错误页面的回调函数
url：请求服务器的地址
｝

例如：
$.ajax(
{ async:true,
data:"username="+obj.value,
dataType:"json",
success:function(data){
if(data.result==1){
document.getElementById("span").innerHTML = "用户名可以使用";
}else{
document.getElementById("span").innerHTML = "用户名以存在";
}
},
type:"POST",
url:"CheckUsername",
error:function(){
alert("错误");
}
}
);

# 四、分页