首页手记 Ajax复习总结

Ajax复习总结

标签：

Html/CSS

ajax

ajax入门程序:

ajax-api详解

常用属性:

常用方法:

jquery中的ajax

四种:

案例-使用jquery的ajax判断用户是否被占用

步骤分析:

实现

案例-模仿百度搜索

需求:

步骤分析:

实现

案例-省市联动

需求:

步骤分析:

实现

ajax

异步JavaScript和XML,

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，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>

</body>

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>

ajax-api详解

常用属性:

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中的ajax

四种:

了解: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);

}

$(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>

</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"

});

案例-使用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

接受用户名

调用service完成查询操作返回一个用户

判断user是否为空

若为空 :写1 代表可以使用

若不为空:写0

5.在表单接受响应的数据

判断一下,

若为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);

}

$(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>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

//失去焦点发送ajax

</script>

</html>

案例-模仿百度搜索

需求:

在一个文本框中输入一段内容,keyup的时候发送一个ajax请求,去数据库中查找相应的内容,在页面上展示

步骤分析:

1.表

create table keyword(

id int primary key auto_increment,

kw varchar(20)

);

2.页面

3.在文本框输入内容 keyup的时候发送ajax请求将输入值传递到后台

4.将返回的数据展示

实现

$(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>

<div>

<div>

</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

实现

public class SelectProServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//1.调用service 查询所有的省份

List<Province> list=null;

try {

list = new ProvinceService().findAll();

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

//2.将所有的省份写回去

response.setContentType("text/html;charset=utf-8");

if(list!=null && list.size()>0){

response.getWriter().println(JSONArray.fromObject(list));

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doGet(request, response);

}

public class ProvinceDao {

public List<Province> findAll() throws SQLException {

QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());

String sql="select * from province";

return qr.query(sql, new BeanListHandler<>(Province.class));

}

public class SelectCityServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//0.设置编码

request.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

//1.获取省份id

String pid=request.getParameter("pid");

//2.调用service 查询所有的市返回 list

List<City> list=null;

try {

list = new CityService().findCitiesByPid(pid);

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

//3.将list转换成json 返回页面

if(list!=null && list.size()>0){

response.getWriter().println(JSONArray.fromObject(list));

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doGet(request, response);

}

public class CityDao {

public List<City> findCitiesByPid(String pid) throws SQLException {

QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());

String sql="select * from city where provinceid = ?";

return qr.query(sql, new BeanListHandler<>(City.class),pid);

}

src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>

$(function(){

//页面加载成功查询所有的省

$.get("/day15/selectPro",function(d){

//alert(d)

var $pro=$("#proId");

$(d).each(function(){

$pro.append($("<option value="+this.provinceid+">"+this.name+"</option>"));

});

},"json");

//给省份下拉选派发change事件

$("#proId").change(function(){

//获取省份id

var $pid=$(this).val();

//alert($pid);

//发送ajax请求查询所有的市

$.get("/day15/selectCity",{"pid":$pid},function(obj){

//alert(obj);

var $city=$("#cityId");

$city.html("<option>-请选择-</option>");

if(obj!=null){

$(obj).each(function(){

$city.append($("<option value='"+this.cityid+"'>"+this.name+"</option>"));

});

}

},"json");

});

})

</script>

</head>

<body>

<!--

-->

</select>

</select>

</body>

</html>

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕UI4062818

手记
篇

粉丝

97

获赞与收藏

552

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 28701 323

网络编程入门教程

20个小节 11926 225

Pandas 入门教程

25个小节 17359 313

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Ajax复习总结

ajax

ajax入门程序:

ajax-api详解

常用属性:

常用方法:

jquery中的ajax

四种:

案例-使用jquery的ajax判断用户是否被占用

步骤分析:

1.数据库和表

2.新建项目

3.新建一个注册页面

4.checkUsername4Ajax

5.在表单接受响应的数据

实现

案例-模仿百度搜索

需求:

步骤分析:

实现

案例-省市联动

需求:

步骤分析:

实现

阅读免费教程