/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. GUI的最终选择 Tkinter(九)：事件

    Tkinter事件处理 Tkinter应用会花费大部分的时间在处理事件循环中(通过mainloop()方法进入),事件可以是触发的鼠标,键盘的操作,管理窗口触发的重绘事件(在多数情况下都是有用户间接引 ...

  2. CSS——三种页面引入方法

    目的:为了把样式和内容分开,并且使网页元素更加丰富,引入了CSS CSS页面引入有三种方式: 1)内联式:比较不常用,因为内容和样式仍然在一起,不方便.示例: <!DOCTYPE html> ...

  3. Windows和Ubuntu使用网线直连搭建局域网

    1.Windows下的配置:右键右下角的网络图标(或者右键网络→属性)→更改适配器设置→以太网→右键属性→TCP/IPv4→IP地址(192.168.1.3)→子网掩码(255.255.255.0)→ ...

  4. BeanCopier使用说明

    BeanCopier从名字可以看出了,是一个快捷的bean类复制工具类. 一 如何使用,我就直接丢代码了 public class BeanCopierTest { static SimpleDate ...

  5. WebStorm技巧-在安卓手机上运行Ionic程序

    打开菜单项 Run -> Run-   选择 Edit Configurations-   添加一个 PhoneGap/Cordova 配置项,命名如: Ionic Android, 并输入相关 ...

  6. autofac 注入生命周期

    创建实例方法 1.InstancePerDependency 对每一个依赖或每一次调用创建一个新的唯一的实例.这也是默认的创建实例的方式. 官方文档解释:Configure the component ...

  7. Hello World另类写法

    #include<iostream> #define _ using namespace std; #define __ int main() #define ___ { #define ...

  8. HDU 1124 Factorial （阶乘后缀0）

    题意: 给一个数n,返回其阶乘结果后缀有几个0. 思路: 首先将n个十进制数进行质因数分解,观察的得到只有2*5才会出现10.那么n!应含有min(2个数,5个数)个后缀0,明显5的个数必定比2少,所 ...

  9. python基础教程总结15——7 自定义电子公告板

    1. Python进行SQLite数据库操作 简单的介绍 SQLite数据库是一款非常小巧的嵌入式开源数据库软件,也就是说没有独立的维护进程,所有的维护都来自于程序本身.它是遵守ACID的关联式数据库 ...

  10. Codeforces Round #321 (Div. 2) C Kefa and Park（深搜）

    dfs一遍,维护当前连续遇到的喵的数量,然后剪枝,每个统计孩子数量判断是不是叶子结点. #include<bits/stdc++.h> using namespace std; ; int ...