Ajax的get和post方法

AjaxAction.java

package action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class AjaxAction extends ActionSupport {

	private String name;
	private String pass;
	// 接受值在返回
	public void ajax1() throws Exception {
		System.out.println("=+++++++++++++++++++++");

		System.out.println("名字" + name + "密碼" + pass);
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html");

		response.setCharacterEncoding("UTF-8");

		PrintWriter out = response.getWriter();
		out.write("nija,你好" + name + pass);
		out.flush();
		out.close();
	}
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPass() {
		return pass;
	}

	public void setPass(String pass) {
		this.pass = pass;
	}
}

Struts.xml

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">


<struts>
  <action name="ajax1" class="action.AjaxAction" method="ajax1">
        
        </action>
    </package> 
 

</struts>

Text1.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<Meta http-equiv="pragma" content="no-cache">
<Meta http-equiv="cache-control" content="no-cache">
<Meta http-equiv="expires" content="0">
<Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<Meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
	//1.创建对象
	var xmlhttp = null;

	function createXMLHttp() {
		if (window.ActiveXObject) {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} else if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		}
		
	}
	//得到请求参数
	function queryString(){
		var name=document.getElementById("name").value;
		var pass=document.getElementById("pass").value;
		alert(name+pass);
		var queryStr="name="+name+"&pass="+pass;
		//编码问题的解决***************
		return encodeURI(queryStr);
	}
	function doRequestUsingGET() {
		createXMLHttp();
		//2.建立请求
       alert("---------------");
		xmlhttp.open("get","http://localhost:8080/helloAjax/ajax1?"+queryString(),true,"","");
		//3.接受相应
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
				var test = xmlhttp.responseText;
				 var div=document.getElementById("serverResponse");
				var node=document.createTextNode(test);
				div.appendChild(node); 
			    alert(test);
			}
		};

		//4.发送请求
		xmlhttp.send("");
	}
	
	
	function doRequestUsingPOST() {

		createXMLHttp();
		//2.建立请求
		xmlhttp.open("post","http://localhost:8080/helloAjax/ajax1","");
		//3.接受相应
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
				var test = xmlhttp.responseText;
				var div=document.getElementById("serverResponse");
				var node=document.createTextNode(test);
				div.appendChild(node);
			}
		};

		//4.发送请求
		xmlhttp.send(queryString());
	}	
</script>
</head>

<body>
	<h2>输入姓名和密码</h2>
	<form>
		<input type="text" id="name" /><br> 
		<input type="password" 	id="pass" />
	</form>
	<form>
		<input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
		<input type="button" value="POST" onclick="doRequestUsingPOST();" />
	</form>
	<div id="serverResponse"></div>
</body>
</html>

Ajax的get和post方法

相关文章