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编码过程中的一些调试技巧。
发表回复