Ajax的使用

Vivien_o.O

已于 2022-02-13 09:14:37 修改

阅读量296

点赞数 1

分类专栏： JAVA 文章标签： ajax javascript 服务器

于 2022-02-12 18:17:22 首次发布

本文链接：https://blog.csdn.net/qq_45795744/article/details/122899573

版权

JAVA 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

文章目录

什么是Ajax？
Ajax如何工作
Ajax实例
- HTML页面
- JS页面
Servlet
页面显示结果

AJAX = Asynchronous JavaScript And XML

什么是Ajax？

Ajax不是一种编程语言，是一种从网页访问 Web 服务器的技术。代表异步 JavaScript 和 XML。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

AJAX 组合了：
- 浏览器内建的XMLHttpRequser对象（从web服务器请求数据）
- JavaScript和HTML DOM（显示或使用数据）

Ajax应用程序可能使用XML来传输数据，但将数据作为纯文本或者JSON文本传输也同样常见。
Ajax 允许通过于场景后面的Web服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不是重新加载整个页面。

Ajax如何工作

网页中发生一个事件
有JavaScript创建XMLHttpRequest对象
XMLHttpRequest对象向web服务器发送请求
服务器处理刚方式
服务器将响应发送回网页
有JavaScript读取响应
由JavaScript执行正确的动作

Ajax实例

HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>
<body>
    <div id="divId" style="font-size: 2em;color:aqua;"></div>
    
    <button id="btnId"> 点我</button>

    <script src="js/ajax.js"></script>
</body>
</html>

标签用来显示来自服务器的内容点击button标签回调用js函数该函数从web服务器请求数据并显示它

JS页面

document.getElementById("btnId").onclick=function(){

    let xmlHttp = new XMLHttpRequest();


    xmlHttp.onreadystatechange = function() { 
   
        if (this.readyState == 4 && this.status == 200) {
			
           let resVal =  this.responseText;
           document.getElementById("divId").innerText = resVal;
        }
      };

      xmlHttp.open("GET", "http://localhost:8090/ajax-demo/ajax.action", true);
      xmlHttp.send();

}

let xmlHttp = new XMLHttpRequest()用来得到一个 XMLHttpRequest对象

 xmlHttp.onreadystatechange = function() { 
        if (this.readyState == 4 && this.status == 200) {
			
           let resVal =  this.responseText;
           document.getElementById("divId").innerText = resVal;
        }
      };

这一段代码是用来监听来自服务器的响应，并根据响应来让js改变页面的内容

 xmlHttp.open("GET", "http://localhost:8090/ajax-demo/ajax.action", true);
      xmlHttp.send();

用于给服务器发送请求，请求后台数据。

Servlet

package com.dyit.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AjaxDemo
 */
@WebServlet("/ajax.action")
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
   
   
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//定义一个数组
		String[] fruits = {"苹果","橘子","香蕉","葡萄","西红柿"};
		
		Random random = new Random();
		PrintWriter out = response.getWriter();
		//给页面响应
		out.print(fruits[random.nextInt(5)]);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

当页面发起请求就给予响应，返回响应的内容。

页面显示结果

在这里插入图片描述
每当点击按钮就会更新部分内容，网页并没有刷新，从servlet代码中也可以看出，并没有重新发送页面。

参考W3school

Vivien_o.O

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax的使用

文章目录什么是Ajax？Ajax如何工作Ajax实例HTML页面JS页面Servlet页面显示结果AJAX = Asynchronous JavaScript And XML什么是Ajax？Ajax不是一种编程语言，是一种从网页访问 Web 服务器的技术。代表异步 JavaScript 和 XML。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。AJAX 组合了：- 浏览器内建的XMLHttpRequser对象
复制链接

扫一扫