js_ajax_简单实现ajax

川长思鸟来 2022-05-18 20:43 169阅读 0赞

@WebServlet("/ajax.do")
    public class HelloAjax extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
        public HelloAjax() {
            super();
            // TODO Auto-generated constructor stub
        }
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		doPost(request, response);
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    	response.getWriter().write("Ajax Test");
    	}
    
    }

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    window.onload=init;
    function init(){
    	var btn=document.getElementById("btn");
    	btn.onclick=getdata;
    }
    function getdata(){
    	var xhr;
    	if (window.XMLHttpRequest) 
    	  {// code for IE7+, Firefox, Chrome, Opera, Safari 
    		xhr=new XMLHttpRequest(); 
    	  } 
    	else 
    	  {// code for IE6, IE5 
    		xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
    	  }
    	xhr.onreadystatechange=function(){
    		if(xtr.readyState==4&&xtr.status==200){
    			document.getElementById("display").innerHTML=xhr.responseText;
    		}
    	}
    	xhr.open("get","ajax.do",true);
    	xhr.send();
    	
    	
    }
    </script>
    </head>
    <body>
    <input type="button" id="btn" value="测试">
    <div id="display"></div>
    </body>
    </html>

注意:(1).ajax可以实现不加载整个页面的情况下，对页面某部分进行更新

如何使用ajax：

1.创建XMLHttpRequest对象

2.检测XMLHttpRequest状态，在合适的时候进行处理

3.发送请求

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关实现一个ajax请求的简单例子

效果：在前端页面的text框输入一个id，点击按钮，发送ajax请求到数据库查询对应用户数据返回，将用户信息显示在页面，实现局部刷新。不说废话直接来！ 1.前端的jsp页

╰半夏微凉°/ 2024年02月19日 19:50/ 0 赞/ 13 阅读

相关 Echarts+ajax实现一个简单折线图

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

冷不防/ 2022年12月27日 01:47/ 0 赞/ 128 阅读

相关 ajax简单模板

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <he

秒速五厘米/ 2022年09月23日 14:45/ 0 赞/ 114 阅读

相关 Ajax 模糊查询的简单实现

类似于百度的搜索引擎模糊查询功能，不过百度的模糊查询功能更强大，这里简单实现下. 要实现模糊查询，首先要做的就是把SQL写好。话不多少，直接贴代码了! JSP页面：

ゞ浴缸里的玫瑰/ 2022年09月20日 00:21/ 0 赞/ 138 阅读

相关 javaScript简单实现ajax

<script type="text/javascript"> window.οnlοad=function(){ var oBtn=document

爱被打了一巴掌/ 2022年08月14日 02:54/ 0 赞/ 156 阅读

相关 AJAX 的简单实例（JS实现和JQuery 实现）

什么是AJAX 原生JS实现AJAX HTML5 xmlhttprequest2 JQue

秒速五厘米/ 2022年07月19日 05:08/ 0 赞/ 151 阅读

相关 AJAX简单介绍

ajax的简单介绍【JAVA修真院小课堂】AJAX简单介绍大家好,我是我是郑州分院第九期java学员张强，一枚正直纯洁善良的Java程序员。今天给大家分享一下，修真院官

秒速五厘米/ 2022年05月21日 11:15/ 0 赞/ 201 阅读

相关 js_ajax_简单实现ajax

@WebServlet("/ajax.do") public class HelloAjax extends HttpServlet { privat

川长思鸟来/ 2022年05月18日 20:43/ 0 赞/ 170 阅读

相关 Ajax简单使用

Ajax简单使用通常向服务器发送请求的方法：使用浏览器地址栏，输入地址，get请求 HTML的form表单发送请求，method属性可以设置get和

傷城~/ 2022年05月12日 08:22/ 0 赞/ 163 阅读

相关 ajax简单总结

Ajax的优势是什么？简要介绍一下ajax核心javascript对象？答案：2个方面 Ajax应用程序的优势： 1. 通过异步模式，提升了用户体验 2. 优化

﹏ヽ暗。殇╰゛Y/ 2022年05月08日 03:52/ 0 赞/ 147 阅读