menu
more_vert
Ajax复习总结

作者:dayu

publicclassAjax1Servlet extendsHttpServlet{

privatestaticfinallongserialVersionUID= 1L;

protectedvoiddoGet(HttpServletRequestrequest, HttpServletResponseresponse) throwsServletException, IOException {

System.out.println("请求来了~~");

response.getWriter().print("success~~");

}

protectedvoiddoPost(HttpServletRequestrequest, HttpServletResponseresponse) throwsServletException, IOException {

doGet(request, response);

}

}

<body>

<inputtype="button"value="点我"onclick="btnClick()">

</body>

<scripttype="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:核心对象创建

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

publicclassAjax2Servlet extendsHttpServlet {

privatestaticfinallongserialVersionUID= 1L;

protectedvoiddoGet(HttpServletRequest request, HttpServletResponse response)

throwsServletException, IOException {

// 接受参数

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

username= newString(username.getBytes("iso8859-1"), "utf-8");

System.out.println(username);

// 响应数据

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

response.getWriter().println("姓名:"+ username);

}

/**

* @seeHttpServlet#doPost(HttpServletRequest request, HttpServletResponse

* response)

*/

protectedvoiddoPost(HttpServletRequest request, HttpServletResponse response)

throwsServletException, 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);

}

}

<scripttype="text/javascript">

$(function(){

$("#btn").click(function(){

varurl="/day15/jqueryAjax";

//var params="username=张三";

varparams={"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>

<inputtype="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"


});

案例-使用jqueryajax判断用户是否被占用

步骤分析:

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;

实现

publicclassCheckUsername4AjaxServlet extendsHttpServlet {

privatestaticfinallongserialVersionUID= 1L;

protectedvoiddoGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {

//0.设置编码


//1.接受用户名

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

username=newString(username.getBytes("iso-8859-1"),"utf-8");

System.out.println(username);


//2.调用service 完成查询 返回值 user

Useruser=null;

try{

user= newUserServcie().checkUsername4Ajax(username);

} catch(SQLException e) {

// TODOAuto-generated catch block

e.printStackTrace();

}


//3.判断user 写回信息

if(user== null){

response.getWriter().println("1");

}else{

response.getWriter().println("0");

}

}

/**

* @seeHttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

*/

protectedvoiddoPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {

// TODOAuto-generated method stub

doGet(request, response);

}

}

<scripttype="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>

<formmethod="post"action="#">

<table>

<tr>

<td>用户名:</td>

<td><inputtype="text"name="username"></td>

<td><spanid="usename_msg"></span></td>

</tr>

<tr>

<td>密码:</td>

<td><inputtype="text"name="password"></td>

<td></td>

</tr>

<tr>

<tdcolspan=‘3‘><inputtype="submit"id="sub"></td>

</tr>

</table>

</form>

</body>

<scripttype="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.将返回的数据展示

实现

<scripttype="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!=‘‘){

vararr=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>

<inputname="kw"id="tid"><inputtype="button"value="百度一下">

</div>

<divid="did"style="border: 1px solid red;width: 171px;position:relative;left:-34px;display:none"></div>

</div>

</center>

</body>

</html>

publicclassSearchKwServlet extendsHttpServlet {

privatestaticfinallongserialVersionUID= 1L;

protectedvoiddoGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, 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= newKeyWordService().findKw4Ajax(kw);

} catch(SQLException e) {

// TODOAuto-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);

}


}

protectedvoiddoPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {

doGet(request, response);

}

}

publicclassKeyWordDao {

publicList<Object> findKw4Ajax(String kw) throwsSQLException {

QueryRunnerqr= newQueryRunner(DataSourceUtils.getDataSource());

String sql="select kw from keyword where kw like ? limit 5";

returnqr.query(sql, newColumnListHandler("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(对象) beanmap

实现






本文出自 “秦斌的博客” 博客,谢绝转载!

Ajax复习总结

原文地址:http://qinbin.blog.51cto.com/11773640/1950208



Processed Time:0.18823289871216

_REQUEST:
Array
(
    [0] => read
    [1] => 94893
)
_SESSION:
Array
(
    [fid] => 4
)