Ajax（Asynchronous JavaScript and XML）

最新推荐文章于 2024-04-17 17:01:56 发布

我一定要成为架构师

最新推荐文章于 2024-04-17 17:01:56 发布

阅读量283

点赞数

分类专栏： Java Web JSP

本文链接：https://blog.csdn.net/weixin_43907332/article/details/86767725

版权

Java Web 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

JSP

18 篇文章 0 订阅

订阅专栏

文章目录

Ajax

Ajax

Ajax，异步的Javascript与XML
Ajax 中的一个重要对象是 XMLHttpRequest
使用 Ajax 准备向服务器端发送请求：xmlHttpRequest.open(“GET”, “AjaxServlet”, true);

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>Title</title>

    <script type="text/javascript">
    	//声明一个空对象以接受XMLHttpRequest对象
  		var xmlHttpRequest = null;
    	
        function ajaxSubmit(){
            
            //IE浏览器
            if (window.ActiveXObject) {
                //写法是固定的
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //除IE外的其他浏览器实现
            else if (window.XMLHttpRequest) {
                xmlHttpRequest = new XMLHttpRequest();
            }

            if (null != xmlHttpRequest) {
                //第一个参数为请求方式,第二个参数为请求的资源，第三个为是否为异步方式处理请求
                xmlHttpRequest.open("GET", "AjaxServlet", true);
                //关联好ajax的回调函数
                xmlHttpRequest.onreadystatechange = ajaxCallback;
                //真正向服务器端发送数据
                xmlHttpRequest.send();//写null也行，如果是以post方式请求，需要填入要请求的信息。
            }
        }

        function ajaxCallback() {
            if(xmlHttpRequest.readyState == 4){
            	if(xmlHttpRequest.status == 200){
            		var responseText = xmlHttpRequest.responseText;
            		
            		document.getElementById("div1").innerHTML = responseText;
            	}
            }
        }
    </script>

</head>
<body>

<input type="button" value="get content from server" onclick="ajaxSubmit();">

<div id="div1"></div>

</body>
</html>

package learn.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class AjaxServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();

        System.out.println("doGet invoked!");

        out.println("hello world");

        out.flush();
    }
}

在这里插入图片描述
点击按钮后：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>Title</title>

    <script type="text/javascript">
    	//声明一个空对象以接受XMLHttpRequest对象
  		var xmlHttpRequest = null;
    	
        function ajaxSubmit(){
            
            //IE浏览器
            if (window.ActiveXObject) {
                //写法是固定的
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //除IE外的其他浏览器实现
            else if (window.XMLHttpRequest) {
                xmlHttpRequest = new XMLHttpRequest();
            }

            if (null != xmlHttpRequest) {
            	var v1 = document.getElementById("value1ID").value;
            	var v2 = document.getElementById("value2ID").value;
            	
                //第一个参数为请求方式,第二个参数为请求的资源，第三个为是否为异步方式处理请求
                //xmlHttpRequest.open("GET", "AjaxServlet?v1=" + v1 + "&v2=" + v2, true);
                xmlHttpRequest.open("POST", "AjaxServlet", true);
                //关联好ajax的回调函数
                xmlHttpRequest.onreadystatechange = ajaxCallback;
                //真正向服务器端发送数据
                //xmlHttpRequest.send();//写null也行
                //如果是以post方式请求，需要填入要请求的信息,必须加上如下一行。
                xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);
            }
        }

        function ajaxCallback() {
            if(xmlHttpRequest.readyState == 4){
            	if(xmlHttpRequest.status == 200){
            		var responseText = xmlHttpRequest.responseText;
            		
            		document.getElementById("div1").innerHTML = responseText;
            		
            	}
            }
        }
    </script>

</head>
<body>

<input type="button" value="get content from server" onclick="ajaxSubmit();"><br>
<input type="text" name="value1" id="value1ID"><br>
<input type="text" name="value2" id="value2ID"><br>



<div id="div1"></div>

</body>
</html>

package learn.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class AjaxServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	System.out.println("doGet invoked!");
    	process(request, response);
    }
    
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	System.out.println("doPost invoked!");
    	process(request, response);
    }

	private void process(HttpServletRequest request, HttpServletResponse response) throws IOException {
		String v1 = request.getParameter("v1");
    	String v2 = request.getParameter("v2");
    	
    	String v3 = String.valueOf(Integer.valueOf(v1) + Integer.valueOf(v2));
    	
        PrintWriter out = response.getWriter();
        
//        try {
//			Thread.sleep(5000);
//		} catch (InterruptedException e) {
//			e.printStackTrace();
//		}

        System.out.println("doGet invoked!");
        
        response.setHeader("pragma", "no-cache");
        response.setHeader("cache-control", "no-cache");

        out.println(v3);

        out.flush();
	}
    
    
}

结果是：
在这里插入图片描述

我一定要成为架构师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax（Asynchronous JavaScript and XML）

文章目录AjaxAjaxAjax，异步的Javascript与XMLAjax 中的一个重要对象是 XMLHttpRequest使用 Ajax 准备向服务器端发送请求：xmlHttpRequest.open(“GET”, “AjaxServlet”, true);&lt;%@ page contentType="text/html;charset=UTF-8" language="ja...
复制链接

扫一扫

专栏目录