一、ajax简介
1.是一种无须加载整个网页的情况下,能够更新部分网页的技术
2.异步的javaScript和XMl
3.改善用户体验,后台与服务器进行少量数据交换,不重新加载整个网页的情况下,对网页的某部分进行更新。
二、ajax原理
页面内容->调用Ajax对象->发送请求->Web服务器检查用户名->返回部分数据->调用事件处理函数->更新部分页面
1.使用XMLHttpRequest对象来向服务器
发送异步请求
,从服务器获得相应数据
2.js来操作DOM来更新页面
,但响应的页面不是整个页面,而是部分数据
三、ajax对象(浏览器的一个内置对象)
1.根据浏览器差异创建不同的Ajax对象
IE浏览器中的是:ActiveXObject
其他浏览器,(1.7以后的IE):XMLHttpRequest
function method1(){
var xhr;
//不是IE浏览器
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
//IE浏览器
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
2.Ajax对象的属性
①.readyState(表示XMLHttpRequest对象的状态)
0:未初始化,对象已创建,未调用open方法
1:open方法成功调用,send方法还没调用
2:send方法,还没开始接受数据
3:开始接受数据,但还没接收完
4:完成,响应数据完成
②.Onreadystatechange:请求状态改变的事件触发器(readyState变化时会调用这个属性上注册js函数)
③.responseText:服务器响应的文本内容
④.responseXML:服务器响应的XML内容对应的DOM对象
⑤.Status:服务器返回的http状态码.200表示成功,404表示未找到,500表示服务器内部错误
⑥.statusText:服务器返回状态的文本信息
3.Ajax对象的方法
①.Open(string method,string url,boolean asynch,String username,string password):指定http方法,url,及其他请求
method:请求方法,get和post
url:请求的服务器地址
asynch:是否采用异步方法,true为异步,false相反
username,password:可以不指定,用户名和密码
②.Send(content)
将准备好的内容向服务器发送,若采用异步,该方法会立即返回
content可以是null,表示不发送数据,内容可以是DOM对象,输入流,字符串
③.SetRequestHeader(String header,String value)
在post中设置请求头,指定header的值为value
在open方法后调用,一般用在post方法中
④.getAllResponseHeader()
获得所有响应头的信息
⑤.getResponseHeader(String header)
获得指定响应头的信息
⑥.Abort()
停止http请求
四.get请求
1.Ajax编程实现
不论是get还是post请求都是这四步
①.创建Ajax对象
②.通过open()方法设置Ajax对象发送请求前的必要数据
③.指定事件响应的方法
④.调用send()方法发起请求
区别:get发送请求添加数据是在url后面通过?加键值对的方法,然后send直接发送
null.open(‘get’,‘url?username=’+username,true);xhr.send(null);
2.Ajax设置请求响应
1.给onreadystatechange绑定一个事件处理函数
2.当readystatus请求状态发生改变时被触发
3.被触发函数一般对readystate为4,status为200做处理,即保证接收数据是成功响应的数据(服务器端响应的数据)
4.同步和异步
true为异步:当服务器端还没有做出响应时,还可以继续对页面进行操作
false为同步:必须等服务器端做出响应之后,才能继续操作
5.创建一个ajax的Web项目,在WebRoot里面创建一个regist.html
6.在Web项目的src里面创建一个servlet,文件名为RegistServlt.java,引入文件名要改成
<script>
$(function(){
//当按钮被点击的时候触发一个函数(编程式点击事件)
$("#bt").click(function(){
//1.创建Ajax对象
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
var username=$("#username").val();
//2.通过open()方法设置Ajax对象发送请求前的必要数据
xhr.open('get','regist?username='+username,true);
//3.指定事件响应的方法
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var txt=xhr.responseText;
alert(txt);
}
}
//4.调用send()方法发起请求
xhr.send(null);
})
});
</script>
五、post请求
六、用jquery来写ajax
七、json来写ajax
Json是一种轻量级的数据交换格式
JSON 值可以是:
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true 或 false)
null
数组和集合(在方括号中)
对象(在花括号中)
对象里面有集合和数组:
Json字符串转换为js对象:JSON.parse(json串);
Js对象转换为Json字符串(需要Fastjson.jar包):(JSON.toJSONString(js对象))