用Ajax以GET或POST的方式来和服务器进行数据交互

最新推荐文章于 2022-07-21 22:53:28 发布

feilong1105

最新推荐文章于 2022-07-21 22:53:28 发布

阅读量1.9k

点赞数

文章标签： ajax 服务器 xmlhttprequest string input function

本文链接：https://blog.csdn.net/blogxiaofei/article/details/6762846

版权

目标：以异步方式实现两个整数的和：

在文本框中输入：113和110 在下方会显示这两个数的和：223

方式1：以GET方式请求：

客户端代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Ajax</title>
   
    <script type="text/javascript">
     /*
     * Ajax中的一个重要对象是:XMLHttpRequest
    */
    
    //声明一个空对象以接收XMLHttpRequest对象
    var xmlHttpRequest = null;
    
    function ajaxSubmit()
    {
    	if(window.activeXObject)//IE浏览器
    	{
    		xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    	}else if(window.XMLHttpRequest)//除IE意外的其他浏览器实现
    	{
    		xmlHttpRequest = new XMLHttpRequest();
    	}
    	
    	if(null != xmlHttpRequest)
    	{
    		//得到两个文本框的值
    		var value1ID = document.getElementById("value1ID").value;
    		var value2ID = document.getElementById("value2ID").value;
    		
    		//使用ajax准备向服务器端发送请求：
    		xmlHttpRequest.open("GET", "/js_demo1/AjaxServlet?v1=" + value1ID + "&v2=" + value2ID, true);
    		//关联好ajax的回调函数(类似事件监听)
    		xmlHttpRequest.onreadystatechange = ajaxCallback;
			//真正向服务器发送数据
			xmlHttpRequest.send(null);    	
    	}
    
    }
    
    function ajaxCallback()
    {
    	if(xmlHttpRequest.readyState == 4)
    	{
    		if(xmlHttpRequest.status == 200)
    		{
    			var responseText = xmlHttpRequest.responseText;
    			document.getElementById("div1").innerHTML = responseText;
    		}
    	}
    }
    
    </script>
  </head>
  
  <body>
  	请输入两个整数:<br/>
   <input type="text" id="value1ID"/><br/>
   <input type="text" id="value2ID"/><br/>
   <input type="button" value="get content from sever" οnclick="ajaxSubmit();"/>
   <div id="div1"></div>
  </body>
</html>

服务器端：

public class AjaxServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		String v1 = request.getParameter("v1");
		String v2 = request.getParameter("v2");	
		String v3 = String.valueOf(Integer.valueOf(v1) + Integer.valueOf(v2));
		
		response.setHeader("pragma", "no-cache");
		response.setHeader("cache-control", "on-cache");
		response.setContentType("text/html");
		
		PrintWriter out = response.getWriter();
		System.out.println("server");
		out.println(v3);
		out.close();
	}

}

web.xml代码和上一篇的一样，这里就在说明了！

方式2,：用POST方式实现请求：

依照顺序在上面代码进行改写：

客户端：

//使用ajax准备向服务器端发送请求：
    		xmlHttpRequest.open("POST", "/js_demo1/AjaxServlet", true);
    		//关联好ajax的回调函数(类似事件监听)
    		xmlHttpRequest.onreadystatechange = ajaxCallback;
			//真正向服务器发送数据,使用POST方式提交，必须加上下面一行
			xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xmlHttpRequest.send("v1=" + value1ID + "&v2=" + value2ID);

服务器端：

添加如下代码：

	public void doPost(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
		this.doGet(request, response);
	}

feilong1105

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
用Ajax以GET或POST的方式来和服务器进行数据交互

目标：以异步方式实现两个整数的和：在文本框中输入：113和110 在下方会显示这两个数的和：223方式1：以GET方式请求：客户端代码： Ajax /* * Ajax中的一个重要对象是:XMLHttpR
复制链接

扫一扫