复习日记-Ajax/JSON
AJAX的作用：
完成页面局部刷新而不影响用户的体验.
* 用户名是否已经存在的校验
* 百度信息输入的提示
...
使用AJAX：
JavaScript和XML
* XMLHttpRequest:
* 属性：
* onreadystatechange:
* readyState:
* status:获得状态码
* responseText :响应的文本
* responseXML :响应的XML
* 方法:
* open(“请求方式”,”请求路径”,”是否异步”);
* send(“提交的参数”);
* setRequestHeader(“头信息”,”头的值”);
开发步骤：
1.获得XMLHttpRequest对象.
* IE将XMLHttpRequest封装到一个ObjectXActive插件中.
* Firefox直接可以创建XMLHttpRequest.
2.设置状态改变触发一个函数.
3.打开一个链接.
4.发送请求.
【AJAX的GET入门】
创建XMLHttpRequest
function createXMLHttpRequest() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
AJAX的代码：
function loadData() {
// 1.创建异步XMLHttpRequest对象
var xhr = createXMLHttpRequest();
// 2.设置状态改变触发一个函数
xhr.onreadystatechange = function(){
// 回调函数.
if(xhr.readyState == 4){// 请求发送完成
if(xhr.status == 200){// 响应也正确
var data = xhr.responseText;
document.getElementById("d1").innerHTML=data;
}
}
}
// 3.打开一个连接：
xhr.open("GET","/WEB15/ServletDemo1",true);
// 4.发送请求
xhr.send(null);
}
【AJAX的POST入门】
function loadData(){
// 1.创建异步对象
var xhr = createXMLHttpRequest();
// 2.设置状态改变触发的函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("d1").innerHTML=xhr.responseText;
}
}
}
// 3.打开连接
xhr.open("POST","/WEB15/ServletDemo2",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 4.发送数据
xhr.send("name=李四&password=456");
}
jQuery中的Ajax：
四种方法：
方法一：对象.load(url,params,callbackfunction(返回的数据data){});
一般不使用这种方式：因为不能注明post还是get，容易出现编码问题
方法二：$.get(url,params,function(data){},type);
url:请求路径
params:请求参数，参数为key/value格式 key=value或者 { “key" : "value"} json格式
function(data):回调函数，data就是服务器发送回来的数据
type：返回信息的格式，一般用json
若type为json格式，返回值是一个json对象，获取特定值需要参数data.键名
方法三：$.post(url,params,function(data){},type);
url:请求路径
params:请求参数，参数为key/value格式 key=value或者 { “key" : "value"} json格式
function(data):回调函数，data就是服务器发送回来的数据
type：返回信息的格式，一般用json
方法四：$.ajax([选项])；
选项的可选值：
url：请求路径
type：请求方式
data：发送到服务器的数据
success：成功以后的回调
error：异常之后的回调
datatype：预期服务器返回的数据格式，一般使用json
json:轻量级的数据交换格式，基于ECMAScript的一个子集
json格式：
格式一：value可以为任意值(value也可以为json串)
{"key":"value","key1":"value"}
格式二：元素e也可以为任意值...
["e1","e2"]
jsonlib工具类，可以使我们的对象转换成json数据
1.导入jar包
2.使用api
JSONArray.fromObject(对象) --数组和list
JSONObject.fromObject(对象) ---bean和map
注意：在后台给前台返回数据的时候，使用response.getWriter.println(list)会出问题，解决办法是返回给前台一个json格式数据
