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

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

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

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

###<4>作用流程
![](3.png)

###<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();

扫描二维码关注公众号,回复: 928768 查看本文章

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("错误");
}
}
);


# 四、分页

猜你喜欢

转载自www.cnblogs.com/sumboy/p/9058644.html