共计 2604 个字符，预计需要花费 7 分钟才能阅读完成。
Ajax 技术简介
背景剖析？
在互联网高速倒退的明天，传统的 WEB 利用，对于高并发、高性能、高可靠性的要求已火烧眉毛。单线程形式的客户端与服务端交互方式曾经不能满足现阶段的需要. 咱们须要以异步、按需加载的形式从服务端获取数据并及时刷新，来进步用户体验，于是 Ajax 技术诞生。
Ajax 是什么？
Ajax (Asynchronous JavaScript and XML) 是一种 Web 利用客户端技术, 能够借助客户端脚本 (javascript) 与服务端利用进行异步通信(能够有多个线程同时与服务器交互)，并且按需获取服务端数据当前, 能够进行部分刷新, 进而进步数据的响应和渲染速度。
Ajax 利用场景？
Ajax 技术最大的劣势就是底层异步, 而后部分刷新, 进而进步用户体验, 这种技术当初在很多我的项目中都有很好的利用, 例如:
- 商品零碎。
- 评估零碎。
- 地图零碎。
- …..
AJAX 能够仅向服务器发送并取回必要的数据，并在客户端采纳 JavaScript 解决来自服务器的响应。这样在服务器和浏览器之间替换的数据大量缩小，服务器响应的速度就更快了。但 Ajax 技术也有劣势，最大劣势是不能间接进行跨域拜访。
Ajax 利用模型剖析？
Ajax 疾速入门
Ajax 申请响应过程剖析
传统形式是 web 申请与响应(客户端要期待响应后果), 如图所示:
Ajax 形式的申请与响应(要害是客户端不阻塞), 如图所示:
Ajax 编程步骤及模板代码剖析
Ajax 编码的根本步骤?(重点是 ajax 技术的入口 -XMLHttpRequest-XHR 对象)
第一步: 基于 dom 事件创立 XHR 对象
第二步: 在 XHR 对象上注册状态监听 (监听客户端与服务端的通信过程)
第三步: 与服务端建设连贯 (指定申请形式, 申请 url, 同步还是异步)
第四步: 发送申请(将申请数据传递服务端)
Ajax 编码过程的模板代码如下:
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){console.log(xhr.responseText)
}
}
xhr.open("GET",url,true);
xhr.send(null);
SpringBoot 我的项目 Ajax 技术利用入门剖析
第一步: 创立我的项目 module, 如图所示:
第二步: 增加 Spring web 依赖, 代码如下:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>第三步: 创立 AjaxController 解决客户端申请, 代码如下:
package com.cy.pj.ajax.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class AjaxController {@RequestMapping("/doAjaxGet01")
public String doAjaxGet01(){return "Response Result Of Ajax Get Request 01";}
}第四步: 在我的项目中 static 目录下, 创立一个页面 ajax-01.html, 代码如下:
html 元素代码如下:
<h1>The Ajax 01 Page</h1>
<fieldset>
<legend>Ajax 异步 Get 申请 </legend>
<button onclick="doAjaxGet01()">Ajax Get Request</button>
<span id="result">Data is Loading ...</span>
</fieldset>javascript 脚本代码如下:
function doAjaxGet01(){//debugger// 客户端断点(此断点失效须要关上控制台)
//1. 创立 XHR 对象(XmlHttpRequest)-Ajax 利用的入口对象
let xhr=new XMLHttpRequest();
//2. 在 XHR 对象上注册状态监听(拿到服务端响应后果当前更新到页面 result 地位)
xhr.onreadystatechange=function(){// 事件处理函数(客户端与服务端通信状态发生变化 时会执行此函数)
//readyState== 4 示意服务端响应到客户端数据曾经接管实现.
if(xhr.readyState==4){if(xhr.status==200){//status==200 示意申请处理过程没问题
document.getElementById("result").innerHTML=
xhr.responseText;
}
}
}
//3. 与服务端建设连贯(指定申请形式, 申请 url, 异步)
xhr.open("GET","http://localhost/doAjaxGet01",true);//true 代表异步
//4. 向服务端发送申请
xhr.send(null);//get 申请 send 办法外部不传数据或者写一个 null
console.log("===main thread===")
// 如果是异步客户端执行完 send 会持续向下执行.
}第五步: 启动 Tomcat 服务并进行拜访测试剖析.
点击 Ajax Get Request 按钮, 检测页面数据更新.
第六步: 启动及拜访过程中的 Bug 剖析
- 点击按钮没反馈
- 拜访指定属性的对象不存在
- 跨域拜访
Ajax 根本业务实现
根本业务形容
服务端要害代码设计及实现
客户端要害代码设计及实现
Ajax 技术进阶实现
Ajax 代码的封装
Ajax 编程小框架的实现
Ajax 技术在 Jquery 中的利用
Jquery 简介
Jquery 中罕用 ajax 函数剖析
Jquery 中 Ajax 函数的根本利用实现
总结(Summary)
本章次要介绍了 Ajax 是什么、利用场景、客户端与服务端的通信模型、ajax 编程的根本步骤、封装过程以及 ajax 技术在一些 JS 框架中的利用等，并且重点剖析了在 ajax 编码过程中的一些调试技巧。
