1.Ajax的概念
局部刷新技术，用来在当前页面响应不同的请求内容
2.Ajax的作用
需求：
有时需要将本次的响应结果和前面的响应结果内容在同一个页面中展现给用户
解决：
1.在后台服务器端将多次响应内容重新拼接成一个jsp页面，响应
但是这样会造成重复响应，资源浪费
2.使用Ajax技术
3.Ajax的使用
- Ajax的基本流程
创建Ajax引擎对象
复写onreadystatement函数
判断Ajax状态码
判断响应状态码
获取响应内容(响应内容的格式)
普通字符串：responseText
json
将数据按照json的格式拼接成字符串，方便eval()方法将接收的字符串转换为js的对象
json格式：responseText
var 对象名={
属性名：属性值,
属性名：属性值,
......
}
XML:responseXML，返回document对象
通过document对象将数据从xml中获取出来
处理响应内容(js操作文档结构)
发送请求
get请求
get的请求实体拼接在URL后面，?隔开，键值对
ajax.open("get", "url");
ajax.send(null);
post请求
有单独的请求实体
ajax.open("post", "url");
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("name=张三&pwd=123");
- Ajax的状态码
Ajax状态码
readyState:0,1,2,3,4
4：表示响应内容被成功接收
响应状态码
200：一切正常
404：资源未找到
500：内部服务器错误
- Ajax的异步和同步
ajax.open(method,url,async)
async：设置同步代码执行/异步代码执行
true代表异步，默认是异步
false代表同步
<html> <head> <base href="<%=basePath%>"> <title>My JSP 'my.jsp' starting page</title> <script type="text/javascript"> function ajaxReq(){ //获取用户请求数据 var uname=document.getElementById("uname").value; var data="name="+uname; //创建ajax引擎对象 var ajax; if(window.XMLHttpRequest){//火狐 ajax=new XMLHttpRequest(); }else if(window.ActiveXObject){//IE ajax=new ActiveXObject("Msxml2.XMLHTTP"); } //复写onreadystatechange函数 ajax.onreadystatechange=function(){ //判断ajax状态码 if(ajax.readyState==4){ //判断响应状态码 if(ajax.status==200){ //获取响应内容 var result=ajax.responseText; //处理响应内容 alert(result); } } } //发送请求 //get方式：请求实体拼接在URL后面 //ajax.open("get", "ajax?"+data); //ajax.send(null); //post方式 ajax.open("post", "ajax"); ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.send("name=张三&pwd=123"); } </script> <style type="text/css"> #showdiv{ border:solid 1px; width:200px; height:100px } </style> </head> <body> <h3>欢迎登陆403峡谷</h3> <hr> <input type="text" name="uname" id="uname"/> <input type="button" value="测试" onclick="ajaxReq()"/> <div id="showdiv"></div> </body> </html>
- Ajax的封装
method：请求方式：值为get或者post
url：请求地址
data：没有值需要传入null
有请求数据则传入字符串数据，格式为"name=value&name=value";
deal200：接收一个带有形参的js函数对象，接收的实参
deal404：接收一个js函数对象
deal500：接收一个js函数对象
<script type="text/javascript">
function getDate(method,url,data,deal200,deal404,deal500,async){
var ajax=getAjax();
//复写onreadystatement函数
ajax.onreadystatechange=function(){
//判断Ajax状态码
if(ajax.readyState==4){
if(ajax.status==200){
if(deal200){
deal200(ajax)
}
}else if(ajax.status==404){
if(deal404){
deal404()
}
}else if(ajax.status==500){
if(deal500){
deal500(ajax)
}
}
}
}
//发送请求
if("get"==method){
ajax.open("get",url+data==null?"":"?"+data,async);
ajax.send(null);
}else if("post"==method){
ajax.open("post",url,async);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(data);
}else{
}
}
function getAjax(){
//创建Ajax引擎对象
var ajax;
if(window.XMLHttpRequest){//火狐
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){//IE
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
return ajax;
}
</script>