首页 > 代码库 > Ajax复习总结

Ajax复习总结

2024-11-04 15:39:02 203人阅读

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=http://www.mamicode.com/$(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=http://www.mamicode.com/$(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

实现

本文出自 “秦斌的博客” 博客，谢绝转载！

Ajax复习总结

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Ajax复习总结

Ajax复习总结

ajax

ajax入门程序:

ajax-api详解

常用属性:

常用方法:

jquery中的ajax

四种:

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

步骤分析:

1.数据库和表

2.新建项目

3.新建一个注册页面

4.checkUsername4Ajax

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

实现

案例-模仿百度搜索

需求:

步骤分析:

实现

案例-省市联动

需求:

步骤分析:

实现

看完仍有疑问？有类似问题直接问程序猿