通俗易懂讲讲Ajax~ - 网站源码_资源分享

这儿是BaretH的首篇该文~

热烈欢迎我们出访我的网志：

csdn：https://blog.csdn.net/qq_45173404

对个人网志：https://zhong_siru.gitee.io/

1. 甚么是Ajax

AJAX = Asynchronous JavaScript and XML：触发器的 JavaScript 和 XML

现代而言，他们透过url允诺两个镜像，多于三种状况：转贴、镜像，但这三种形式单厢将整座页面解构创下

但绝大部分天数，他们不须要创下整座页面，他们只须要局部性统计数据的预览，这就导入了ajax，他们能将其看作触发器无创下允诺

当他们在应用程序搜寻框搜寻许多文本时

比如说这儿输出hexo，现代的形式，如果是页面创下后才表明上面的统计数据

透过Ajax，他们输出搜寻重要信息时，向伺服器发动两个允诺，从伺服器允诺回那些统计数据，透过在前台与伺服器进行小量统计数据传输，Ajax 能使页面同时实现触发器预览，不须要整座页面的创下，就能局部性预览表明他们允诺回的统计数据

他们能检查和校正呵呵，当他们在点选搜寻框的一刹那，就发动了两个允诺

当他们输出搜寻文本时，发动了许多捷伊允诺

json是Ajax发送小部分统计数据的一种轻量级统计数据格式，能简单易懂的给伺服器或者应用程序交互统计数据，包括json对象，json数组对象。

他们能点进去查看响应重要信息，就能查看返回的json统计数据

jQuery110209003079113460963_1599801013609({“q”:“hexo”,“p”:false,“g”:[{“type”:“sug”,“sa”:“s_1”,“q”:“hexo搭建对个人网志”},{“type”:“sug”,“sa”:“s_2”,“q”:“hexonia”},{“type”:“sug”,“sa”:“s_3”,“q”:“hexo是甚么”},{“type”:“sug”,“sa”:“s_4”,“q”:“hexose”},{“type”:“sug”,“sa”:“s_5”,“q”:“hexokinase”},{“type”:“sug”,“sa”:“s_6”,“q”:“hexo主题推荐”},{“type”:“sug”,“sa”:“s_7”,“q”:“hexo可视化写网志”},{“type”:“sug”,“sa”:“s_8”,“q”:“hexo主题”},{“type”:“sug”,“sa”:“s_9”,“q”:“hexo网志”},{“type”:“sug”,“sa”:“s_10”,“q”:“hexonia攻略”}],“slid”:“4771742357967452342”,“queryid”:“0x1aea2648e55b8b6”})

那些统计数据就是展示在前端的统计数据，就是他们搜寻时，提示出来的统计数据

总结：

AJAX不是一种捷伊编程语言，用于创建快速动态页面的技术AJAX是在不重新加载整座页面的情况下，与伺服器交换统计数据并预览部分页面的技术。AJAX不须要任何应用程序插件，但须要用户允许JavaScript在应用程序上执行。透过在前台与伺服器进行小量统计数据传输，AJAX 能使页面同时实现触发器局部性预览

现代的页面(即不用ajax技术的页面)，想要预览文本或者提交两个表单，都须要重新加载整座页面。使用Ajax，用户能创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

2. iframe标签简单伪造Ajax

他们编写两个html页面透过iframe标签来伪造Ajax的样子，在不创下整座页面时局部性预览部分统计数据

组成：

输出文本框提交按钮iframe内嵌窗口

内的url地址，并设置iframe窗口的src属性位该url，同时实现内嵌窗口跳转到指定网址

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>iframe体验页面无创下</title> <script> function jump() { var url = document.getElementById(“url”).value; document.getElementById(“window”).src=url; } </script> </head> <body> <div> <p>请输出出访地址：</p> <input type=“text” id=“url” value=“https://blog.csdn.net/qq_45173404”> <input type=“button” value=“提交” onclick=“jump()”> </div> <div> <iframe id=“window” style=“width: 100%;height:400px”></iframe> </div> </body> </html>

运行测试：

点选提交，就会在内嵌窗口内进行跳转，而不创下整座页面

以上同时实现了简单Ajax的样子，同时实现了发出允诺，不创下整座页面而是局部性预览返回表明的效果

3. Ajax的同时实现

接下来他们谈谈真正Ajax的同时实现，但首先须要了解许多基本的概念

1. 基本概念的了解

对于Ajax的同时实现，他们首先须要了解许多基本的概念：

1、Ajax的核心是甚么？

