ajax之get、post、send

向右看齐 2022-08-24 01:27 129阅读 0赞

这是ajax请求提交页面：

<%@ 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>ajax获取数据</title>
    <script type="text/javascript">
    function loadName(){
    	// 创建XMLHttpRequest
    	var XMLHttp;
    	// 判断浏览器内核是否支持XMLHttpRequest对象
    	if (window.XMLHttpRequest) {
    		XMLHttp = new XMLHttpRequest;
    	}else {
    		XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
    	}
    	
    	// 打印状态
    	alert("readyState状态："+XMLHttp.readyState+";status状态："+XMLHttp.status);
    	
    	// 当状态发生改变时就会调用onreadystatechange事件，重写onreadystatechange
    	XMLHttp.onreadystatechange = function() {
    		// 打印状态
    		alert("readyState状态："+XMLHttp.readyState+";status状态："+XMLHttp.status);
    		if(XMLHttp.readyState == 4 && XMLHttp.status == 200) {
    			// 获取字符串形式的响应数据
    			alert("XMLHttp.responseText:"+XMLHttp.responseText+";XMLHttp.responseXML:"+XMLHttp.responseXML);
    			document.getElementById("name").value = XMLHttp.responseText;
    		}
    	}
    	
    /* 	// 通过XMLHttp对象请求后台（GET方式）
    	// 规定请求的类型、url、是否异步处理
    	XMLHttp.open("get", "getAjaxName?name=李程&age=11", true);
    	// 将请求发送到服务器
    	XMLHttp.send(); */
    	
    /* 	// 通过XMLHttp对象请求后台（POST方式）
    	// 规定请求的类型、url、是否异步处理
    	XMLHttp.open("post", "getAjaxName?name=李程&age=11", true);
    	// 将请求发送到服务器
    	XMLHttp.send(); */
    	
     	// 通过XMLHttp对象请求后台（模拟HTML）
    	// 规定请求的类型、url、是否异步处理
    	XMLHttp.open("post", "getAjaxName", true);
    	// 设置头信息
    	XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    	// 将请求发送到服务器
    	XMLHttp.send("name=李程&age=11"); 
    }
    </script>
    </head>
    <body>
    <div align="center">
    <input type="button" οnclick="loadName()" value="Ajax获取数据">  <input type="text" id="name" value="" />
    </div>
    </body>
    </html>

这是处理ajax请求的servlet

package com.java1234.web;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class GetAjaxNameServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		this.doPost(request, response);
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// 设置编码
    		request.setCharacterEncoding("UTF-8");
    		// 接收参数
    		String name = request.getParameter("name");
    		String age = request.getParameter("age");
    		// 输出
    		System.out.println("name:"+name+"\nage:"+age);
    		
    		// 返回内容
    		// 设置返回类型
    		response.setContentType("text/html;charset=UTF-8");
    		// 创建输出流
    		PrintWriter out = response.getWriter();
    		// 输出
    		out.print("ajax返回文本");
    		// 刷新
    		out.flush();
    		// 关闭流
    		out.close();
    	}
    
    }

1.使用get方式请求后台时出现中文乱码，首先保证页面编码，和请求编码设置为utf-8。然后可以在tomcat的server.xml文件中

这句话后面加URIEncoding="UTF-8"，如下

2.将参数放到send中传到后台时，要在send之前设置头信息，语句为

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

否则后台接收不到参数。我开始在这句话中还设置了编码信息，但是后台接收不到参数值，去掉编码信息就可以接收了。