JQuery、AJAX与Javascript之间的父子关系
JQuery、AJAX都是Javascript的一个框架,各有各自不同的功能,如果把Javascript比作父亲的话,JQuery和AJAX就是Javascript的亲生儿子。JQuery是轻量级的js库,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
jquery
JQuery的宗旨是——WRITE LESS,DO MORE,也就是“吃得少,干的多”。让我们广大的程序员能够写更少的代码,做更多的事情。
而JQuery在什么时候使用呢?和上边说的类似,它主要的用处就是:
1. 选择器,通过$符号可以快速、精确的定位到指定的元素。选择器包括:基本选择器、层次选择器、过滤选择器、表单选择器
2. 对DOM操作,通过$符号找到DOM元素,对属性进行操作;添加删除节点;对样式进行操作;设置获取HTML文本和值;遍历子元素或同辈元素;添加事件
3. 表单验证
4. 动画效果
5. ajax
ajax
下面来讲讲ajax,AJAX即“AsynchronousJavaScript and XML”(异步JavaScript和XML)。所谓的异步就是在事件触发之后浏览器任然可以做其他的事情,与发生事件的控件无关的控件不受影响。AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
要搞清的概念:观点一:
Ajax
和服务器端技术毫不相关。
ajax
完完全全就是前端技术,所做的无非就是异步的发送一个请求然后得到一个响应,事实上,不论何种
Ajax
技术,服务器端都是返回的一个纯文本流,再由客户端来处理这个文本。这段文本可以是
xml
格式,也可以是一个
Html
片段,也可以是一段
JavaScript
脚本,或者仅是一个字符串。服务器端仅仅是作为一个数据接口,客户端使用
XMLHttpRequest
对象来请求这个页面,客户端在异步获取结果后,不是直接显示在页面,而是由客户端的
Javascript
脚本处理后再显示在页面。至于各种控件所谓的能返回
DataSet
对象,
Date
对象,或者其他的数据类型,都是封装了这个处理过程的结果。AJAX是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。那一般什么时候使用AJAX,什么时候使用AJAX比较合适呢?一般都是用在页面局部发生变化的地方。如下:
1. 基于表单的交互
2. 深层树状导航
3. 实时用户对用户通讯
4. 投票、是否选择、等级评价
5. 过滤和复杂数据操作
6. 普通录入时的提示/自动补齐
不适用使用AJAX的场合:
1. 简单的表单
2. 搜索
3. 基本导航
4. 替换大量的信息
5. 显示操作
6. 无用的网页小部件
demo
下面是自己做的一个很简单的web项目,首先是一个注册页面(register.jsp),注册form提交之后跳转到详情页面(detail.jsp),common.jsp是所有页面都会用到的一些基本设置,然后被include到其它页面中,便于管理。
http://www.w3school.com.cn/jquery/jquery_ajax_intro.asp
具体如下所示:
项目目录结构和页面结果展示如下(js ajax暂未实现,后续更新):
在点击左边jquery ajax请求时注意观察详情页面的userId和name处的变化,如下是详情页面的js写法和注释,注释都比较清楚了,所以不再过多说明
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<jsp:include page="common.jsp"></jsp:include>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>user1 detail info</title>
<style type="text/css">
.left {
text-align: right;
background-color: green;
width: 100px;
margin: 1px;
}
.right {
text-align: left;
background-color: yellow;
margin: 1px;
width: 200px;
}
</style>
<script type="text/javascript">
/**
ajaxPostMethod(),通过jquery的ajax()方法发送post请求
ajaxGetMethod(),通过jquery的ajax()方法发送get请求
loadMethod(),对jquery的ajax()方法的一种封装,也是发送的post请求,用起来更加方便简洁,且具有特别的功效,就是请求成功时,将返回的值会替换发送请求的标签的值
postMethod(),对jquery的ajax()方法的一种封装,也是发送的post请求,作用跟ajaxPostMethod()的功效一样
getMethod(),对jquery的ajax()方法的一种封装,发送的get请求,作用跟ajaxGetMethod()的功效一样
*/
/**
*定义和用法: ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。
最简单的情况下,$.ajax() 可以不带任何参数直接使用。 注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
语法 : jQuery.ajax([settings])
参数描述: settings 可选。用于配置 Ajax 请求的键值对集合。 可以通过 $.ajaxSetup() 设置任何选项的默认值。
对于ajax里面的settings其实有很多参数可以进行灵活的选择,参数实在太多了,下面的代码只列举了一些非常常用的属性,对于其他的参数可以参照这个地址:http://www.w3school.com.cn/jquery/ajax_ajax.asp
*/
function ajaxPostMethod() {
$.ajax({
type : 'post',
url : '/ajax_test/managerInfo',
data : {
managerId : 'ajaxPostMethod_789',
managerName : 'ajaxPostMethod_yuwenjie'
},
cache : false,//是否设置缓存
//设置预期返回值的类型为json类型,有很多时候会进入error条件就是返回值转化为预期类型出错导致的
//dataType : 'json',
success : function(resultdata, textStatus, XMLHttpRequest) {//响应成功时执行的函数
$("#name").text("managerName:");
$("#nameVal").text(resultdata);
},
error : function(resdata, textStatus, XMLHttpRequest) {//响应失败时执行的函数
alert("fail");
$("#name").text("managerName:");
$("#nameVal").text(resdata);
}
});
}
function ajaxGetMethod() {
$.ajax({//ajax默认请求方式就是‘get',不过写的时候最好还是写下,怕自己不记得
type : 'get',
url : "/ajax_test/managerInfo",
data : {
"managerId" : "ajaxGetMethod_45456",
"managerName" : "ajaxGetMethod_unj"
},
success : function(response, status, xhr) {
$("#name").text("managerName:");
$("#nameVal").text(response);
},
error : function(response, status, xhr) {
alert("出错啦");
}
});
}
/*
定义和用法
load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。
注释:还存在一个名为 load 的 jQuery 事件方法。调用哪个,取决于参数。 js也有个load()方法,该方法用于页面加载完成之后调用
语法: load(url,data,function(response,status,xhr))
解释:
url ,规定要将请求发送到哪个 URL.
data ,可选。规定连同请求发送到服务器的数据。
function(response,status,xhr), 可选。规定当请求完成时运行的函数。不管成功还是失败,都会执行的回调函数,如果请求成功,就会将发送请求的标签的值替换为返回值
额外的参数:
response - 包含来自请求的结果数据
status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
xhr - 包含 XMLHttpRequest 对象
*/
//jquery的load方法也是以post方式请求的,请求返回的值会替换id为userIdVal的值,这一点特别值得提醒,因为之前我就没发现
function loadMethod() {
$("#userIdVal").load("/ajax_test/managerInfosss", {
"managerId" : "loadMethod_45456",
"managerName" : "loadMethod_unj"
}, function(response, status, xhr) {
// $("#name").text("managerName:");
// $("#nameVal").text(response);
alert('iiiii');
});
}
/*
定义和用法
post() 方法通过 HTTP POST 请求从服务器载入数据。
语法:jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
参数描述:url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType 可选。规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)。
其实该函数是简写的 Ajax 函数,等价于:
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
*/
function postMethod() {
$.post("/ajax_test/managerInfo", {
"managerId" : "postMethod_45456",
"managerName" : "postMethod_unj"
}, function(data, textStatus, jqXHR) {//只有在返回成功时才会执行该function
alert('成功');
$("#name").text("managerName:");
$("#nameVal").text(data);
});
}
/*
定义和用法
get() 方法通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
语法:$(selector).get(url,data,success(response,status,xhr),dataType)
参数描述:
url 必需。规定将请求发送的哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
success(response,status,xhr) 可选。规定当请求成功时运行的函数。
dataType 可选。规定预计的服务器响应的数据类型。
额外的参数:
response - 包含来自请求的结果数据
status - 包含请求的状态
xhr - 包含 XMLHttpRequest 对象
其实该函数是简写的 Ajax 函数,等价于:
$.ajax({
type:'get',
url: url,
data: data,
success: success,
dataType: dataType
});
*/
function getMethod() {
$.get("/ajax_test/managerInfo", {
"managerId" : "postMethod_45456",
"managerName" : "postMethod_unj"
}, function(response, status, xhr) {//只有在返回成功时才会执行该function
$("#name").text("managerName:");
$("#nameVal").text(response);
});
}
/**
ajax提交表单
*/
function ajaxForm() {
var formParam = $("#myForm").serialize();//序列化表格内容为字符串
$.ajax({
type : 'post',
url : '/ajax_test/formServlet',
data : formParam,
async:true,
cache:false,
dataType:'json',
success : function(data) {
alert('ok');
alert(data);
},
error : function(data) {
alert('error');
$("#userInfosss").text('2');
$("#userInfosss").html('2');
$("#userInfosss").val('2');
alert(data);
}
});
}
</script>
</head>
<body>
<h1>详情页面</h1>
<div
style="border: 1px solid black; width: 350px; height: 150px; margin: 5px;">
<span class="left" id="userId">userId:</span> <span class="right"
id="userIdVal">${sessionScope.user1.userId }</span><br> <span
class="left" id="name">name:</span><span class="right" id="nameVal">
${sessionScope.user1.name }</span><br> <span class="left">age:</span><span
class="right"> ${sessionScope.user1.age }</span><br> <span
class="left">address:</span><span class="right">${sessionScope.user1.address
}</span><br> <span class="left">birthday:</span><span class="right">
${sessionScope.user1.birthday }</span><br>
</div>
<hr>
<div
style="border: 1px solid green; width: 300px; height: 400px; float: left; margin: 5px;">
<h1 style="color: blue">jquery ajax 请求</h1>
<h2>post 请求</h2>
<ul>
<li><button οnclick="loadMethod();">load方法</button></li>
<li><button οnclick="postMethod();">post方法</button></li>
<li><button οnclick="ajaxPostMethod();">ajax方法</button></li>
</ul>
<h2>get 请求</h2>
<ul>
<li><button οnclick="getMethod();">get方法</button></li>
<li><button οnclick="ajaxGetMethod();">ajax方法</button></li>
</ul>
</div>
<div
style="border: 1px dotted red; width: 300px; height: 400px; float: left; margin: 5px;">
<h1 style="color: blue">js ajax 请求</h1>
<h2>post 请求</h2>
<ul>
<li><button οnclick="javascript:void(0);">load方法</button></li>
<li><button οnclick="javascript:void(0);">post方法</button></li>
<li><button οnclick="javascript:void(0);">ajax方法</button></li>
</ul>
<h2>get 请求</h2>
<ul>
<li><button οnclick="javascript:void(0);">get方法</button></li>
<li><button οnclick="javascript:void(0);">ajax方法</button></li>
</ul>
</div>
<div>
<h1>form请求</h1>
<form id="myForm" method="post">
<span>userName:</span> <span> <input type="text"
name="userName" value="真的很沉默">
</span> <br> <span>age:</span><span> <input type="text"
name="age" value="21">
</span><br> <span>address:</span><span> <input type="text"
name="address" value="gNroad">
</span><br> <span>birthday:</span><span> <input type="text"
name="birthday" value="19920126">
</span><br>
<span><input type="submit" value="跳转注册"> </span>
<span><button οnclick="ajaxForm();">ajax注册</button></span>
</form>
</div>
<div id="userInfosss">fds</div>
</body>
</html>