AJAX和JSON

ba86

于 2023-12-12 21:17:47 发布

阅读量56

点赞数

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/qwLily/article/details/134958340

版权

一、JSON

1.简介

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于JavaScript语法并易于人们阅读和编写，同时也易于机器解析和生成。

JSON使用键值对的方式来表示数据，其中键是字符串，值可以是字符串、数字、布尔值、数组、对象等。它与XML类似，但更简洁和易于理解。

2.特点

JSON的特点包括：

简单明了：JSON结构清晰，易于理解和编写。
高效性能：相对于XML等其他格式，JSON数据的体积较小，传输速度更快。
跨语言支持：JSON在许多编程语言中都有支持，方便数据的交换和传递。
易于解析：JSON数据可以通过JavaScript的内置方法直接解析和处理。

二、AJAX

1.简介

AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式Web应用程序的技术。它是一种用于在Web页面中实现异步通信的技术，可以在不重新加载整个网页的情况下更新部分页面内容。

传统的Web应用程序在用户和服务器之间的通信中使用同步请求，即用户发送请求后，服务器处理完成后再返回响应结果。这样的方式会导致用户在等待服务器响应时无法进行其他操作。

而AJAX技术通过使用异步请求来解决这个问题。它允许在后台发送请求并同时继续执行其他操作，当服务器响应返回时，再通过JavaScript将更新的数据动态地显示在页面上，从而提高用户体验。

AJAX主要使用XMLHttpRequest对象来实现异步通信。通过该对象，可以向服务器发送请求，接收服务器响应，并在后台处理数据。同时，AJAX还可以使用JSON格式来传输数据，不仅限于XML。

AJAX技术广泛应用于现代Web应用程序中，如网页搜索、表单验证、动态内容加载等。它在提升用户体验、减少页面加载时间和网络流量等方面具有重要作用。

2.原生JavaScript（前后台交互）

2.1前台代码（jsp）

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

</head>
<body>
<a href="#" onclick="test()">Ajax</a>
<div id="div1"></div>
</body>
<script type="text/javascript">
		var xmlHttp;
		//1.创建XMLHttpRequest对象
		function test() {
			try { //Firefox, Opera 8.0+, Safari
				xmlHttp = new XMLHttpRequest();
			} catch (e) {
				try { //Internet Explorer
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					try {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					} catch (e) {
						alert("不支持Ajax！");
					}
				}
			}
			//2.建立与服务器的连接
			xmlHttp.open("GET","${pageContext.request.contextPath}/servlet/AjaxDemo1?time=" + new Date().getTime());
			//3.向服务器发送数据
			xmlHttp.send(null);
			//4.设置回调函数，接受服务器返回的数据
			//注意：readyState的状态变化都会触发onreadystatechange事件
			xmlHttp.onreadystatechange = showInfo;
		}

		function showInfo() {
			//alert(xmlHttp.readyState);
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200 || xmlHttp.status == 304) {//304表示服务器的内容没有变化
					var jdata = eval("("+xmlHttp.responseText+")");
                alert(jdata.id+","+jdata.name+","+jdata.gender+","+jdata.age);
				}
			}

		}
	</script>
</html>

2.2后台代码（java）

package com.org.controller;

import com.org.domain.Teacher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/TestController")
public class TestController extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        Teacher teacher = new Teacher(1,"张三","男",19);
        //通过拼接字符串的方式转换成json格式
        String data = "{id:"+teacher.getId()+",name:'"+teacher.getName()+"',gender:'"+teacher.getGender()+"',age:"+teacher.getAge()+"}";
        //将数据传给前台
        resp.getWriter().print(data);

    }
}

2.3运行结果

3.JQuery（前后台交互）

3.1前台代码（jsp）

<%--
  Created by IntelliJ IDEA.
  User: Asus
  Date: 2023/10/16
  Time: 15:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="#" onclick="test()">点击</a>
<div id="clickd">

</div>
</body>
<script type="text/javascript">
    function test() {
        $("#clickd").load("TestController",function (data,textStatus,xhr) {
            alert(data);
        })
    }
</script>
</html>

3.2后台代码（java）

package com.org.controller;

import com.org.domain.Teacher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/TestController")
public class TestController extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8"); // 设置请求编码格式为UTF-8
        resp.setContentType("text/html;charset=utf-8"); // 设置响应编码格式为UTF-8

        Teacher teacher = new Teacher(1,"张三","男",19); // 创建一个Teacher对象，并设置其属性值

        // 通过拼接字符串的方式将Teacher对象转换成JSON格式的字符串
        String data = "{id:"+teacher.getId()+",name:'"+teacher.getName()+"',gender:'"+teacher.getGender()+"',age:"+teacher.getAge()+"}";

        resp.getWriter().print(data); // 将转换后的数据发送给前台
    }
}