Ajax Day1
1ajax引言
ajax asynchronous(异步) javascript and xml
同步请求：
1 地址栏超级链接表单javascript程序发送的请求都称之为同步请求
2 同步请求得到的是一张新的页面
3 同步请求必须等待响应，否则后续操作无意义
4 同步请求交互体验差
异步请求：
1 XMLHttpRequest对象xhr
2 异步请求不会响应新的页面，响应的是页面的局部（字符串）
3 异步请求无需等待响应
4 异步请求交互体验高
2XMLHttpRequest对象
XHR对象
1 异步请求
2 XMLHttpRequest 是一个javascript对象
3 XMLHttpRequest对象存在浏览器差异
1 Webkit内核浏览器
var xhr = new XMLHttpRequest();
2 IE核
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
4 异步请求的发送
//发起请求
xhr.open("method","url");
method: get|post
url:/ajax_day1/xxx 、/ajax_day1/login.action
//传递数据
xhr.send();
5 异步请求的响应
响应内容：通过Server端输出流返回响应字符串
//监听响应
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
xhr.repsonseText
}
}
xhr.readyState
0 xhr未创建时
1 xhr被创建
2 xhr发送请求
3 xhr响应到达
4 xhr响应完毕
xhr.satuts
200 正常
404
500
xhr.responseText 服务器端为客户端返回的响应字符串
3ajax标准开发步骤
ajax标准开发步骤
1 创建xhr对象
var xhr
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2 请求
get方式
xhr.open("get","url?name=suns&password=111");
xhr.send(null);
post方式
xhr.open("post","url");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
本质模拟使用表单最终才可以用post方式提交数据
xhr.send("name=suns&password=111");
3 响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
xhr.responseText
}
}
4ajax与struts2集成
?ajax与struts2集成注意事ù
1 client代码无需改变
2 server中的Action
1 收集数据通过成员变量
2 execute 中获得输出流
HttpServletResponse response = ServletActionContext.getResponse();
PrintWriter out = response.getWriter();
..
3 execute方法的返回值设置null 并且对应struts.xml配置文件中Action标签
内部的result标签省略
5jquery对于ajax的支持
?jquery对ajax的封装
1 屏蔽浏览器差异
2 减少ajax开发的冗余代码
3 jquery封装内容
1 xhr获得
xhr = new XMLHttpRequest();
xhr = new ActiveXObject("Microsoft.XMLHttp");
2 xhr发送请求
xhr.open();
xhr.setRequestHeader("Content-Type","application/x-www-form-urlecndoed
);
xhr.send();
3 xhr监听响应
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
xhr.responseText
}
}
$.ajax({
url:"",
type:"get|post",
data:"name=xxx&password=xxx" 注意get方式提交数据url? 不用写data post提交数据
dataType:"text"
success:function(data){ 注意：data = xhr.responseText function就是处理响应不需进行判断
}
});