1. Ajax简介
1.1) Ajax是一种网页开发技术,(Asynchronous Javascript + XML)异步JavaScript和XML;
1.2) Ajax是异步交互,局部刷新;
1.3) Ajax能减少服务器压力;
1.4) Ajax能提高用户体验;
2. Ajax交互与传统交互比较
传统交互:网页整体刷新,服务器压力大,用户体验不好;
Ajax交互:局部刷新,服务器压力小,用户体验好;
web.xml
<servlet>
<servlet-name>getNameServlet</servlet-name>
<servlet-class>com.andrew.web.GetNameServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>getNameServlet</servlet-name>
<url-pattern>/getName</url-pattern>
</servlet-mapping>
GetAjaxNameServlet.java
package com.andrew.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class GetAjaxNameServlet extends HttpServlet{
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println("汤姆汉克斯");
out.flush();
out.close();
}
}
common.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>Insert title here</title>
<%
Object obj = application.getAttribute("count");
if (obj == null) {
Integer count = 1;
application.setAttribute("count",count);
} else {
Integer count = (Integer)obj;
count++;
application.setAttribute("count",count);
}
%>
</head>
<link href="css/slide.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript">
$(function(){
$("#focus").hover(function(){$("#focus-prev,#focus-next").show();},function(){$("#focus-prev,#focus-next").hide();});
$("#focus").slide({
mainCell:"#focus-bar-box ul",
targetCell:"#focus-title a",
titCell:"#focus-num a",
prevCell:"#focus-prev",
nextCell:"#focus-next",
effect:"left",
easing:"easeInOutCirc",
autoPlay:true,
delayTime:200
})
})
</script>
<body>
<div style="text-align: center;">
<div style="padding: 10px;"><input type="button" style="border: 1px solid red;" value="获取姓名" onclick="javascript:window.location='getName'"/> <input type="text" name="name" value="${name }" style="border-bottom: 1px solid red"/> 页面刷新次数:<font color="red">${count }</font></div>
</div>
<div id="focus">
<div class="hd">
<div class="focus-title" id="focus-title">
<a href="http://www.baidu.com"><span class="title">《王的女人》</span>于正版霸王别姬 陈乔恩变腹黑大战情敌袁姗姗</a>
<a href="http://www.baidu.com"><span class="title">《盲探》</span>刘德华、郑秀文、杜琪峰香港电影铁三角十年归来</a>
<a href="http://www.baidu.com"><span class="title">《爸爸去哪儿》</span>众星爸厨艺比拼犯难(2013-10-18期)</a>
<a href="http://www.baidu.com"><span class="title">《到爱的距离》</span>李晨张馨予谱写爱之终曲</a>
<a href="http://www.baidu.com"><span class="title">《天台》</span>周杰伦自导自演 传递超屌正能量</a>
</div>
<a class="hdicon" href="http://www.baidu.com"></a>
</div>
<div class="focus-bar-box" id="focus-bar-box">
<ul class="focus-bar">
<li><a href="http://www.baidu.com"><img src="images/01.jpg"></a></li>
<li><a href="http://www.baidu.com"><img src="images/02.jpg"></a></li>
<li><a href="http://www.baidu.com"><img src="images/03.jpg"></a></li>
<li><a href="http://www.baidu.com"><img src="images/04.jpg"></a></li>
<li><a href="http://www.baidu.com"><img src="images/05.jpg"></a></li>
</ul>
</div>
<a href="http://www.baidu.com" class="btn-prev" onclick="return false;" hidefocus="" id="focus-prev"></a>
<a href="http://www.baidu.com" class="btn-next" onclick="return false;" hidefocus="" id="focus-next"></a>
<div class="ft">
<div class="ftbg"></div>
<div id="focus-num" class="change">
<a class=""></a>
<a class=""></a>
<a class=""></a>
<a class=""></a>
<a class=""></a>
</div>
</div>
</div>
</body>
</html>
http://localhost:8080/HeadFirstAjaxJson/getName
页面图片会从头开始
分享到:
相关推荐
Ajax简介
Ajax技术地图 ajax 简介,ajax 架构
ajax简介
主要内容有: Ajax简介以及工作原理, .net实现Ajax技术 Microsoft Ajax使用简介
ajax简介(PPT)ppt Introduction to AJAX
大家都知道ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。
ajax简介,简单介绍1、什么是AJAX 2、AJAX的优势与不足 3、AJAX的关键技术
Ajax简介学习的开始Ajax简介学习的开始Ajax简介学习的开始
Ajax简介与基本使用
掌握 Ajax第 1 部分-Ajax 简介 (一起11部分)
WEB开发 之 AJAX 简介.docx
Ajax应用背景 二、Ajax概念 三、AJAX的处理流程 四、Ajax案例 五、演示 更丰富的“用户体验”,新的交互方式
Ajax简介属性介绍操作实例及其源码[定义].pdf
ajax简单技是个凡人暴风盾术及应用二房二公司的及其简单实例
一个新的技术,事实上,它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起
主要是对AJAX的介绍,和一本相应的教程
AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。 AJAX 是一种在 2005 年由 Google 推广开来的编程模式。 AJAX 不是一种新的编程语言,而是一种使用现有标准的新方法。 通过 AJAX,你可以创建更...
关于.Net Ajax简介ppt稳当
掌握 Ajax第 1 部分-Ajax 简介 掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求 掌握 Ajax第 3 部分-Ajax 中的高级请求和响应 掌握 Ajax第 4 部分-利用 DOM 进行 Web 响应 掌握 Ajax第 5 部分-操纵 DOM ...