目录
ajax
ajax入门程序:
ajax-api详解
常用属性:
常用方法:
jquery中的ajax
四种:
案例-使用jquery的ajax判断用户是否被占用
步骤分析:
实现
需求:
步骤分析:
实现
案例-省市联动
需求:
步骤分析:
实现
ajax
ajax
异步JavaScript和XML,
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
/////////////////
ajax入门程序:
步骤:
1.创建一个核心对象 XMLHttpRequest
2.编写一个回调函数
3.编写请求方式和请求的路径(open操作)
4.发送请求(send操作)
publicclassAjax1Servlet extendsHttpServlet{ privatestaticfinallongserialVersionUID= 1L; protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException { System.out.println("请求来了~~"); response.getWriter().print("success~~"); } voiddoPost(HttpServletRequestdoGet(response); } } |
<body> inputtype="button"value="点我"onclick="btnClick()"</script"text/javascript"> functionbtnClick(){ //1.创建核心对象 xmlhttp=null; if(window.XMLHttpRequest) {// code for Firefox,Opera,IE7,etc. xmlhttp=newXMLHttpRequest(); } elseif(window.ActiveXObject) {// code for IE6,IE5 xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); } //2.编写回调函数 xmlhttp.onreadystatechange=function(){ //alert(xmlhttp.readyState); if(xmlhttp.readyState==4 && xmlhttp.status==200){ //alert('ok'); //接受服务器回送过来的数据 alert(xmlhttp.responseText); } } //3.open 设置请求的方式和请求路径 xmlhttp.open("get","${pageContext.request.contextPath}/ajax1"); //4.send 发送请求 xmlhttp.send(); } script> |
ajax-api详解
常用属性:
onreadystatechange:检测readyState状态改变的时候
readyState:ajax核心对象的状态
0:核心对象创建
3:部分响应已经生成(没有意思)
4:响应已经完成(使用的是这个状态)
status:状态码
if(xmlhttp.readyState==4 && xmlhttp.status==200){
}
responseText:响应回来的文本
常用方法:
open("请求方式","请求路径"[,"是否异步"]):设置请求的方式和请求的路径
send(["参数"]):发送请求 参数是请求方式为post的时候的参数
setRequestHeader("content-type","form表单enctype属性"):设置post请求的参数的类型 必须放在send方法之前.
jquery中的ajax
四种:
了解:jquery对象.load(url,params,function(数据){});
★: $.get(url,function(数据){},type);
发送get请求的ajax
url:请求的路径
params:请求的参数 参数为key\value的形式 key=value {"":"","":""}
fn:回调函数 参数就是服务器发送回来的数据
type:返回内容格式，xml,html,script,json,text,_default。 以后用"json"
★: $.post(url,type);
发送post请求的ajax
若结果为json格式,打印返回值的时候是一个对象
例如若json为 {"result":"success","msg":"成功"}
获取msg 只需要参数.msg
classAjax2Servlet extendsHttpServlet { voiddoGet(HttpServletRequest response) throwsServletException,IOException { // 接受参数 String username= request.getParameter("username"); username= newString(username.getBytes("iso8859-1"),255);font-size:14px;">"utf-8"); System.out.println(username); // 响应数据 response.setContentType("text/html;charset=utf-8"); response.getWriter().println("姓名:"+ username); } /** * @seeHttpServlet#doPost(HttpServletRequest request,HttpServletResponse * response) */ voiddoPost(HttpServletRequest request.getMethod()); request.setCharacterEncoding("utf-8"); "username"); System."post姓名:"+ username); } } |
script> $(function(){ $("#btn").click(function(){ varurl="/day15/jqueryAjax"; //var params="username=张三"; varparams={"username":"张苏纳"}; //load方式 /* $(this).load(url,function(d){ alert(d); }); */ //get方式 /* $.get(url,95);font-size:14px;">alert(d) //post方式 /* $.post(url,95);font-size:14px;">alert(d.msg); },"json"); */ //json格式 //在servlet中 // 响应数据 //String s="{\"result\":\"success\",\"msg\":\"success\"}";//"text/html;charset=utf-8"); //response.getWriter().println(s); }); }) scriptheadbodyid="btn""点我"html> |
理解:
$.ajax([选项]);
选项的可选值:
url:请求路径
type:请求方法
data:发送到服务器的数据
success:fn 成功以后的回调
error:fn 异常之后的回调
dataType:返回内容格式 经常使用json
async:设置是否是异步请求
例如:
$.ajax({
url:"/day15/demo1",
type:"post",
data:"username=tom",
success:function(d){
alert(d.msg);
},
error:function(){},
dataType:"json"
});
案例-使用jquery的ajax判断用户是否被占用
步骤分析:
1.数据库和表
CREATE TABLE `user` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`username` VARCHAR(20) DEFAULT NULL,
`password` VARCHAR(20) DEFAULT NULL,
`email` VARCHAR(20) DEFAULT NULL,
`name` VARCHAR(20) DEFAULT NULL,
`sex` VARCHAR(10) DEFAULT NULL,
`birthday` DATE DEFAULT NULL,
`hobby` VARCHAR(50) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
2.新建项目
导入 jar包 工具类 配置文件
3.新建一个注册页面
发送ajax请求,将输入的值发送到servlet
4.checkUsername4Ajax
接受用户名
判断user是否为空
若为空 :写1 代表可以使用
若不为空:写0
5.在表单接受响应的数据
判断一下,
document.getElementById("sub").disabled=true;
实现
classCheckUsername4AjaxServlet //0.设置编码 //1.接受用户名 String username=username="iso-8859-1"),62);font-size:14px;">username); Useruser=try{ user= newUserServcie().checkUsername4Ajax(username); } catch(sqlException e) { // TODOAuto-generated catch block e.printStackTrace(); } //3.判断user 写回信息 if(user== null){ "1"); }else{ "0"); } } Auto-generated method stub doGet(//给username派发一个失去焦点事件 发送ajax请求 $("input[name='username']").blur(//获取输入的值 var$value=$(this).val(); //alert($value); $.get("/day15/checkUsername4Ajax",255);font-size:14px;">"username="+$value,function(d){ //alert(d); if(d==1){ $("#usename_msg").html("<font color='green'>用户名可以使用</font>"); }else{ $("<font color='red'>用户名已被使用</font>"); } }); }); }) formmethod="post"action="#"tabletrtd>用户名:><"text"name="username"></span"usename_msg"span>密码:"password"tdcolspan='3'"submit""sub"form> //失去焦点 发送ajax > |
案例-模仿百度搜索
需求:
在一个文本框中输入一段内容,keyup的时候发送一个ajax请求,去数据库中查找相应的内容,在页面上展示
步骤分析:
1.表
create table keyword(
id int primary key auto_increment,
kw varchar(20)
);
2.页面
3.在文本框输入内容 keyup的时候 发送ajax请求 将输入值传递到后台
4.将返回的数据展示
实现
//文本框keyup的时候发送ajax $("#tid").keyup(//获取文本框的值 this).val(); //内容为空的时候不发送ajax if($value!= null&& $value!=''){ //清空div $("#did").html(""); $.post("/day15/searchKw",255);font-size:14px;">"kw="+$value,95);font-size:14px;">//不为空的时候切割字符串 if(d!=''){ vararr=d.split(","); $(arr).each(//alert(this); //可以将每一个值放入一个div 将其内部插入到id为did的div中 $("#did").append($("<div>"+this+"</div>")); }); //将div显示 $("#did").show(); } }); }else{ //内容为空的时候 将div隐藏 $("#did").hide(); } }); }) title>Insert title herecenterdivh1>百度搜索"kw""tid""百度一下"div"did"style="border: 1px solid red;width: 171px;position:relative;left:-34px;display:none"> > |
classSearchKwServlet //0.设置编码 request.setCharacterEncoding("utf-8"); //1.获取kw String kw="kw"); //2.调用service完成模糊操作 返回值:list List<Object> list=list= newKeyWordService().findKw4Ajax(kw); } //3.将数据 [a,aa,95);font-size:14px;">aaa] 去掉括号 写回去 a,95);font-size:14px;">aa list!=null&& list.size()>0){ String s= list.toString(); s=s.substring(1,62);font-size:14px;">s.length()-1); System.s); response.getWriter().println(s); } } response); } } |
classKeyWordDao { publicList<Object> findKw4Ajax(String kw) throwssqlException { QueryRunnerqr= newQueryRunner(DataSourceUtils.getDataSource()); String sql="select kw from keyword where kw like ? limit 5"; returnqr.query(sql,85);font-size:14px;">newColumnListHandler("kw"),255);font-size:14px;">"%"+kw+"%"); } } |
案例-省市联动
需求:
先有一个省份的下拉选,根据选择省份,从而动态的市下拉选中加载所有的市.
步骤分析:
1.表
2.页面上有两个下拉选 省份的下拉选一般是固定的 页面加载的时候读取所有的省份
3.当省份改变的时候,获取省份的信息,发送一个ajax请求,去市的表中查询相应省份的所有市,然后将他们加载到市下拉选上
4.selectProServlet selectCityServlet
//////////////////////
技术分析:
json
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。
json格式:
格式1:value可以为任意值
{"key":value,"key1":value1}
格式2:e可以为任意值
[e1,e2]
jsonlib工具类,可以使对象转换成json数据
1.导入jar包
2.使用api
JSONArray.fromObject(对象) 数组和list
JSONObject.fromObject(对象) bean和map
实现
classSelectProServlet serialVersionUID= 1L; List<Province> newProvinceService().findAll(); } //2.将所有的省份写回去 "text/html;charset=utf-8"); list.size()>0){ response.getWriter().println(JSONArray.fromObject(list)); } } classProvinceDao { publicList<Province> findAll() "select * from province"; newBeanListHandler<>(Province.class)); } } |
classSelectCityServlet serialVersionUID= 1L; "utf-8"); "text/html;charset=utf-8"); //1.获取省份id String pid="pid"); List<City> newCityService().findCitiesByPid(pid); } //3.将list转换成json返回页面 classCityDao { publicList<City> findCitiesByPid(String pid) "select * from city where provinceid = ?"; newBeanListHandler<>(City.class),62);font-size:14px;">pid); } } |
"text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"//页面加载成功 查询所有的省 $.get("/day15/selectPro",95);font-size:14px;">//alert(d) var$pro=$("#proId"); $(d).each(function(){ $pro.append($("<option value="+this.provinceid+">"+this.name+"</option>")); }); },255);font-size:14px;">"json"); //给省份下拉选派发change事件 $("#proId").change(//获取省份id var$pid=$(//alert($pid); //发送ajax请求 查询所有的市 $.get("/day15/selectCity",{"pid":$pid},85);font-size:14px;">function(obj){ //alert(obj); var$city=$("#cityId"); $city.html("<option>-请选择-</option>"); if(obj!=null){ $(obj).each(function(){ $city.append($("<option value='"+this.cityid+"'>"+"</option>")); }); } },255);font-size:14px;">"json"); }); }) >省市联动select"proId""province"option>-省份-<!-- <option value="1">北京</option> --> select"cityId""city">-请选择-> |
