dpn525
- 浏览: 288017 次
- 性别:
- 来自: 哈尔滨
-
文章分类
最新评论
-
netfengxia：
这个是Mybatis哦. 是一个ORM框架, 这里展示的是My ...
mybatis merge 语句使用 -
MILLETS：
好像没有效果
jsp页面打印、预览、设置实现方案 -
evic520：
mysql有merge into的用法？是不是标题错了 楼主？ ...
mybatis merge 语句使用 -
winner_king：
解决问题
pager-taglib分页中文乱码问题 -
Renee涟漪：
...
SVN搭建
一、Ajax介绍：
- Ajax是在网络浏览器（客户端）和服务器之间传送或接受数据的技术。
- Ajax结合了Java技术、XML以及JavaScript等编程技术，它实际上是几种技术，合在一起组成的一个功能强大的新技术。
- Ajax可以通过异步的方式，向后端服务器发送请求、响应返回结果，对页面内容进行部分的更新，而不再需要每次由用户通过改变链接地址，对整个页面进行更新。
二、Ajax好处：
传统的网络应用程序会将输入的信息提交给服务器（使用HTML表单），在服务器通过代码后，将会把一个全新的完整的页面传送给用户，由于用户每次提交输入信息的时候服务器都将传回一个新的页面，传统的网络应用程序通常运行缓慢且使用不便，使用AJAX，整个网页就可以于服务器之间局部的发送或者接收数据。
三、同步、异步：
- 同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事。
- 异步: 请求通过事件触发->服务器处理（这时候浏览器仍然可以作其他事情）->处理完毕。
- 举个例子：
- 同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。
- 异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。
- 打电话是同步 发消息是异步。
四、XMLHttpRequest对象：
- XMLHttp：是一套可以在javascript、vbscript、jscript等脚本语言中通过http协议传送或者接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
- XMLHttpRequest是XMLHttp组建的对象。
- Ajax的无刷新更新页面这一特点主要得益于XMLHttp组建的XMLHttpRequest对象，这样就可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都整个刷新界面，带来不必要的数据处理。
五、实例：
1、传统方式客端与服务器传输数据:
myHtml.jsp
<%@ page contentType="text/html; charset=utf-8" language="java" %>
<%@page import="java.net.URLDecoder"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String message="";
if(request.getParameter("message")!=null && !request.getParameter("message").equals(""))
{
message=new String(request.getParameter("message").getBytes("ISO-8859-1"),"utf8");
}
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>公众AJAX教程-1</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type ="text/javascript" language ="javascript" >
function sendRequest(url)
{
form1.action=url;
form1.submit();
}
</script>
</head>
<body>
<form name="form1" id="form1" method="get" action="">
<dir>
<%=message %>
</dir>
<input id="button1" type="button" value="获取数据" onclick ="sendRequest('htmlServer.jsp')"/>
</form>
</body>
</html>
htmlServer.jsp
<%@ page contentType="text/html; charset=utf-8" language="java" %>
<%@page import="java.net.URLEncoder"%>
<%
//response.sendRedirect("myHtml.jsp?message=html调用成功");这种方式传递中文会出现乱码
response.sendRedirect("myHtml.jsp?message="+URLEncoder.encode("html调用成功","utf8"));
%>
2、Ajax方式客端与服务器传输数据:
myAjax.jsp
<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>公众AJAX教程-1</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type ="text/javascript" language ="javascript" >
var XMLHttpReq=false; //定义变量，用来创建xmlhttprequest对象
function creatXMLHttpRequest() // 创建xmlhttprequest
{
if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本)，用xmlhttprequest对象创建
{
XMLHttpReq=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
{
try
{
XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{}
}
}
}
function sendRequest(url) // 发送请求函数
{
creatXMLHttpRequest();
if(XMLHttpReq) //成功创建xmlhttprequest
{
XMLHttpReq.open("post",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步)
XMLHttpReq.onreadystatechange = callback; //指定回调函数
XMLHttpReq.send(null); //发送请求
}
}
function callback() //回调函数，对服务端的响应处理，监视response状态
{
if(XMLHttpReq.readystate==4) //请求状态为4表示成功
{
if(XMLHttpReq.status==200) //http状态200表示OK
{
Dispaly(); //所有状态成功，执行此函数，显示数据
}
else //http返回状态失败
{
alert("服务端返回状态" + XMLHttpReq.statusText);
}
}
else //请求状态还没有成功，页面等待
{
document .getElementById ("div1").innerHTML ="数据加载中";
}
}
function Dispaly() //接受服务端返回的数据，对其进行显示
{
document .getElementById ("div1").innerHTML =XMLHttpReq.responseText;
}
</script>
</head>
<body>
<div id="div1"></div>
<input id="button1" type="button" value="获取数据" onclick ="sendRequest('ajaxServer.jsp')"/>
</body>
</html>
ajaxServer.jsp
<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%
out.write("AJAX调用成功");
%>
3、传统ajax方式-用户登录实例:
login.jsp
<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>公众AJAX教程-2</title>
<style type="text/css">
<style type="text/css">
<!--
body {
margin: 0px;
padding:0px;
background:#494051 url(<%=path%>/lesson_2/images/jifenbg.jpg) repeat-x;
font-size:12px;
}
.jifendlroot {
width: 488px;
margin-top: 310px;
margin-right: auto;
margin-left: auto;
}
.jifendl01 {
background: url(<%=path%>/lesson_2/images/jifen02.jpg);
height:181px;
padding-left:176px;
}
.jifendl02 {
margin-top: 20px;
}
.jifendl02left {
float: left;
width: 50px;
padding-top:4px;
}
.input01 {
width:149px;
height:21px;
border:1px solid #A8ACAB;
}
.jifendl02right {
float: left;
width:153px;
}
.clear {
clear:both;
}
.jifendl03 {
text-align: right;
width: 270px;
margin-top:20px;
}
-->
</style>
<script type ="text/javascript" language ="javascript" >
var XMLHttpReq=false; //定义变量，用来创建xmlhttprequest对象
function creatXMLHttpRequest() // 创建xmlhttprequest
{
if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本)，用xmlhttprequest对象创建
{
XMLHttpReq=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
{
try
{
XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{}
}
}
}
function checkdata() // 发送请求函数
{
var userName=document.getElementById("userName");//用户名
var password=document.getElementById("password");//密码
if (userName.value.length==0)
{
alert('用户名不能为空！');
userName.focus();
return false;
}
if (password.value.length==0)
{
alert('密码为空！');
password.focus();
return false;
}
var url="loginAjax.jsp?userName="+userName.value+"&password="+password.value;
creatXMLHttpRequest();
if(XMLHttpReq) //成功创建xmlhttprequest
{
XMLHttpReq.open("post",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步)
XMLHttpReq.onreadystatechange = callback; //指定回调函数
XMLHttpReq.send(null); //发送请求
}
}
function callback() //回调函数，对服务端的响应处理，监视response状态
{
if(XMLHttpReq.readystate==4) //请求状态为4表示成功
{
if(XMLHttpReq.status==200) //http状态200表示OK
{
var flag=XMLHttpReq.responseText;
if(flag.replace(/^\s*|\s*$/g, '')=="OK")
{
form1.submit();
}
if(flag.replace(/^\s*|\s*$/g, '')=="NO")
{
alert("用户名不存在或密码不正确");
}
}
else //http返回状态失败
{
alert("服务端返回状态" + XMLHttpReq.statusText);
}
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="loginOK.jsp">
<div class="jifendlroot" >
<div>
<img src="<%=path%>/lesson_2/images/jifen01.jpg" width="488" height="74" />
</div>
<div class="jifendl01">
<div class="jifendl02">
<div class="jifendl02left">
<img src="<%=path%>/lesson_2/images/jifen03.jpg" width="42" height="16" />
</div>
<div class="jifendl02right">
<input name="userName" id="userName" type="text" class="input01" />
</div>
<div class="clear"></div>
</div>
<div class="jifendl02">
<div class="jifendl02left">
<img src="<%=path%>/lesson_2/images/jifen04.jpg" width="42" height="16" />
</div>
<div class="jifendl02right">
<input name="password" id="password" type="password" class="input01" />
</div>
<div class="clear"></div>
</div>
<div class="jifendl03">
<INPUT type="button" value="登陆" name="button1" id="button1" onclick="checkdata()" />
<!-- 错误的方式
<INPUT type=image src="<%=path%>/lesson_2/images/jifen05.jpg" width="105" height="36" border=0
name=imageField onclick="checkdata(this);"/>
-->
</div>
</div>
</div>
</form>
</body>
</html>
loginAjax.jsp
<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%
if(request.getParameter("userName").equals("apple")&&request.getParameter("password").equals("apple"))
{
out.write("OK");
}
else
{
out.write("NO");
}
%>
loginOK.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'loginOK.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
欢迎使用无任何内容管理系统！^_^ <br>
</body>
</html>
4、jquery方式-用户注册实例（这里运用了jquery验证框架）:
register.jsp
<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ request.getContextPath() + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>公众AJAX教程-3:用户登录/注册</title>
<link href="<%=path%>/lesson_3/css/css.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="<%=path%>/lesson_3/js/jquery-1.4.2.js" charset="UTF-8"></script>
<script type="text/javascript"
src="<%=path%>/lesson_3/js/formValidator.js" charset="UTF-8"></script>
<script type="text/javascript"
src="<%=path%>/lesson_3/js/formValidatorRegex.js" charset="UTF-8"></script>
<link type="text/css" rel="stylesheet"
href="<%=path%>/lesson_3/css/validator.css"></link>
<script type="text/javascript">
$(document).ready(function(){
$.formValidator.initConfig({formid:"form1",onerror:function(msg){alert(msg)},onsuccess:function(){return true;}});
//$("#userName").formValidator({onshow:"请输入用户名",onfocus:"用户名至少1个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputValidator({min:1,max:10,onerror:"你输入的用户名非法,请确认"}).regexValidator({regexp:"username",datatype:"enum",onerror:"用户名格式不正确"})
//.ajaxValidator({
// type : "get",
// url : "registerAjax.jsp",
//datatype : "text",
//success : function(result){
// if( result.replace(/^\s*|\s*$/g, '') == "notexsits" )
// {
// return true;
// }
// else
// {
// return false;
// }
//},
//buttons: $("#button"),
//error: function(){alert("服务器没有返回数据，可能服务器忙，请重试");},
//onerror : "该用户名不可用，请更换用户名",
//onwait : "正在对用户名进行合法性校验，请稍候..."
//});
//密码验证
$("#password1").formValidator({onshow:"请输入密码",onfocus:"密码不能为空",oncorrect:"密码合法"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"密码两边不能有空符号"},onerror:"密码不能为空,请确认"});
$("#password2").formValidator({onshow:"请输入重复密码",onfocus:"两次密码必须一致",oncorrect:"密码一致"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"重复密码两边不能有空符号"},onerror:"重复密码不能为空,请确认"}).compareValidator({desid:"password1",operateor:"=",onerror:"2次密码不一致,请确认"});
//电子邮件验证
$("#email").formValidator({onshow:"请输入邮箱",onfocus:"邮箱输入正确了才能离开焦点",oncorrect:"邮箱正确",defaultvalue:"@",forcevalid:true}).inputValidator({min:1,max:100,onerror:"你输入的邮箱长度非法,请确认"}).regexValidator({regexp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"你输入的邮箱格式不正确"});
})
function isUserName()
{
$.get
(
'registerAjax.jsp',
{
userName: $('#userName').val()//参数一
},
function(result) //回调函数
{
var flag=result;
if(result.replace(/^\s*|\s*$/g, '')=="exsits")
{
//输出结果
$("#userName").val('');
$("#userNameTip").text('此用户已被使用！');
return false;
}
if(result.replace(/^\s*|\s*$/g, '')=="notexsits")
{
if( $("#userName").val()=="")
{
$("#userNameTip").text('请输入用户名');
}
else
{
$("#userNameTip").text('此用户已可以使用');
}
return true;
}
},
"text" //返回类型
);
}
</script>
</head>
<body>
<form name="form1" id="form1" action="registerOK.jsp" method="post">
<div class="main">
<!--hearder-->
<div>
<iframe id="copyright1" name="copyright1" marginwidth="0"
marginheight="0" src="top.jsp" frameborder="0" width="965"
scrolling="no" height="113" target="contents"></iframe>
</div>
<!--main-->
<div class="login_right">
<div class="f login_right_1">
<span class="f login_right_2">注册</span><span
class="f login_right_3">您是新用户？ 请您注册</span>
<div class="clear"></div>
</div>
<div class="login_right_4 f">
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="140">
</td>
<td width="610">
</td>
</tr>
<tr>
<td height="35" align="right">
用户类型：
</td>
<td>
<input type="radio" name="radiobutton" value="radiobutton" />
个人用户
<input type="radio" name="radiobutton" value="radiobutton" />
企业用户
<input type="radio" name="radiobutton" value="radiobutton" />
校园用户
</td>
</tr>
<tr>
<td height="35" align="right">
用户名：
</td>
<td>
<!--
<input name="userName" id="userName" type="text" class="bor_1" />
<span id="userNameTip">请输入用户名</span>
-->
<input name="userName" id="userName" onchange="isUserName()"
type="text" class="bor_1" />
<span id="userNameTip">请输入用户名</span>
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
</td>
</tr>
<tr>
<td height="35" align="right">
输入密码：
</td>
<td>
<input name="password1" id="password1" type="password"
class="bor_1" />
<span id="password1Tip"></span>
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
</td>
</tr>
<tr>
<td height="35" align="right">
再次输入密码：
</td>
<td>
<input name="password2" id="password2" type="password"
class="bor_1" />
<span id="password2Tip"></span>
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
</td>
</tr>
<tr>
<td height="35" align="right">
邮箱：
</td>
<td>
<input name="email" id="email" type="text" class="bor_1" />
<span id="emailTip"></span>
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
</td>
</tr>
<tr>
<td height="35" align="right">
验证码：
</td>
<td>
<input name="textfield424" type="text" class="bor_1" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<img src="<%=path%>/lesson_3/images/index_28.gif" width="180"
height="40" />
</td>
</tr>
<tr>
<td height="45">
</td>
<td>
<label>
<input type="checkbox" name="checkbox3" value="checkbox" />
</label>
我以同意
</td>
</tr>
<tr>
<td>
</td>
<td>
<INPUT type=image src="<%=path%>/lesson_3/images/index_31.gif"/>
</td>
</tr>
</table>
</div>
<div class="login_right_5 f">
<img src="<%=path%>/lesson_3/images/index_34.gif" />
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<!--bottom-->
<div>
<iframe id="copyright1" name="copyright1" marginwidth="0"
marginheight="0" src="bottom.jsp" frameborder="0" width="965"
scrolling="no" height="55" target="contents"></iframe>
</div>
<div class="clear"></div>
</div>
</form>
</body>
</html>
registerAjax.jsp
<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%
if(request.getParameter("userName").equals("apple"))
{
out.write("exsits");
}
else
{
out.write("notexsits");
}
%>
registerOK.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'loginOK.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
欢迎使用无任何内容管理系统！^_^ <br>
</body>
</html>
bottom.jsp
<%@ page contentType="text/html; charset=utf-8" language="java"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>bottom页</title> <link href="<%=path%>/lesson_3/css/boxes.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="main"> <DIV class=wrapper> <DIV class=footer-container> <DIV class=footer> <UL class=one> <LI> <A href="http://www.wodehaoma.com/about-us">关于我们</A> </LI> <LI> <A href="http://www.wodehaoma.com/contacts">联系我们</A> </LI> <LI> <A href="http://www.wodehaoma.com/friendly-link">友情链接</A> </LI> <LI> <A href="http://www.wodehaoma.com/catalog/seo_sitemap/category">网站地图</A> </LI> <LI class=last> <A href="http://www.wodehaoma.com/contacts">投诉与建议</A> </LI> </UL> <DIV class=copyright> 黑龙江公众数码网络有限公司 版权所有 <A href="http://www.miibeian.gov.cn/" target=_blank>黑B2-20080993</A> 客服热线：0451-53604732 </DIV> </DIV> <div align="center"> <IMG src="<%=path%>/lesson_3/images/tongji.gif" width="50" height="11"> </div> <div class="clear"></div> </div> </body> </html>
top.jsp
<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>top页</title>
<link href="<%=path%>/lesson_3/css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<!--hearder-->
<div>
<div class="logo"><img src="<%=path%>/lesson_3/images/logo.gif" /></div>
<div class="nav">
<div class="nav_1"><ul><li>欢迎您访问我的号码网!</li>
<li>登录 | 注册 | <a href="#">我的帐户</a> | 帮助</li>
</ul></div>
<div>
<div class="nav_2"><img src="<%=path%>/lesson_3/images/an-1.gif" /></div>
<div class="nav_2"><img src="<%=path%>/lesson_3/images/an-2.gif" /></div>
<div class="nav_2"><img src="<%=path%>/lesson_3/images/an-3.gif" /></div>
<div class="nav_3">订购热线：0451－5360－4732</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div>
<div class="left">
<div class="m_b_1 left_1"><img src="<%=path%>/lesson_3/images/index_25.gif" width="220" height="40" /></div>
</div>
<div class="right_sid">
<div class="right_sid_1 m_b_5">
<table width="740" height="40" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="16"> </td>
<td width="53">搜 索：</td>
<td width="402"><select name="select">
</select>
<input name="textfield" type="text" class="b_1" /></td>
<td width="66"><img src="<%=path%>/lesson_3/images/btn_mini_search.gif" width="20" height="20" /></td>
<td width="98" class="c_6">购物车</td>
<td width="105" class="c_6">我的订单</td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>
<!--main-->
<div>
<!--left-->
<!--right-->
<div class="clear"></div>
</div>
<!--bottom-->
<div class="clear"></div>
</div>
</body>
</html>
五、jquery-ajax常用方法说明：
1、 jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求：
参数：
- url (String) : 发送请求的URL地址.
- data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。
- callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
- 返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等。
2、jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求（同上）
分享到：
发表评论
-
jquery判断方法是否存在
2014-03-21 13:45 822if($.isFunction(window.checkho ... -
jquery+ajax+后台级联
2013-11-26 16:21 943$(document).ready(function(){ ... -
jquery.jmpopups弹出层改造成post提交
2013-03-22 09:01 2437/** * jmpopups * Copyright ... -
jquery判断对象是否存在
2013-03-20 11:03 799if($("#"+id)[0]) 或者 ... -
jquery+jstl实际应用
2012-11-28 13:40 1994<%@ page language="java ... -
jqueryapi
2012-05-18 17:20 931jquery1.6api -
jquery--checkbox全选
2012-05-17 14:47 890//挂全选事件-系统权限 $('#sysPowerAll' ... -
jquery css设置
2012-05-16 14:30 936和css有关的方法有这些：1、.addClass( ... -
jquery树
2012-05-04 10:09 9111 -
弹出层jquery.jmpopups
2011-11-14 17:21 1703可以弹出多层，引用 <script type=&quo ... -
jquery 加载完图片，获取大小
2011-11-07 16:54 2637//图片插件 $(document).ready(funct ... -
jquery获取图片尺寸
2011-11-04 17:19 23565例如 <img src="bag001.jpg ... -
JQuery判断radio是否选中，获取选中值
2011-11-04 15:42 1055/*---------------------------JQ ... -
jquery ajax json 模态对话框（转载）
2011-05-17 09:37 1628service层代码代码 public JSONArr ... -
jquery实际项目应用
2011-04-02 14:36 1523<%@ page contentType=&quo ... -
jQuery formValidator表单验证插件常见问题
2011-04-01 11:01 6641如何实现一个控件，根据不同的情况，实现不同的控制？ 一个页 ... -
jquery设置select控件的selected属性
2011-03-31 16:53 1739$("#selectID option[val ... -
jquery设置元素的readonly和disabled
2011-03-31 16:33 1058Jquery的api中提供了对元素应用disabled和r ... -
（转）自动补全
2010-12-07 09:18 1894Servlet代码 /** * ... -
jQuery Ajax 实例 全解析 （转载）
2010-10-28 22:43 996jQuery Ajax 实例 全解析 ...
相关推荐
AJAX视频教程-冯威和源程序代码 ppt 里面既有视频 也有源代码，需要的可以下载看看，绝不骗人，我分享的是百度云链接，不会失效
ajax教程 本资源是下载自w3school的，因为是把整个网站下载下来了，所以ajax，javascript等等都在这里面 其他的几个资源只要标注有w3school的，都是这个资源，用为甚么用多个标签，就是希望大家都能找到这个资源 ...
**Ajax教程** Ajax，全称为"Asynchronous JavaScript and XML"（异步JavaScript和XML），是一种创建动态网页的技术。它允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容，极大地提升了用户...
1. **基础教程**：初学者可以通过在线教程和书籍学习Ajax的基本使用，如MDN的Ajax教程。 2. **框架与库**：jQuery、Vue.js、React等库提供了更方便的Ajax操作接口。 3. **高级应用**：了解Ajax的错误处理、缓存策略...
通过学习"Ajax-mootools-doc教程--手册.rar"中的内容，开发者不仅可以掌握Ajax的基础知识，还能深入理解MooTools库的使用，提高JavaScript开发效率，尤其在创建动态、响应式的Web应用程序方面。这份资料对初学者和有...
**标题：“AJAX基础教程－5 Ajax Validate”** 在学习Web开发时，AJAX（Asynchronous JavaScript and XML）技术是一个重要的组成部分，它允许我们在不刷新整个页面的情况下与服务器进行交互，提升用户体验。本教程...
**AJAX基础教程－9 AutoComplete** 在Web开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛用于实现页面的无刷新更新，提供更好的用户体验。本教程将聚焦于一个常见的应用场景——AutoComplete功能，它...
综上所述，"重构-Ajax 教程"旨在教授如何将Ajax技术应用于网页重构，提高用户体验，同时也涵盖了XHTML和CSS的基础知识。通过学习，开发者可以掌握如何使用Ajax进行异步数据交换，以及如何结合XHTML和CSS优化网页结构...
Ajax-Codeigniter-3-Ajax-Form-Submission.zip,“codeigniter 3 ajax表单提交和验证教程”一集的源代码,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建...
- **ajax教程.chm**：另一个AJAX教程，可能包含更多的示例和实践指导。 - **AJAX教程(威从3school整理出来的).doc**：可能是从知名在线教程网站3school整理的教程，覆盖了AJAX的各个方面。 - **1_081118111145....
ZK最新版中文教程.ZK is the most proven Ajax + Mobile framework available, designed to maximize an enterprise’s operational efficiency and minimize development time and cost With groundbreaking ...
**Ajax 教程** ...- 《AJAX开发简略[1].part1-5.rar》：可能是某篇关于Ajax开发的系列教程，分多个部分详细讲解Ajax的各个方面。 通过这些资源，你可以全面地了解和掌握Ajax技术，提升Web开发能力。
Ajax-magento2-catalog-infinite-scroll.zip,免费的Magento 2扩展，为目录添加无限滚动功能（通过AJAX实现）编码教程,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。...
从给定的文件标题“传智AJAX教程（1-31全）”以及描述“传智AJAX教程（1-31全）里面是下载地址”，我们可以推断出这是一套全面覆盖AJAX技术的教程，旨在为学习者提供从基础到高级的AJAX知识。AJAX，即Asynchronous ...
在描述中提到了一个博文链接：“https://wfl8015.iteye.com/blog/310961”，这可能是一个关于如何使用龙博AJAX框架的教程或者开发者的经验分享，包括使用案例、技巧和可能遇到的问题解决方法。遗憾的是，由于我们...