/index.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>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn01");
btn.onclick=function(){
//创建对象
var xhr=new XMLHttpRequest();
//设置参数
var method="post";
var url="${pageContext.request.contextPath}/AServlet"; xhr.open(method,url);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
xhr.send("username=liuchuan");
//接受响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var div1=document.getElementById("div1");
var data=xhr.responseText;
div1.innerHTML += data;
}
}
} }
</script>
</head>
<body> <button id="btn01">电风扇</button>
<div id="div1"> </div>
</body>
</html>

  /e.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>
<script type="text/javascript" src="/web-ajax/js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn01").click(function(){
function callback(data) {
alert(data);
div1.innerHTML += data; }
$.get("${pageContext.request.contextPath}/AServlet?&t"+Math.random(),{"username":"zhangsan"},callback);
$("#div1").html(data);//加个随机数防止浏览器缓存
})
});
</script>
</head>
<body>
<button id="btn01">电风扇</button>
<div id="div1"> </div>
</body>
</html>

  /class AServlet

package com.neuedu.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet("/AServlet")
public class AServlet extends HttpServlet {
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("username");
System.out.println("幸福来敲门"+name);
response.getWriter().println("<h1>hello word!</h1>");
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }

  

AJAX小练习的更多相关文章

  1. 第一个ajax小demo

    第一个ajax小demo 文章来源:http://blog.csdn.net/magi1201/article/details/44569657

  2. AJAX 小实例(转摘)

    最近老总提了一个小功能,在搜索网吧列表的时候加上网吧所属代理商这个条件,原有的搜索条件是一个地区二级联动,现在需要根据不同的地区显示不同的代理商集合.即在触发地区下拉框的onchange事件时,代理商 ...

  3. 自定义ajax小工具以及使用

    function createXMLHttpRequest(){ try{ return new XMLHttpRequest(); }catch(e){ try{ return new Active ...

  4. AJAX小练习,防止以后忘记

    <div id="content"> <input id="btnShow" type="button" value=&q ...

  5. 封装一个自己的 Ajax小框架

    框架代码如下: // 使用封装方法的人只关心提供http的请求方法,url地址,数据,成功和失败的回调方法 // 类的构造定义,主要职责就是新建出 XMLHttpRequest 对象 var MyXM ...

  6. JavaScript实现拖拽预览,AJAX小文件上传

    本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件. <div  id="drop_area" style="bord ...

  7. ajax 小案例

    ajax 异步提交数据,实现无刷新提交表单 ajax.html <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  8. Fetching data with Ajax小例子

    ajax获取数据示例: 示例1 通过ajax获取txt文件里面的内容示例: <html> <head> <title>Ajax at work</title& ...

  9. 看到一个想收藏的的AJAX小列子

    用户登录的验证可以使用 form 表单提交,也可以使用 ajax 技术异步提交. AJAX 即 Asynchronous Javascript And XML(异步 JavaScript 和 XML) ...

  10. ajax 小练习

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

随机推荐

  1. NET Core + Angular 2

    ASP.NET Core + Angular 2 Template for Visual Studio 2017-01-11 08:45 by 小白哥哥, 2069 阅读, 19 评论, 收藏, 编辑 ...

  2. JAVA代码之斗地主发牌

    理解很好理解,关键是思路 按照斗地主的规则,完成洗牌发牌的动作: 具体规则: 1. 组装54张扑克牌 2. 将54张牌顺序打乱 3. 三个玩家参与游戏,三人交替摸牌,每人17张牌,最后三张留作底牌. ...

  3. java 实现 excel sheet 拷贝到另一个Excel文件中 poi

    public class CopyExcelSheetToAnotherExcelSheet { public static void main(String[] args) throws FileN ...

  4. Oracle关于TX锁的一个有趣的问题

    前阵子有一个网友在群里问了一个关于Oracle数据库的TX锁问题,问题原文如下: 请教一个问题: 两个会话执行不同的delete语句,结果都是删除同一个行.先执行的会话里where条件不加索引走全表扫 ...

  5. (转)!注意:PreTranslateMessage弹出框出错

    dlg.DoModal()截住了界面消息,所以返回时原来的pMsg的内容已经更改了,消息,窗口句柄都不在是if以前的值了,而且窗口句柄应该是对话框里的子窗口的句柄,所以调用CFrameWnd::Pre ...

  6. 转载《五大免费采集器哪个好,火车头,海纳,ET,三人行,狂人采集 》

    在目前的站长圈内,比较流行的采集工具有很多,但是总结起来,比较出名的免费的就这么几个:火车头,海纳,ET,三人行,狂人. 下面我们对这几款采集工具作一个简单的评比. 1.火车头 基本上人人都知道,那就 ...

  7. HDU 2639 Bone Collector II (01背包,第k解)

    题意: 数据是常规的01背包,但是求的不是最大容量限制下的最佳解,而是第k佳解. 思路: 有两种解法: 1)网上普遍用的O(V*K*N). 2)先用常规01背包的方法求出背包容量限制下能装的最大价值m ...

  8. C、C++、C#中struct的简单比较

    比较这三者是因为C.C++.C#这三者存在着一定的血缘关系,而他们三者都有的struct却有很大的不同. 功能 C中的struct是最简单的.只能有成员变量而不能有成员函数. C++和C#中都支持,而 ...

  9. UVALive 4670 Dominating Patterns (AC自动机)

    AC自动机的裸题.学了kmp和Trie以后不难看懂. 有一些变化,比如0的定义和f的指向,和建立失配边,以及多了后缀连接数组last.没有试过把失配边直接当成普通边(一开始还是先这样写吧). #inc ...

  10. UVA 536 TreeRocvery 树重建 (递归)

    根据先序历遍和中序历遍输出后序历遍,并不需要真的建树,直接递归解决 #include<cstdio> #include<cstring> ; char preOrder[N]; ...