js_ajax_简单实现ajax

川长思鸟来 2022-05-18 20:43 221阅读 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 条评论，221人围观）

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

相关阅读

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

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

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

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

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

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

相关 ajax简单封装

function ajax(method, url, data, success) \{ var xhr = null; try \{ //第一步：获取XMLHtt

忘是亡心i/ 2022年09月25日 04:29/ 0 赞/ 146 阅读

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

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

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

相关 javaScript简单实现ajax

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

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

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

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

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

相关 js_ajax_简单实现ajax

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

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

相关 Ajax简单介绍

1.什么是Ajax? Ajax是与服务器交换数据并更新部分网页的技术，在不重新加载整个网页的情况下。 2.如何使用Ajax? 1.创建一个异步对象；

r囧r小猫/ 2022年05月08日 13:46/ 0 赞/ 196 阅读

相关 ajax简单总结

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

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

相关 AJAX--简单概述

前言 Ajax全称为Asynchronous Javascript And XML，中文意思为JavaScript 和 XML的异步处理，是指一种创建交互式快速动态网页应

古城微笑少年丶/ 2021年09月27日 05:34/ 0 赞/ 309 阅读