AJAX小练习
/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小练习的更多相关文章
- 第一个ajax小demo
第一个ajax小demo 文章来源:http://blog.csdn.net/magi1201/article/details/44569657
- AJAX 小实例（转摘）
最近老总提了一个小功能,在搜索网吧列表的时候加上网吧所属代理商这个条件,原有的搜索条件是一个地区二级联动,现在需要根据不同的地区显示不同的代理商集合.即在触发地区下拉框的onchange事件时,代理商 ...
- 自定义ajax小工具以及使用
function createXMLHttpRequest(){ try{ return new XMLHttpRequest(); }catch(e){ try{ return new Active ...
- AJAX小练习，防止以后忘记
<div id="content"> <input id="btnShow" type="button" value=&q ...
- 封装一个自己的 Ajax小框架
框架代码如下: // 使用封装方法的人只关心提供http的请求方法,url地址,数据,成功和失败的回调方法 // 类的构造定义,主要职责就是新建出 XMLHttpRequest 对象 var MyXM ...
- JavaScript实现拖拽预览，AJAX小文件上传
本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件. <div id="drop_area" style="bord ...
- ajax 小案例
ajax 异步提交数据,实现无刷新提交表单 ajax.html <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- Fetching data with Ajax小例子
ajax获取数据示例: 示例1 通过ajax获取txt文件里面的内容示例: <html> <head> <title>Ajax at work</title& ...
- 看到一个想收藏的的AJAX小列子
用户登录的验证可以使用 form 表单提交,也可以使用 ajax 技术异步提交. AJAX 即 Asynchronous Javascript And XML(异步 JavaScript 和 XML) ...
- ajax 小练习
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...
随机推荐
- Netty（4-1）factorial~总结
本节大纲: 1.Handler的执行顺序2.自定义二进制协议(每条完整数据的组成),从而解决拆包和粘包.3.通过为每个channel创建新的handler,从而解决即使handler中使用全局变量,也 ...
- PartTime_一些网站
1. http://www.sxsoft.com/ 貌似 搜搜"破解",无符合条件的结果 http://www.taskcity.com/ "智城",貌似 符合 ...
- 使用Spring Security OAuth2进行简单的单点登录
1.概述 在本教程中,我们将讨论如何使用Spring Security OAuth和Spring Boot实现SSO - 单点登录. 我们将使用三个单独的应用程序: 授权服务器 - 这是中央身份验证机 ...
- jQuery转盘插件rotate
css .rotate{ background:#aaa; padding:100px; position: relative; } .point { position: absolute; top: ...
- 由Cocos2d-x工程入口窥见代理模式
关于设计模式(Design Pattern),自从“四人帮”第一次在<Design Patterns: Elements of Reusable Object-Oriented Software ...
- npm在linux即mac下更新时报错
nam在linux即mac下需要更新到新版本:
- 2018.4.1 Ubuntu16.04 下配置Tomcat服务器以及设置dingshi启动
Tomcat自启动的设置技巧 以root用户登录系统: cd /etc/rc.d/init.d/ vi tomcat #!/bin/sh # # tomcat: Start/Stop/Restart ...
- 项目中遇到的bug
1. babel编译转换时发生了报错: BabelLoaderError: SyntaxError: Unexpected token babel预置的转换器是 babel-preset-es2015 ...
- Hbase 操作工具类
依赖jar <dependency> <groupId>org.apache.hbase</groupId> <artifactId>hbase-cli ...
- macbook secureCRT终端中文乱码的问题
最近mac用crt中文总是显示的是一串串问号, 而用自带的终端软件就不会出现乱码, 经过一番折腾暂时解决了这一问题, 方法如下: 1. 打开终端操作 sudo vim /etc/profile 在最后 ...