使用原生ajax异步返回json数据

前端之家收集整理的这篇文章主要介绍了使用原生ajax异步返回json数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用原生ajax异步返回json数据

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

ajax.js
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;
				var dataObj = eval("("+data+")");
				for(var i = 0;i<dataObj.length;i++){
					alert(dataObj[i].name);
				}
				
			}	
		}
	};

	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");
 }




Deal.java

package cn;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JsonConfig;

public class Deal extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {

	}

	protected void doPost(HttpServletRequest request,IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter writer = response.getWriter();
		List<Province> list = new ArrayList<Province>();
		Province p1 = new Province(1,"广东省");
		Province p2 = new Province(2,"辽宁省");
		Province p3 = new Province(3,"山东省");
		list.add(p1);
		list.add(p2);
		list.add(p3);
		JsonConfig config = new JsonConfig();
		config.setExcludes(new String[]{"id"}); //不用转化的字段          
		JSONArray json = JSONArray.fromObject(list,config);
		System.out.println(json.toString());
		writer.write(json.toString());
	}

}

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>

实体bean
Province.java

package cn;

public class Province {

	private int id;
	private String name;
	
	public Province() {
		
	}
	
	public Province(int id,String name) {
		this.id = id;
		this.name = name;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
	
}

本文直接在servlet中生成数据,并且通过json包中的函数转化为json格式,异步传输到前台
注:需要引入json的包
原文链接:https://www.f2er.com/ajax/164365.html

猜你在找的Ajax相关文章