●简介
Asynchronous Javascript And Xml
异步的javascript和xml
·使用XHTML和CSS的基于标准的表示技术
·使用DOM进行动态显示和交互
·使用XML和XSLT进行数据交换和处理
·使用XMLHTTPREQUEST进行异步数据检索:页面端javascript的浏览器内置对象
·使用Javascript将以上技术融合
与传统模式的对比
//1.取参数
//2.看参数是否有问题
//3.校验操作
//4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回给页面端,而不是将新页面发送给用户。
/*
* 如何实现简单的ajax应用
1 创建XMLHttpRequest对象
2 打开和服务器的连接
3 向服务器发送数据
4 服务器发送响应到客户端
*/
●ajax get方式提交数据
function ajaxFunction(){
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;
}
window.οnlοad=function(){
document.getElementById("ok").οnclick=function(){
/*
* 1 创建XMLHttpRequest对象
*/
var xmlHttp=ajaxFunction();
/*
* 4 服务器发送响应到客户端
* * 在 Ajax 执行过程中,服务器会通知客户端当前的通信状态,这依靠更新 XMLHttpRequest 对象的 readyState 来实现
* * 每次 readyState 属性的改变都会触发 readystatechange事件
* readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
* 0 代表未初始化。 还没有调用 open 方法
* 1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
* 2 代表已加载完毕。send 已被调用。请求已经开始
* 3 代表交互中。服务器正在发送响应
* 4 代表完成。响应发送完毕
*
* * 如果把readystatechange事件执行一个函数,每次readyState属性值的改变,都会引起该函数的执行
*
*/
xmlHttp.onreadystatechange=function(){
alert(xmlHttp.readyState);
alert(xmlHttp.status)
if(xmlHttp.readyState==4){//响应发送完毕
if(xmlHttp.status==200||xmlHttp.status==304){ //服务器的状态
//接收服务器发送过来的数据
var data=xmlHttp.responseText;
alert(data);
}
}
}
/*
* 2 打开和服务器的连接
* xmlHttp.open("get","../testServlet",true);
* * 参数1 :请求方法 get post
* * 参数2 :路径字符串,指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
* * 参数1 :asynch:表示请求是否要异步传输,默认值为true(异步)
*/
xmlHttp.open("get","../testServlet?timeStamp="+new Date().getTime()+"&a=8",true);
/*
* 3 向服务器发送数据
* xmlHttp.send(null)
* * 发送数据库
* * 若选用的是 GET 请求,则不会发送任何数据, 给 send 方法传递 null 即可:
* 既是传递了参数,也获取不到
*/
xmlHttp.send("b=9&c=10")
}
}
●ajax post方式提交数据
function ajaxFunction(){
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;
}
window.οnlοad=function(){
document.getElementById("ok").οnclick=function(){
//1
var xmlHttp=ajaxFunction();
//2
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200||xmlHttp.status==304){
var data=xmlHttp.responseText;
alert(data);
}
}
}
//3
xmlHttp.open("post","../testServlet?timeStamp="+new Date().getTime()+"&a=9",true)
/*
* 如果请求方法是post:
* * 如果用 POST 请求向服务器发送数据,需要将 “Content-type” 的首部设置为
* “application/x-www-form-urlencoded”.它会告知服务器正在发送数据,并且数据已经符合URL编码了。
* * 该方法必须在open()之后才能调用
*/
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4如果请求方法是post,此时可以使用send方法发送数据
xmlHttp.send("b=6&c=10");
}
}
●ajax的readyState属性和onreadystatechange方法
function ajaxFunction(){
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;
}
window.οnlοad=function(){
//<input type="button" name="ok" id="ok" value="测试加载">
document.getElementById("ok").οnclick=function(){
var xmlHttp=ajaxFunction();
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==1){
//<div id="divcheck"></div>
document.getElementById("divcheck").innerHTML="<img src=loading33.gif width=80 height=80> 正在打开服务器的连接";
alert("xxx");
}else if(xmlHttp.readyState==2){
document.getElementById("divcheck").innerHTML="<img src=loading33.gif width=80 height=80> 正在向服务器发送数据";
alert("xxx");
}else if(xmlHttp.readyState==3){
document.getElementById("divcheck").innerHTML="<img src=loading33.gif width=80 height=80> 服务器正在处理数据";
alert("xxx");
}else if(xmlHttp.readyState==4){
document.getElementById("divcheck").innerHTML="";
}else{
document.getElementById("divcheck").innerHTML="服务器连接失败,请检查网络重试";
}
}
xmlHttp.open("post","../testServlet?timeStamp="+new Date().getTime(),true)
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send();
}
}
●几种json格式
后台:servlet中用out.print("")返回符合json格式的内容
使用工具可以将普通的list或者对象转换为json格式的字符串
a.导包
* json-lib-2.3-jdk15.jar json类库的核心包
* ezmorph-1.0.6.jar 能完成bean的复制等功能
* morph-1.1.1.jar
* morph-sandbox-1.1.1.jar 也是完成bean与bean之间的复制
* commons-beanutils-1.8.3.jar(复制)
* commons-collections-3.2.1.jar(对java.util的增强)
* commons-lang-2.5.jar(对java.lang的增强)
* commons-logging-1.1.1.jar(日志 )
b.使用
将list转为json格式 并去掉一些list中对象中的属性
//设置生成的json格式不包含哪些属性
JsonConfig config=new JsonConfig();
config.setExcludes(new String[]{"pid"});
//[{"pid":1,"pname":"吉林省"},{"pid":2,"pname":"辽宁省"},{"pid":3,"pname":"山东省"}]
JSONArray jsonArray=JSONArray.fromObject(list,config);
System.out.println(jsonArray.toString());
将对象转为json格式 并去掉一些属性
Province p=new Province(3,"山东省");
JSONObject jsonObject=JSONObject.fromObject(p, config);
System.out.println(jsonObject.toString());
前台:用xmlHttp.responseText只能接受服务器返回的普通文本
把符合json格式的字符串转换为json格式 var dataObj = eval("("+data+")");
●第一种
/*
* class Person{
* Integer id;
* String name;
* }
*
* Person p=new Person();
* p.id
* p.name
*/
/*
* 表示一个对象:
* 格式 {key1:value1,key2:value2......}
*/
var people={"firstname":"zhang","lastname":"sanfeng","email":"sss@kenin.com"};
●第二种
/*
* 表示多个对象:
* 格式 [
* {key1:value1,key2:value2......},
* {key1:value1,key2:value2......}
* ]
*
*/
var people=[
{"firstname":"zhang1","lastname":"sanfeng1","email":"sss@kenin1.com"},
{"firstname":"zhang2","lastname":"sanfeng2","email":"sss@kenin2.com"}
];
●第三种
/*
* 表示多个对象:
* 格式{key:[
* {key1:value1,key2:value2......},
* {key1:value1,key2:value2......}
* ]
* }
*
*/
var people={"programs":
[
{"firstname":"zhang1","lastname":"sanfeng1","email":"sss@kenin1.com"},
{"firstname":"zhang2","lastname":"sanfeng2","email":"sss@kenin2.com"}
]
};
●第四种
/*
* 表示多个对象:
* 格式{key1:[
* {key1:value1,key2:value2......},
* {key1:value1,key2:value2......}
* ],
* key2:[
* {key1:value1,key2:value2......},
* {key1:value1,key2:value2......}
* ],
* key3:[
* {key1:value1,key2:value2......},
* {key1:value1,key2:value2......}
* ],
* }
*
*/
var people={"programs1":
[
{"firstname":"zhang11","lastname":"sanfeng11","email":"sss@kenin11.com"},
{"firstname":"zhang12","lastname":"sanfeng12","email":"sss@kenin12.com"}
],
"programs2":
[
{"firstname":"zhang21","lastname":"sanfeng21","email":"sss@kenin21.com"},
{"firstname":"zhang22","lastname":"sanfeng22","email":"sss@kenin22.com"}
],
"programs3":
[
{"firstname":"zhang31","lastname":"sanfeng31","email":"sss@kenin31.com"},
{"firstname":"zhang32","lastname":"sanfeng32","email":"sss@kenin32.com"}
]
};
●第五种
var people={"username":"黎明",
"sex":"male",
"tel":{"call":"13455","phone":"110"},
"address":[
{"city":"beijing","street":"一街"},
{"city":"changchun","street":"金川街"}
]
};
●对象转json
List<Province> list=new ArrayList<Province>();
list.add(p1);
list.add(p2);
list.add(p3);
//设置生成的json格式不包含哪些属性
JsonConfig config=new JsonConfig();
config.setExcludes(new String[]{"pid"});
//[{"pid":1,"pname":"吉林省"},{"pid":2,"pname":"辽宁省"},{"pid":3,"pname":"山东省"}]
JSONArray jsonArray=JSONArray.fromObject(list,config);