Ajax的简介

Ajax（Asynchronous JavaScript and XML），直译为“异步的JavaScript与XML技术”，是一种创建交互式网页应用的网页开发技术，用于创建快速动态网页，由杰西·詹姆士·贾瑞特所提出。与传统的Web应用相比，Ajax通过浏览器与服务器进行少量的数据交换就可以实现网页的异步更新，在不重新加载整个网页的情况下，即可对网页进行更新。

Ajax的特点

优点 1.局部刷新页面，减少用户心理和实际的等待时间，带来更好的用户体验

2.按需取数据，减轻服务器的负担，最大程度减少冗余请求

3.异步方式与服务器通信，不需要打断用户的操作，具有更加迅速地响应能力

4.基于xml标准化，并被广泛支持，不需要安装插件等，进一步促进页面和数据的分离

缺点 1.Ajax只是局部刷新，所以页面的后退按钮是没用的

2.对流媒体还有移动设备的支持不是太好

3.Ajax大量使用了JavaScript和Ajax引擎，这些取决于浏览器的支持

4.客户端过肥，太多客户端代码造成开发商的成本，编写复杂、容易出错，冗余代码比较多，破坏了web的原有标准

Ajax向后端发送请求

导入jQuery。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

html

<head>
<script>function  a(){$.ajax({url: "/a1.action",data:{name: $("#username").val()},success:function (data) {alert("成功"+data)}})}</script>
</head>
<body>用户名：<input type="text" id="username" onblur="a()">
<a href="/login.action">点我</a>
</body>

controller

@RequestMapping("/a1")
public void a1(String name, HttpServletResponse response) throws IOException {if("aaa".equals(name)){response.getWriter().print("true");}else{response.getWriter().print("false");}
}

发送请求后端数据回显

实体类

@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {private Integer id;private String loginname;private String password;
}

controller层，从数据库里面获取数据，也可以伪造数据返回前端

@RequestMapping("/userlist")
@ResponseBody
public List<User> userlist(){return userService.queryAll();
}

前端页面,通过得到的数据在Ajax里面将其展示到body

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<body>
<div><input type="button" id="btn" value="获取用户数据"/><table width="80%" align="center"><tr><td>编号</td><td>账号</td><td>密码</td></tr><tbody id="content"></tbody></table>
</div>

</body>
<script src="/static/js/jquery-3.6.0.js"></script>
<script>$(function () {$("#btn").click(function (){$.post("/userlist.action",function (data) {let list = datavar html='';for (let i = 0; i < list.length; i++) {console.log(list[i])html += '<tr>' +'<td>' + list[i].id +'</td>' +'<td>' + list[i].loginname +'</td>' +'<td>' + list[i].password +'</td>' +'</tr>'}$("#content").html(html);})})})

</script>
</html>

Jquery实现AJAX异步通信相关推荐

本机Ajax异步通信
昨天我们用JQuery.Ajax解释JQuery样通过Ajax实现异步通信.为了更好的编织知识网,今天我们用一个Demo演示怎样用javascript实现原生Ajax的异步通信. 原生Ajax实现异步 ...
【转】4.1触碰jQuery：AJAX异步详解
传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 X ...
用jQuery实现Ajax
Ajax 全称"Asynchronous JavaScript and XML",译为"异步 JavaScript 和 XML",程序员们习惯称之为" ...
请求对象触碰jQuery：AJAX异步详解
最近一直在研究请求对象之类的问题,现在正好有机会和大家讨论一下. 传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous Java ...
ajax请求必须打断点才能成功,Jquery等待ajax执行完毕继续执行（断点调试正常，运行异常）...
以前写过一个程序,发现用断点调试的时候,一步步的运行,程序是可以的,但是去了断点程序就出现了问题. $(document).ready(function(){ var arra=new Array() ...
转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的. 实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用 ...
用 jQuery 的 AJAX 功能发现的一个错误/注意点：HTTP Error 411
今天程序中有个地方需要 Ajax 方式 POST 数据,发现在 IE 6.0 下正常,而 FireFox 2.0.0.9 下则出错. 通过 FireBug 抓取 ajax 回发后得到的页面信息如下: ...
jquery ajax 省城市二级菜单源码,利用了jquery的ajax实现二级联互动菜单
菜单资源保存在数据库中.利用了jquery的ajax实现.用到的包有:json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js jsp页 ...
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...

Jquery实现AJAX异步通信

Ajax的简介

Ajax的特点

Ajax向后端发送请求

发送请求后端数据回显

Jquery实现AJAX异步通信相关推荐

最新文章

热门文章