Ajax详解
- Ajax = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
- Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
- Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技
术。 - 传统的网页(即不用ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网
页。 - 使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。
- 使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
利用Ajax可以做
- 注册时,输入用户名自动检测用户是否已经存在。
- 登陆时,提示用户名密码错误
- 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除
- …
jQuery
- jQuery 提供多个与 A JAX 有关的方法。
- 通过 jQuery A JAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。
- jQuery Ajax本质就是 XMLHttpRequest,对他进行了封装,方便调用!
去jQuery官网下载,点击Download
下载后将文件放入工程中即可使用
我们做一个简单的demo
applicationContext.xml配置 注意加上静态资源过滤
<?xml version="1.0" encoding="UTF-8"?>
<beans
xmlns="http://www.springframework/schema/beans"
xmlns:xsi="http://www.w3/2001/XMLSchema-instance"
xmlns:context="http://www.springframework/schema/context"
xmlns:mvc="http://www.springframework/schema/mvc"
xsi:schemaLocation="http://www.springframework/schema/beans
http://www.springframework/schema/beans/spring-beans.xsd
http://www.springframework/schema/context
https://www.springframework/schema/context/spring-context.xsd
http://www.springframework/schema/mvc
https://www.springframework/schema/mvc/spring-mvc.xsd">
<!-- 自动扫描指定的包,下面所有注解类交给IOC容器管理-->
<context:component-scan base-package="com.lding.controller"></context:component-scan>
<!-- 静态资源过滤 -->
<mvc:default-servlet-handler></mvc:default-servlet-handler>
<mvc:annotation-driven></mvc:annotation-driven>
<!-- 视图解析器 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver " id="internalResourceViewResolver">
<!-- 前缀 -->
<property name="prefix" value="/WEB-INF/jsp/"/>
<!-- 后缀 -->
<property name="suffix" value=".jsp"/>
</bean>
</beans>
demo1 利用ajax可以在不刷新页面的情况下,在局部异步加载页面
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe测试体验页面无刷新</title>
<script>
function go(){
var url=document.getElementById("url").value;
document.getElementById("iframe1").src=url;
}
</script>
</head>
<body>
<div>
<p>请输入地址:</p>
<p>
<input type="text" id="url" value="">
<input type="button" value="提交" onclick="go()">
</p>
</div>
<div>
<iframe id="iframe1" style="width: 100%;height: 500px"></iframe>
</div>
</body>
</html>
demo2,判断前段输入的用户名是否正确,如果用户名匹配则提示true,否则提示为false。
前段input text输入框失去焦点时提交信息
Controller.java
@RequestMapping("/a1")
public void a1(String name, HttpServletResponse response) throws IOException {
System.out.println("a1:param=>"+name);
if("lengding".equals(name)){
response.getWriter().print("true111");
}else{
response.getWriter().print("false111");
}
}
index.jsp
<%--
Created by IntelliJ IDEA.
User: apple
Date: 2022/2/6
Time: 9:51 下午
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="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script>
function a(){
$.post({
url:"${pageContext.request.contextPath}/a1",
data:{"name":$("#username").val()},
success:function (data){
alert(data);
}
})
}
</script>
</head>
<body>
<%-- 失去焦点时,发起一个请求(携带信息)到后台--%>
用户名:<input type="text" id="username" onblur="a()">
</body>
</html>
如果对您有帮助,免费的赞点一个~~~感谢🙏
更多推荐
Ajax详解
发布评论