使用原生ajax异步加载数据

发布时间：2020-12-16 00:21:26 所属栏目：百科来源：网络整理

导读：使用原生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/

使用原生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+,Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {

		// Internet Explorer
		try {
			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 stub
		response.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,IOException {
		// TODO Auto-generated method stub
		response.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");

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!