1.简介
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。
- 传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
- 使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
- 使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
2.伪造Ajax
2.1先创建一个module，添加web支持💻
2.2配置我们的web.xml💻
中间有个applicationContext.xml，记得在resources下添加
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <filter> <filter-name>encoding</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>encoding</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>
2.3applicationContext.xml💻
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd"> <!--1.注解驱动--> <mvc:annotation-driven/> <!--2.静态资源过滤--> <mvc:default-servlet-handler/> <!--3.扫描包：controller--> <context:component-scan base-package="com.hxl.controller"/> <!--4.视图解析器--> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/"/> <property name="suffix" value=".jsp"/> </bean> </beans>
随后增加controller的包和jsp的包
2.4编写AjaxController💻
package com.hxl.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; //自动返回一个字符串 @RestController public class AjaxController { @RequestMapping("/t1") public String test(){ return "hello"; } }
WEB工程中在Setting Project，下artifact中添加lib文件，在lib目录下添加jar包。
配置tomcat测试。成功就可以进行下面了。
2.5新建一个test.html💻
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe测试体验页面无刷新</title> <script> function go() { document.getElementById("iframeOne").src="https://blog.csdn.net/qq_43585922?spm=1000.2115.3001.5343"; } </script> </head> <body> <div> <p>请输入地址：</p> <p> <input type="text" id = "url"> <input type="button" value="提交" onclick="go()"> </p> </div> <div> <iframe id="iframeOne" style="width:100%;height: 520px"></iframe> </div> </body> </html>
思想：我们设置一个浮动的框，需要一个地址来进行提交，然后我们绑定一个事件，获得框的id，让里面的src值等于一个网页。
用idea中的浏览器打开。
我们点击提交之后就会看到一个宽度百分百，高度520px的页面
2.6优化一下💻
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe测试体验页面无刷新</title> <script> function go() { //所有的值，变量，要提前获取 let url = document.getElementById("url").value; document.getElementById("iframeOne").src=url; } </script> </head> <body> <div> <p>请输入地址：</p> <p> <input type="text" id = "url" value="https://blog.csdn.net/qq_43585922?spm=1000.2115.3001.5343"> <input type="button" value="提交" onclick="go()"> </p> </div> <div> <iframe id="iframeOne" style="width:100%;height: 520px"></iframe> </div> </body> </html>
这里我们优化了获取url。src=url，下面的value也进行了修改，这样就可以动态在input中输入，点击提交查看网页。
利用AJAX可以做：
- 注册时，输入用户名自动检测用户是否已经存在。
- 登陆时，提示用户名密码错误
- 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
- …
