使用原生ajax异步加载数据

来源：互联网发布：java sqlserver select 编辑：程序博客网时间：2024/04/30 03:41

使用原生Ajax异步加载数据

前台代码

index.jsp

<span style="color:#3333ff;"><%@ 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></head><script type="text/javascript" src="./ajax.js"></script><body><form name="myForm"><input type="button" value="现在时间" onclick="ajaxFunction();"></form></body></html></span>

ajax.js代码

<span style="color:#3366ff;"><span style="font-size:14px;">function getxmlHttp(){var xmlHttp;  try {// Firefox, Opera 8.0+, SafarixmlHttp = new XMLHttpRequest();} catch (e) {// Internet Explorertry {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {alert("您的浏览器不支持AJAX！");return false;}}}return xmlHttp;}function ajaxFunction() {    var xmlHttp = getxmlHttp();  xmlHttp.onreadystatechange = function() {         //回调函数if (xmlHttp.readyState == 4) {if(xmlHttp.status == 200 || xmlHttp == 304){var data = xmlHttp.responseText;           //返回信息alert(data);}}};xmlHttp.open("post", "Deal?a=3&&time="+new Date().toString(), true);//post方法独有，请求向服务器发送数据，数据已经符合url编码xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlHttp.send("b=5");              //发送数据，当没有时为null }</span></span>

Deal.java (servlet类)

package cn;import java.io.IOException;import java.io.PrintWriter;import java.util.Date;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class Deal extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.setContentType("text/html");response.setContentType("text/html;charset=UTF-8");PrintWriter writer = response.getWriter();System.out.println("a="+request.getParameter("a"));System.out.println("b="+request.getParameter("b"));writer.write(new Date().getTime()+"get方法");}protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.setContentType("text/html");response.setContentType("text/html;charset=UTF-8");PrintWriter writer = response.getWriter();System.out.println("a="+request.getParameter("a"));System.out.println("b="+request.getParameter("b"));writer.write(new Date().toString()+"post方法");}}

web.xml 代码

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"><welcome-file-list><welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>index.jsp</welcome-file></welcome-file-list><servlet><servlet-name>Deal</servlet-name><servlet-class>cn.Deal</servlet-class></servlet><servlet-mapping><servlet-name>Deal</servlet-name><url-pattern>/Deal</url-pattern></servlet-mapping></web-app>

总结：ajax的入门代码，本文使用的是post提交方式，读者可以使用get方式提交，但需要把一下代码删除

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

0 0