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 API Ajax 简介 Ajax 是“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）的缩写词，但事实上，Ajax 并非缩写词，而是由 Jesse James Gaiett 创造的名词。Ajax 是一种创建交互式...
**Ajax 简介** Ajax，全称为"Asynchronous JavaScript and XML"，是一种在无需刷新整个网页的情况下，能够更新部分网页内容的技术。它并不是一项全新的技术，而是由一系列成熟的技术组合而成，包括JavaScript、DOM...
Ajax简介与基本使用 Ajax简介 Ajax即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需...
主要内容有： Ajax简介以及工作原理， .net实现Ajax技术 Microsoft Ajax使用简介
**AJAX 简介** AJAX，全称为异步 JavaScript 和 XML，是2005年由Google引领的一种Web开发技术。它并不是一种全新的编程语言，而是利用现有的Web标准来构建更高效、更具交互性的网页应用。通过AJAX，开发者能够在...
在视频课程“Ajax与Atlas开发系列课程(1)：AJAX简介与web2.0”中，苏鹏老师将深入浅出地讲解AJAX的基本概念、工作原理以及如何使用Atlas框架进行开发，帮助学员掌握AJAX技术在Web 2.0应用中的实践方法。通过观看该...
ajax简介，简单介绍1、什么是AJAX 2、AJAX的优势与不足 3、AJAX的关键技术
大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
**WEB开发之AJAX简介** AJAX，全称为Asynchronous JavaScript and XML，即异步JavaScript和XML。这种技术允许Web开发者在不刷新整个页面的情况下，只更新网页的特定部分，从而提高了用户体验，使得网页交互更加流畅...
**Ajax 简介** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术并非JavaScript的一种标准，而是由开发者创造的一个术语，用于描述一种利用...
本项目“用于Java应用程序的Ajax简介”就是一个使用NetBeans构建的示例项目，旨在帮助开发者快速理解和应用Ajax技术。** **在项目中，我们可能会看到以下关键组成部分：** 1. **HTML页面**：HTML文件是用户界面的...
### Ajax简介及核心技术解析 #### 一、引言 随着互联网技术的发展，用户对于Web应用的需求日益增长。从简单的信息浏览到复杂的交互式操作，Web技术也在不断进化以满足更高的用户体验标准。Ajax作为一项重要的Web...
Ajax简介学习的开始Ajax简介学习的开始Ajax简介学习的开始
Ajax（Asynchronous JavaScript and XML）技术是Web开发中的一种创新，它改变了传统的浏览器与服务器之间的交互方式，使得页面能够在不重新加载整个页面的情况下与服务器交换数据并局部更新内容。Ajax的核心在于利用...
### AJAX：将交互性和直观性带入Web应用 在当今数字化时代，Web应用程序与桌面应用程序并驾齐驱，各自在不同领域展现优势。然而，两者之间的功能与用户体验存在显著差异。桌面应用程序通常安装在本地计算机上，运行...
Ajax应用背景 二、Ajax概念 三、AJAX的处理流程 四、Ajax案例 五、演示 更丰富的“用户体验”，新的交互方式
**.Net Ajax 简介** .Net Ajax 是微软为实现 Web 2.0 应用程序而提供的技术框架，主要用于构建具有高度交互性和响应性的Web应用程序。它利用Ajax（Asynchronous JavaScript and XML）的核心概念，使得用户可以在不...
**AJAX（Asynchronous JavaScript and XML）** 是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。这一技术的核心在于JavaScript、XML以及浏览器提供的 XMLHttpRequest 对象。AJAX 的出现极大地提升了网页...
ajax简单技是个凡人暴风盾术及应用二房二公司的及其简单实例