本文小编为大家详细介绍“Ajax动态查询回显数据的方法”，内容详细，步骤清晰，细节处理妥当，希望这篇“Ajax动态查询回显数据的方法”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
1.同步和异步
例：普通B/S模式（同步） AJAX技术（异步）
同步：提交请求-->等待服务器处理-->处理完毕返回--> 这个期间客户端浏览器不能干任何事
异步：请求通过时间触发-->服务器处理（这时浏览器任然可以作其他事情）-->处理完毕
同步是指：发送方发出数后，等待收方发回响应以后才发下一个数据包的通讯方式
异步是指：发送方发出数据后，不等待收方发回响应，接着发送下个数据包的通讯方式
通俗点说：
异步传输：你传你的，我干我的事，传完给我说一声
同步传输：你现在传输，我需要亲眼看着你传完我在做别的事
2.什么是ajax
允许浏览器与服务器通信而无序刷新当前页面的技术都被叫做ajax
3.ajax的工作原理
AJAX采用异步交互过程，ajax在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理——等待——处理——等待缺点。
用户的浏览器在执行任务时即卸载了AJAX引擎，Ajax引擎用javascript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
Ajax引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器之间的交流。现在，可以用javascript调用Ajax引擎来代替产生一个HTTP的用户动作，内存中的数据编辑，页面导航，数据校验这些不需要重新载入整个页面的需求可以给Ajax来执行。
4.AjAX得实现方式基于jquery来实现
Jquery对js的一种封装使我们操作dom元素更加简单。
（1） $.get（url,data,callback,type）;
1.url:请求服务器的地址
2.data:请求时携带的参数 格式是key/value {key:value，key:value}
3.callback:服务器响应成功后调用的函数。 function（msg）{} msg:服务器响应的内容
4.type:服务器响应的数据格式。 text文本类型 json 对象类型 xml （这个不怎么会用）
（2） $.post（url,data,callback,type） 和get方式一样
（3） $.ajax
$.ajax（{
url: 请求路径，
data: 携带的数据
type: 请求方式
success: 服务器响应成功后触发的函数，
dataType: 服务器响应的数据类型
}）;
5.json对象
JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。 JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“：”（冒号）；“‘名称/值’对”之间使用“，”（逗号）分隔。
规则如下：
1）映射用冒号（“：”）表示。名称：值
2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
4） 并列数据的集合（数组）用方括号（“[]”）表示。 [ {名称1:值，名称2:值2}, {名称1:值，名称2:值2} ]
5 元素值可具有的类型：string, number, object, array, true, false, null
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/10/30
Time: 14:13
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--①引入jquery得插件--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
</head>
<body>
<button onclick="ck（）">点击我</button>
</body>
<script>
//表示一个json对象 {k:v,k:v} 简单
// var p={"n":"刘一凡","a":17};
// alert（p.n+"----->"+p.a）;
//集合json对象
// var students=[
// {"name":"刘健","age":20},
// {"name":"王飞","age":18},
// {"name":"王一同","age":38}
// ];
// alert（students[0].name）;
// var p={
// "programmers":
// [
// {"firstName": "Brett", "email": "brett@newInstance.com" },
// {"firstName": "Jason", "email": "jason@servlets.com" }
// ]
//
// }
//
// alert（p.programmers[0].email）;
var people ={
"programmers": [
{ "firstName": "Brett", "email": "brett@newInstance.com" },
{ "firstName": "Jason", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
],
"authors": [
{ "firstName": "Isaac", "genre": "science fiction" },
{ "firstName": "Tad", "genre": "fantasy" },
{ "firstName": "Frank", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "instrument": "guitar" },
{ "firstName": "Sergei", "instrument": "piano" }
]};
window.alert（people.programmers[1].firstName）;
window.alert（people.musicians[1].instrument）;
function ck（）{
/*$.get（"${pageContext.request.contextPath}/ajax01",function（result）{ //
//拿到结果使用
alert（result）;
}）;*/
/*$.post（"${pageContext.request.contextPath}/ajax01",{"uname":"范龙飞","age":18},function（result）{ //
//拿到结果使用
alert（result）;
}）;*/
$.ajax（{
url: "${pageContext.request.contextPath}/ajax01",
data: "uname=刘哥&age=19",
type: "POST",
success: function （result） {
alert（result）
}
}）
}
</script>
</html>
服务端响应的数据格式为json
读到这里，这篇“Ajax动态查询回显数据的方法”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