Ajax的核心是XMLHttpRequest对象（XHR），透过应用程序的XMLHttpRequest对象发出小部分统计数据，与服务端进行交互，服务端返回小部分统计数据，然后预览客户端的部分页面，应用程序端触发器出访伺服器

2、XMLHttpRequest是甚么？

XMLHttpRequest简称XHR，用于在前台与伺服器交换统计数据。

iveXObject）。

3、Ajax统计数据传输的统计数据格式是甚么？

Ajax传输统计数据的格式有三种

详细文本能参考：https://www.cnblogs.com/realshijing/p/8401294.html

2. 原生JS同时实现

这儿参考了https://www.cnblogs.com/wxp5257/p/7929452.html

1. 创建XHR对象

各个应用程序对XHR的支持也是不同的，给出上面方法来创建XHR对象，以解决兼容问题

2. 打开与伺服器的连接

当得到XHR对象后，就能调用该对象的open()方法打开与伺服器的连接了。

open(method, url, async)；

method：允诺形式，通常为GET或POST；url：允诺的伺服器地址，若为GET允诺，还能在URL后追加参数；async：这个参数能不给，默认值为true，表示触发器允诺；

var xmlHttp = createXMLHttpRequest(); xmlHttp.open(“GET”, “/ajax_get/?a=1”, true);

3. 发送允诺

当使用open打开连接后，就能调用XHR对象的send()方法发送允诺了。

send()方法的参数为POST允诺参数，即对应HTTP协议的允诺体文本，若是GET允诺，须要在URL后连接参数。

注意：若没有参数，须要给出null为参数！若不给出null为参数，可能会导致FireFox应用程序不能正常发送允诺！

xmlHttp.send(null);

4. 接收伺服器响应

当允诺发送出去后，伺服器端就开始执行了，但伺服器端的响应还没有接收到。接下来他们来接收伺服器的响应。

XHR对象有两个onreadystatechange事件，它会在XHR对象的状况发生变化时被调用。

<%–XMLHttpRequest对象的5种状况–%> 0：初始化未完成状况，只是创建了XMLHttpRequest对象，还未调用open()方法； 1：允诺已开始，open()方法已调用，但还没调用send()方法； 2：允诺发送完成状况，send()方法已调用； 3：开始读取伺服器响应； 4：读取伺服器响应结束。

onreadystatechange事件会在状况为1、2、3、4时引发。

但通常他们只关心最后一种状况4，即读取伺服器响应结束时，客户端才会做出改变。他们能透过XHR对象的readyState属性来得到其状况

xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4) { alert(hello); } };

其实他们还要关心伺服器响应的状况码是否为200，其伺服器响应为404，或500，那么就表示允诺失败了。他们能透过XHR对象的status属性得到伺服器的状况码。

xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { alert(xmlHttp.responseText); } };

3. jQuery同时实现

jQuery 是两个 JavaScript 库，提供多个与 AJAX 有关的方法。jQuery Ajax本质就是 XMLHttpRequest，对其进行了封装，方便调用

1. jQuery中AJAX的常用方法

$.ajax()

是jquery中通用的两个ajax封装

格式：

