AJAX
杨老师
一 引言 ajax(Ansynchronized JavaScript And XML) 异步js和xml 核心内容：异步请求
二 异步请求和同步请求
同步：地址栏 超链接 表单 location href
坏处：影响用户交互的体验
现象：同步请求响应给客户端的是一个新的页面。
同步请求必须等待服务器端的响应 才能进行后续操作，否则操作没有意义
异步(XMLHttpRequest)：
好处： 用户的交互体验好
现象： 异步请求响应给cilent的不是一个新的页面而是一个页面的局部
异步请求无需等待服务器端的响应 直接进行后续操作
三 异步请求对象：XMLHttpRequest 是一个js对象 存在浏览器差异 简称 xhr
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。
1）创建xhr对象，
WebKit var xhr=new XMLHttpRequest();
IE： var xhr=new ActiveXObject(Microsoft.XMLHTTP);
var xhr;
if(window.XMLHttpRequest){//true
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject(Microsoft.XMLHTTP);
}
2）xhr对象发送请求，并传递参数
xhr.open("method","url"); 作用：发送请求 //xhr.open("get","/ajaxDemo/ajaxServlet");
xhr.send(); 作用：向服务器端传递参数
3）xhr处理响应
xhr.readyState
0----4 自动变化
readyState==0 说明xhr还没有创建
==1 说明xhr发送请求
==2 说明服务器端的响应到达client 但是还不能用
==3 说明服务器端的响应开始解析
==4 说明响应完毕
xhr.status
--200 响应正确
--404 路径问题
--500 服务器端程序错误。
xhr.onreadystatechange=function(){ //监听这个变化
if(xhr.readyState==4 && xhr.status==200){//代表响应回来的数据可以处理了 必须是成功 正确的响应
处理
xhr.responseText;
}
}
四， ajax post提交异步请求
1）创建xhr
var xhr;
if(window.XMLHttpRequest){//true
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject(Microsoft.XMLHTTP);
}
2）发送请求
xhr.open("post","url");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //死写法，
//为什么post提交数据时候需要指定application/x-www-from-urlencoded excel中有图解。
在xhr 操作中没有表单 所以没有了enctype属性，
一般只有表单提交的时候，才用post 但是现在没有表单了 所以要自己指定
xhr.send("name=xxx&pass=xxx&.....");
3）处理响应
xhr.onreadystatechange=function(){ //监听这个变化
if(xhr.readyState==4 && xhr.status==200){//代表响应回来的数据可以处理了 必须是成功 正确的响应
处理
xhr.responseText;
}
}
五 jqury框架对ajax的封装
$.ajax({
type:"get/post", //不写么type默认是get
url:"url地址", //后边也可以？传值 但是紧紧限于get
data："name=xxx&passwrod=xxx....",
success:function(result){ //响应处理 result等效于 xhr.responseText;
//处理响应数据
}
});
load(); 加载页面的局部
$(function(){
window.setTimeout(function(){
$("#d").load("/AjaxDemo/load2.html");
}, 5000)
});
六,json
1)客户端和服务器的数据往来是非常麻烦的
详情看数据转换图：
2)gosn组件
作用:谷歌提供一个专门用于把java对象或者集合转换成JSON字符串的类库。
使用: 导包，
Gson gson=new Gson();
gson.toJson();
GsonBuilder gb=new GsonBuilder();
Gson gson=gb.create();
1 gson转换对象时候 处理特殊类型 ---比如日期
public class DateFormatDemo implements JsonSerializer {
//把日期类型转换成指定的字符串格式
public JsonElement serialize(Object date, Type arg1, JsonSerializationContext arg2) {
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
String strdate = sdf.format(date);
return new JsonPrimitive(strdate);
}
}
//不能直接new Gson() 对象 要进行类型转换器的注册
public class test {
public static void main(String[] args) throws ParseException {
Date d=new Date();
GsonBuilder gb=new GsonBuilder();
gb.registerTypeAdapter(Date.class, new DateFormatDemo());//注册
Gson gson = gb.create();
String json = gson.toJson(d);
System.out.println(json);
}
}
2 回环问题：
解决核心：排除策略
1） 写一个类实现一个接口 实现排除策略，
import com.google.gson.ExclusionStrategy;
import com.google.gson.FieldAttributes;
public class ExsusionTest implements ExclusionStrategy{
public boolean shouldSkipClass(Class<?> arg0) {
return false;
}
public boolean shouldSkipField(FieldAttributes f) {
if(f.getName().equals("user")){ //需要排除的属性名
return true;
}
return false;
}
}
2） 排除策略的注册。
public class TestHH {
public static void main(String[] args) {
User u=new User();
u.setId(1);
u.setName("yx");
Address a=new Address();
a.setId(1);
a.setCity("bj");
u.setAdd(a);
a.setUser(u);
/* Gson gson=new Gson();
String uu = gson.toJson(u);*/
GsonBuilder gb=new GsonBuilder();
gb.setExclusionStrategies(new ExsusionTest()); //注册
Gson gson = gb.create();
String uu = gson.toJson(u);
System.out.println(uu);
}
}
第二种解决方案：基于注解的
把需要转换的属性加入@Expose注解
应用GsonBuilder进行处理
GsonBuilder gb=new GsonBuilder();
gb.excludeFieldsWithoutExposeAnnotation();
Gson gson = gb.create();
String uu = gson.toJson(u);
System.out.println(uu);
|
|
收藏
淘帖
踩
