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小练习

最新文章

热门文章