$.ajax({ type:POST, url:发送允诺的地址, dataType:伺服器返回的统计数据类型, data:{key/value}, success:function(data){ //允诺成功函数文本 }, error:function(jqXHR){ //允诺失败函数文本 } }); $.ajax({ type:GET, url:发送允诺的地址?统计数据名+=统计数据文本[+“&统计数据名”+统计数据文本+…], dataType:伺服器返回的统计数据类型, success:function(data){ //允诺成功函数文本 }, error:function(jqXHR){ //允诺失败函数文本 } });

部分参数：

url：允诺地址 type：允诺形式，GET、POST（1.9.0之后用method） headers：允诺头 data：要发送的数据 contentType：即将发送重要信息至伺服器的文本编码类型(默认: “application/x-www-form-urlencoded; charset=UTF-8”) async：是否触发器 timeout：设置允诺超时天数（毫秒） beforeSend：发送允诺前执行的函数(全局) complete：完成之后执行的回调函数(全局) success：成功之后执行的回调函数(全局) error：失败之后执行的回调函数(全局) accepts：透过允诺头发送给伺服器，告诉伺服器当前客户端可接受的统计数据类型 dataType：将伺服器端返回的统计数据转换成指定类型 “xml”: 将伺服器端返回的文本转换成xml格式 “text”: 将伺服器端返回的文本转换成普通文本格式 “html”: 将伺服器端返回的文本转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。 “script”: 尝试将返回值当作JavaScript去执行，然后再将伺服器端返回的文本转换成普通文本格式 “json”: 将伺服器端返回的文本转换成相应的JavaScript对象 “jsonp”: JSONP 格式使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

$.get()

使用GET形式来进行触发器允诺

语法结构：

$.get(url,[data],[callback])

url：string类型，ajax允诺的地址。

data(可选参数)：object类型，发送至伺服器的key/value统计数据会附加到允诺URL中

callback(可选参数)：function类型，当ajax返回成功时自动调用该函数

$.get({ url:发送允诺的地址 data:{key/value}, type:伺服器返回的统计数据类型, success:function(data){ //允诺成功函数文本 }, error:function(jqXHR){ //允诺失败函数文本 } });

$.post()

使用POST形式来进行触发器允诺

语法结构：

$.post(url,[data],[callback],[type])

同$.get()类似，多了两个type可选参数

type：允诺的统计数据类型，不设置就和$.get()返回的统计数据格式一样，都是字符串的

$.post({ url:发送允诺的地址 data:{key/value}, type:伺服器返回的统计数据类型, success:function(data){ //允诺成功函数文本 }, error:function(jqXHR){ //允诺失败函数文本 } });

2.模仿应用程序的失去焦点事件

1. 新建两个SpringMVC项目

项目结构：

web.xml

<?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”> <!–1.注册servlet–> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!–透过初始化参数指定SpringMVC配置文件的位置，进行关联–> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <!–所有允诺单厢被springmvc拦截 –> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!–SpringMVC内置过滤器,防止中文乱码–> <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>

applicationContext.xml：SpringMVC核心配置文件

<?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:context=“http://www.springframework.org/schema/context” xmlns:mvc=“http://www.springframework.org/schema/mvc” xsi:schemaLocation=“http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd”> <!– 自动扫描指定的包，上面所有注解类交给IOC容器管理 –> <context:component-scan base-package=“controller”/> <!–注解驱动–> <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>

AjaxController.java

package controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class AjaxController { @RequestMapping(“/test”) public String test() { return “test”; } }

运行测试，出访http://localhost:8080/test，正确表明结果则代表SpringMVC项目搭建成功

2. 下载jQuery

下载地址：https://jquery.com/download/

然后进入了https://code.jquery.com/jquery-3.5.1.js页面，里面就是Jquery的代码

他们能ctrl+s将js文件保存至本地

3. IDEA中导入jQeury文件

在WEB-INF目录下新建statics包，用来放静态资源文件，然后再其下新建js包，用来放js文件

然后将jQuery的js文件拷贝到js包中

导入js静态资源后，就得在SpringMVC核心配置文件中加入静态资源过滤，过滤静态资源交给Web应用伺服器默认的Servlet处理

<!–静态资源过滤–> <mvc:default-servlet-handler/>

4. 在controller中编写两个允诺方法

在AjaxController中编写两个允诺方法，允诺路径位/ajax1

允诺的参数为name，判断参数并打印true或false

@RequestMapping(“/ajax1”) public void ajax1(String name, HttpServletResponse response) throws IOException { if (“zsr”.equals(name)) response.getWriter().print(“true”); else response.getWriter().print(“false”); }

5. 编写index.jsp测试页面

同时实现原理很简单，透过onblur属性绑定当失去焦点事件，失去焦点时，调用onblurFunc()函数，使用jquery的post()方法发动两个post允诺

他们查看post()方法源码，发现实质上还是调用了jQuery.ajax()函数，一共有四个参数

url：允诺的url地址data：连同允诺发送到伺服器的统计数据，必须为key/value的格式，key的名字与controller中允诺的参数名对应（这儿发送的统计数据为name）Callback：回调函数，用来处理允诺回来的统计数据（这儿打印后端返回的统计数据data和执行状况）type：伺服器返回的统计数据类型，这儿省略

<%@ page contentType=”text/html;charset=UTF-8″ language=”java” %> <html> <head> <title>$Title$</title> <%–注意script标签一定要成对出现–%> <script src=”${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js”></script> <script> function onblurFunc() { $.post({ url: “${pageContext.request.contextPath}/ajax1”, data: {“name”: $(“#username”).val()}, success: function (data, status) { console.log(data);//后端传来的统计数据 console.log(status);//执行状况 } }); } </script> </head> <body> <%–onblur:失去焦点事件,失去焦点的时候，发动两个允诺到前台–%> 用户名：<input type=”text” id=”username” onblur=”onblurFunc()”/> </body> </html>