AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 是一种用于创建快速动态网页的技术。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 Ajax的核心是XMLHttpRequest对象(XHR)。XHR用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 AJAX流程 学会使用AJAX后，再使用Vue就很简单啦，其使用方法基本相同。
文章目录
一、初始AJAX
1、什么是AJAX呢？
2、为什么要使用AJAX呢？解决了什么样的问题？
使用AJAX后：通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。3、AJAX的核心？
二、案例演示
1、伪造AJAX
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪造AJAX</title> </head> <body> <div> <p> 请输入要加载的地址：<span id="currentTime"></span><br><br> <input type="text" id="url" value="https://www.baidu.com/"> <input type="button" onclick="loadPage()" value="提交"> </p> </div> <div> <h3>加载页面的位置</h3> <iframe width="80%" height="600px" id="iframePosition"> </iframe> </div> <script type="text/javascript"> window.onload = function f() { var myDate = new Date(); document.getElementById("currentTime").innerText = myDate.getTime(); }; function loadPage() { var targetURL = document.getElementById("url").value; document.getElementById("iframePosition").src = targetURL; } </script> </body> </html> 
这个案例演示了一个伪造的AJAX，在当前页面下，我们并不需要去刷新浏览器，直接输入地址，点击提交就可以请求到一个页面。2、jQuery.ajax
方式一：使用原始的HttpServletResponse
（1）pom.xml
<!-- 版本锁定 --> <properties> <spring.version>5.0.2.RELEASE</spring.version> </properties> <dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.16.10</version> <scope>provided</scope> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.9.0</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.9.0</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.0</version> </dependency> </dependencies> （2） web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="https://java.sun.com/xml/ns/j2ee" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://java.sun.com/xml/ns/j2ee https://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <!-- Spring MVC的核心控制器--> <servlet> <servlet-name>dispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!--配置Servlet的初始化参数，读取Spring MVC的配置文件，创建Spring容器 --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc.xml</param-value> </init-param> <!--表示容器在应用启动时就加载并初始化这个servlet--> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app> （3）springmvc.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="https://www.springframework.org/schema/beans" xmlns:mvc="https://www.springframework.org/schema/mvc" xmlns:context="https://www.springframework.org/schema/context" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" https://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd https://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd https://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd"> <context:component-scan base-package="com.uos"></context:component-scan> <!--配置视图解析器--> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/pages/"></property> <property name="suffix" value=".jsp"></property> </bean> <!--开启Spring MVC基于注解的支持--> <mvc:annotation-driven> <mvc:message-converters> <bean class="org.springframework.http.converter.StringHttpMessageConverter"> <property name="supportedMediaTypes"> <list><value>text/plain;charset=utf-8</value></list> </property> </bean> </mvc:message-converters> </mvc:annotation-driven> </beans> （4）编写一个控制器
@Controller @RequestMapping("/ajax") public class AjaxController { // 第一种方式：服务器要返回一个字符串，注解使用response @RequestMapping("/a1") public void ajax1(String name, HttpServletResponse response) throws IOException { if ("admin".equals(name)) { response.getWriter().print("true"); }else { response.getWriter().print("false"); } } } （5）编写jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>AJAX</title> </head> <body> 用户名： <input type="text" id="txtName" onblur="a1()"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> function a1() { //ajax默认是get请求 $.ajax({ /* * url：待载入页面的地址 * data：待发送的key/value 参数 * success：载入成功时的回调函数 * data：封装了服务器返回的数据 * status：状态 * */ url:"${pageContext.request.contextPath}/ajax/a1", data:{'name':$('#txtName').val()}, success:function (data,status) { alert(data); alert(status); } }); } </script> </body> </html> （6）效果演示
ajax默认是get请求，我们可以将$.ajax修改为$.post进行验证
方式二：Spring MVC实现
（1）编写一个User实体类
@Data @AllArgsConstructor @NoArgsConstructor public class User { String name; Integer age; String sex; } （2）在控制器中添加以下方法
// 第二种方式：Spring MVC实现 @RequestMapping("/a2") @ResponseBody public List<User> ajax2() { List<User> list = new ArrayList<User>(); list.add(new User("张三",12,"男")); list.add(new User("李四",24,"男")); list.add(new User("王五",18,"男")); return list; } （3）编写一个jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>AJAX</title> </head> <body> <input type="button" id="btn" value="获取数据"/> <table width="80%" align="center"> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tbody id="content"> </tbody> </table> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(function () { $("#btn").click(function () { $.post("${pageContext.request.contextPath}/ajax/a2",function (data) { console.log(data); var html=""; for (var i = 0; i <data.length ; i++) { html+= "<tr>" + "<td>" + data[i].name + "</td>" + "<td>" + data[i].age + "</td>" + "<td>" + data[i].sex + "</td>" + "</tr>" } $("#content").html(html); }); }) }) </script> </body> </html> （4）效果演示
3、登录提示效果
（1）在控制器中添加方法
@RequestMapping("/a3") @ResponseBody public String ajax3(String name,String pwd) { String message = ""; if (name!=null) { if ("admin".equals(name)) { message = "OK"; }else { message = "用户名有误"; } } if (pwd!=null) { if ("123456".equals(pwd)) { message = "OK"; }else { message = "密码有误"; } } return message; } （2）编写jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>注册</title> </head> <body> <p> 用户名： <input type="text" id="name" onblur="a1()"> <span id="nameInfo"></span> </p> <p> 密码： <input type="text" id="pwd" onblur="a2()"> <span id="pwdInfo"></span> </p> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> function a1() { $.post({ url:"${pageContext.request.contextPath}/ajax/a3", data:{'name':$('#name').val()}, success(data){ if (data.toString()=="OK") {//用户名正确 $('#nameInfo').css("color","green"); }else { $('#nameInfo').css("color","red"); } $('#nameInfo').html(data); } }) } function a2() { $.post("${pageContext.request.contextPath}/ajax/a3",{'pwd':$('#pwd').val()},function(data){ if (data.toString()=="OK") {//密码正确 $('#pwdInfo').css("color","green"); }else { $('#pwdInfo').css("color","red"); } $('#pwdInfo').html(data); }) } </script> </body> </html> （3）效果演示
这个案例演示了在不刷新浏览器的情况下实现了登录提示的效果。三、总结
在使用AJAX时，我们需要注意一下经常使用到的参数。
$.post({
/*
* url：待载入页面的地址
* data：待发送的key/value 参数
* success：载入成功时的回调函数
* data：封装了服务器返回的数据
* status：状态
* */
})
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
