标签：ajax
目录
ajax
ajax入门程序:
ajax-api详解
常用属性:
常用方法:
jquery中的ajax
四种:
案例-使用jquery的ajax判断用户是否被占用
步骤分析:
实现
案例-模仿百度搜索
需求:
步骤分析:
实现
案例-省市联动
需求:
步骤分析:
实现
ajax
异步JavaScript和XML,
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
/////////////////
步骤:
1.创建一个核心对象 XMLHttpRequest
2.编写一个回调函数
3.编写请求方式和请求的路径(open操作)
4.发送请求(send操作)
public class Ajax1Servlet extends HttpServlet { private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("请求来了~~"); response.getWriter().print("success~~"); }
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }
} |
<body> <input type="button" value="点我" onclick="btnClick()"> </body> <script type="text/javascript"> function btnClick(){ //1.创建核心对象 xmlhttp=null; if (window.XMLHttpRequest) {// code for Firefox, Opera, IE7, etc. xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) {// code for IE6, IE5 xmlhttp=new ActiveXObject("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> |
onreadystatechange:检测readyState状态改变的时候
readyState:ajax核心对象的状态
0:核心对象创建
1:调用了open方法
2:调用了send方法
3:部分响应已经生成(没有意思)
4:响应已经完成(使用的是这个状态)
status:状态码
if(xmlhttp.readyState==4 && xmlhttp.status==200){
}
responseText:响应回来的文本
open("请求方式","请求路径"[,"是否异步"]):设置请求的方式和请求的路径
send(["参数"]):发送请求 参数是请求方式为post的时候的参数
setRequestHeader("content-type","form表单enctype属性"):设置post请求的参数的类型 必须放在send方法之前.
了解:jquery对象.load(url,params,function(数据){});
★: $.get(url,params,function(数据){},type);
发送get请求的ajax
url:请求的路径
params:请求的参数 参数为key\value的形式 key=value {"":"","":""}
fn:回调函数 参数就是服务器发送回来的数据
type:返回内容格式，xml, html, script, json, text, _default。 以后用"json"
★: $.post(url,params,function(数据){},type);
发送post请求的ajax
若结果为json格式, 打印返回值的时候是一个对象
例如若json为 {"result":"success","msg":"成功"}
获取msg 只需要参数.msg
public class Ajax2Servlet extends HttpServlet { private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 接受参数 String username = request.getParameter("username"); username = new String(username.getBytes("iso8859-1"), "utf-8"); System.out.println(username);
// 响应数据 response.setContentType("text/html;charset=utf-8"); response.getWriter().println("姓名:" + username); }
/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println(request.getMethod()); request.setCharacterEncoding("utf-8");
// 接受参数 String username = request.getParameter("username"); System.out.println(username);
// 响应数据 response.setContentType("text/html;charset=utf-8"); response.getWriter().println("post姓名:" + username); } } |
<script type="text/javascript"> $(function(){ $("#btn").click(function(){ var url="/day15/jqueryAjax"; //var params="username=张三"; var params={"username":"张苏纳"}; //load方式 /* $(this).load(url,params,function(d){ alert(d); }); */ //get方式 /* $.get(url,params,function(d){ alert(d) }); */ //post方式 /* $.post(url,params,function(d){ alert(d.msg); },"json"); */
//json格式
//在servlet中 // 响应数据 //String s="{\"result\":\"success\",\"msg\":\"success\"}";//response.setContentType("text/html;charset=utf-8"); //response.getWriter().println(s);
}); }) </script> </head> <body> <input type="button" id="btn" value="点我"> </body> </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"
});
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;
导入 jar包 工具类 配置文件
表单 在用户名文本框上输入用户名 失去焦点
发送ajax请求,将输入的值发送到servlet
接受用户名
调用service完成查询操作 返回一个用户
判断user是否为空
若为空 :写1 代表可以使用
若不为空:写0
判断一下,
若为0,则提示用户名已被占用 表单不可用提交 提交按钮禁用
document.getElementById("sub").disabled=true;
public class CheckUsername4AjaxServlet extends HttpServlet { private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //0.设置编码 //1.接受用户名 String username=request.getParameter("username"); username=new String(username.getBytes("iso-8859-1"),"utf-8"); System.out.println(username); //2.调用service 完成查询 返回值 user User user=null; try { user = new UserServcie().checkUsername4Ajax(username); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } //3.判断user 写回信息 if(user == null){ response.getWriter().println("1"); }else{ response.getWriter().println("0"); } }
/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); }
} |
<script type="text/javascript"> $(function(){ //给username派发一个失去焦点事件 发送ajax请求 $("input[name=‘username‘]").blur(function(){ //获取输入的值 var $value=$(this).val(); //alert($value); $.get("/day15/checkUsername4Ajax","username="+$value,function(d){ //alert(d); if(d==1){ $("#usename_msg").html("<font color=‘green‘>用户名可以使用</font>"); }else{ $("#usename_msg").html("<font color=‘red‘>用户名已被使用</font>"); } }); }); }) </script> </head> <body> <form method="post" action="#"> <table> <tr> <td>用户名:</td> <td><input type="text" name="username"></td> <td><span id="usename_msg"></span></td> </tr> <tr> <td>密码:</td> <td><input type="text" name="password"></td> <td></td> </tr> <tr> <td colspan=‘3‘><input type="submit" id="sub"></td> </tr> </table> </form> </body> <script type="text/javascript"> //失去焦点 发送ajax </script> </html> |
在一个文本框中输入一段内容,keyup的时候发送一个ajax请求,去数据库中查找相应的内容,在页面上展示
1.表
create table keyword(
id int primary key auto_increment,
kw varchar(20)
);
2.页面
3.在文本框输入内容 keyup的时候 发送ajax请求 将输入值传递到后台
4.将返回的数据展示
<script type="text/javascript"> $(function(){ //文本框keyup的时候发送ajax $("#tid").keyup(function(){ //获取文本框的值 var $value=$(this).val(); //内容为空的时候不发送ajax if($value!= null && $value!=‘‘){ //清空div $("#did").html(""); $.post("/day15/searchKw","kw="+$value,function(d){ //不为空的时候切割字符串 if(d!=‘‘){ var arr=d.split(","); $(arr).each(function(){ //alert(this); //可以将每一个值放入一个div 将其内部插入到id为did的div中 $("#did").append($("<div>"+this+"</div>")); }); //将div显示 $("#did").show(); } }); }else{ //内容为空的时候 将div隐藏 $("#did").hide(); } }); }) </script> <title>Insert title here</title> </head> <body> <center> <div> <h1>百度搜索</h1> <div> <input name="kw" id="tid"><input type="button" value="百度一下"> </div> <div id="did" style="border: 1px solid red;width: 171px;position:relative;left:-34px;display:none"></div> </div> </center> </body> </html> |
public class SearchKwServlet extends HttpServlet { private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //0.设置编码 response.setContentType("text/html;charset=utf-8"); request.setCharacterEncoding("utf-8"); //1.获取kw String kw=request.getParameter("kw"); //2.调用service完成模糊操作 返回值:list List<Object> list=null; try { list = new KeyWordService().findKw4Ajax(kw); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } //3.将数据 [a,aa,aaa] 去掉括号 写回去 a,aaa,aa if(list!=null && list.size()>0){ String s = list.toString(); s=s.substring(1, s.length()-1); System.out.println(s); response.getWriter().println(s); } }
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }
} |
public class KeyWordDao {
public List<Object> findKw4Ajax(String kw) throws SQLException { QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource()); String sql="select kw from keyword where kw like ? limit 5"; return qr.query(sql, new ColumnListHandler("kw"), "%"+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
本文出自 “秦斌的博客” 博客，谢绝转载！
标签：ajax
原文地址：http://qinbin.blog.51cto.com/11773640/1950208
