AJAX异步请求JSON格式数据

最新推荐文章于 2024-07-04 08:10:42 发布

Valentino112358

最新推荐文章于 2024-07-04 08:10:42 发布

阅读量272

点赞数

本文链接：https://blog.csdn.net/Valentino112358/article/details/96559112

版权

本文详细介绍了AJAX异步请求的工作原理、实现方式，包括原生JavaScript和jQuery的$.get()、$.post()及$.ajax()函数。同时，探讨了异步与同步请求的区别，并对JSON数据格式进行了深入讲解，包括两种基本格式及其应用场景。最后，提到了JSON-LIB和Gson两个工具在Java中将数据转换为JSON格式的应用，以及AJAX响应JSON格式数据的实例。

摘要由CSDN通过智能技术生成

AJAX异步请求

A: 异步Asynchronous

J: JavaScript

A: And

X: XML

同步请求: 客户端请求到服务器,如果服务器没有响应,客户端只能等待,卡死

异步请求: 客户端请求到服务器,如果服务器没有响应,客户可是自由活动

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

交互技术

AJAX的运行原理

浏览器内置了AJAX的引擎

响应数据以前是直接到浏览器里面，现在是到ajax引擎里面，再到页面。

ajax引擎也是对象（XMLHttpRequest）

原生态的JavaScript实现异步请求

实现步骤

获取AJAX引擎
设置回调函数
- 自定义函数,服务器响应成功后,自动调用函数
设置请求服务器路径
提交

原生态的代码量比较大

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /**
         * 原生态的JavaScript实现AJAX异步请求
         */
        function fn() {
            //获取AJAX引擎对象，XMLHttpRequest
            var xmlhttp = new XMLHttpRequest();
            //对象调用了事件,AJAX引擎的状态变化
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //xmlhttp.responseText: AJAX引擎对象属性,  服务器响应 回来的文本数据
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            //设置服务器路径
            xmlhttp.open("GET","/WEB11/js_ajax");

            //提交请求
            xmlhttp.send();
        }
    </script>
</head>
<body>
  <input type="button" value="AJAX提交" onclick="fn()">
  <div id="myDiv"></div>
</body>
</html>

servlet:

package com.itheima.servlet;

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