Ajax 控制技术概要

大背景预测

在网络高速路产业发展的那时，现代的WEB应用领域，对高mammalian、高效能、高效率的明确要求已刻不容缓。Renderscript形式的应用领域程序与服务器端X310e早已无法满足用户眼下的市场需求.他们须要以触发器、按需读取的

Ajax 是甚么？

Ajax (Asynchronous JavaScript and XML) 是一类Web应用领域应用领域程序控制技术,能借

Ajax 应用领域情景？

Ajax控制技术最小的竞争优势是下层触发器,接着局部性创下,从而提升使用者新体验,此种控制技术那时在许多工程项目中都有较好的应用领域,比如:

货品控制系统。赞扬控制系统。世界地图控制系统。…..

AJAX能仅向伺服器发送并拿取必要性的统计数据，并在应用领域程序选用JavaScript处置源自伺服器的积极响应。这种在伺服器和应用程序间互换的统计数据大批增加，伺服器积极响应的速率就更快了。但Ajax控制技术也有下风，最小下风是无法间接展开布吕马出访。

Ajax 加速进阶

Ajax 允诺积极响应操作过程预测

现代形式是web允诺与积极响应(应用领域程序要等候积极响应结论),总的来看:

Ajax形式的允诺与积极响应(关键是应用领域程序不阻塞),总的来看:

Ajax 编程步骤及模板代码预测

Ajax 编码的基本步骤?(重点是ajax控制技术的入口-XMLHttpRequest-XHR对象)

第一步:基于dom事件创建XHR对象

第二步:在XHR对象上注册状态监听(监听应用领域程序与服务器端的通讯操作过程)

第三步:与服务器端建立连接(指定允诺形式,允诺url,同步还是触发器)

第四步:发送允诺(将允诺统计数据传递服务器端)

Ajax 编码操作过程的模板代码如下:

var xhr=newXMLHttpRequest(); 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(“/doAjaxStart”) public String doAjaxStart(){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=“doAjaxStart()”>Ajax Get Request</button> <span id=“result”>Data is Loading …</span> </fieldset>

javascript 脚本代码如下:

第五步:启动Tomcat服务并展开出访测试预测.

点击Ajax Get Request 按钮,检测页面统计数据更新.

第六步:启动及出访操作过程中的Bug预测

点击按钮没反应

出访指定属性的对象不存在

布吕马出访

Ajax 基本业务实现

基本业务描述

基于对ajax控制技术理解,实现ajax形式的Get,Post,Put,Delete等允诺的触发器处置,总的来看:

服务器端关键代码设计及实现

基于业务描述,在AjaxController类中添加相关属性和方法,用于处置应用领域程序的ajax允诺.

添加属性和构造方法,代码如下:

/**假设这个是用于存储统计数据的统计数据库*/ privateList<Map<String,String>> dbList=new ArrayList<>(); public AjaxController(){ Map<String,String> map=newHashMap<String,String>();map.put(“id”,“100”); map.put(“city”,“beijing”); dbList.add(map); map=newHashMap<String,String>();map.put(“id”,“101”); map.put(“city”,“shanghai”); dbList.add(map); }

添加Ajax允诺处置方法,代码如下:

@GetMapping(path={“/doAjaxGet/{city}”,“/doAjaxGet”) public List<Map<String,String> doAjaxGet(@PathVariable(required=false) String city){ List<Map<String,String>> list=new ArrayList<>(); for(Map<String,String> map:dbList){ if(map.get(“city”).contains(city)){ list.add(map); } } returnlist; }@PostMapping(“/doAjaxPost”) public String doAjaxPost(@RequestParam Map<String,String> map){ dbList.add(map);return “save ok”; } @PostMapping(“/doAjaxPostJson”) public String doAjaxPost(@RequestBodyMap<String,String> map){ dbList.add(map); return “save ok”; } @DeleteMapping(“/doAjaxDelete/{id}”)public String doDeleteObject(@PathVariable String id){ //基于迭代器执行删除操作 Iterator<Map<String,String>> it=dbList.iterator();while(it.hasNext()){ Map<String,String> map=it.next(); if(map.get(“id”).equals(id)){ it.remove();//基于迭代器执行删除操作 } } return “delete ok”; } @PostMapping(“/doAjaxPut”) public StringdoAjaxPut(@RequestParam Map<String,String> paramMap){ for(Map<String,String> map:dbList){ if(map.get(“id”).equals(paramsMap.get(“id”))){ map.put(“city”,paramMap.get(“city”)) } } return “update ok”; }

应用领域程序关键代码设计及实现

在static目录下创建ajax-02.html文件,关键代码如下:

<div> <h1>The Ajax 02 Page</h1> <button onclick=“doAjaxGet()”>Do Ajax Get</button> <button onclick=“doAjaxPost()”>Do Ajax Post</button> <button onclick=“doAjaxPostJson()”>Do Ajax Post Json</button> <button onclick=“doAjaxDelete()”>Do Ajax Delete</button> <button onclick=“doAjaxPut()”>Do Ajax Put</button> </div>

应用领域程序JavaScript脚本设计,代码如下:

Get 允诺形式,代码如下: function doAjaxGet(){ let xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){if(xhr.status==200){ document.getElementById(“result”).innerHTML=xhr.responseText; } } } let params=“” xhr.open(“GET”,`http://localhost/doAjaxGet/${params}`,true); xhr.send(null); }Post 允诺形式,代码如下:function doAjaxPost(){ let xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ document.getElementById(“result”).innerHTML=xhr.responseText; } } } xhr.open(“POST”,“http://localhost/doAjaxPost”,true); //post允诺向服务器端传递统计数据,须要设置允诺头,必须在open之后 xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”); //发送允诺(post允诺传递数据,须要将统计数据写入到send方法内部) xhr.send(“id=102&city=shenzhen”); }function doAjaxPost(){ let xhr=newXMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ document.getElementById(“result”).innerHTML=xhr.responseText; } } } xhr.open(“POST”,“http://localhost/doAjaxPost”,true); //post允诺向服务器端传递统计数据,须要设置允诺头,必须在open之后 xhr.setRequestHeader(“Content-Type”, “application/json”); //发送允诺(post允诺传递统计数据,须要将统计数据写入到send方法内部) let params={id:103,city:“xiongan”}; let paramsStr=JSON.stringify(params); xhr.send(paramsStr); }Update 允诺形式,代码如下: function doAjaxPut(){ let xhr=newXMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ document.getElementById(“result”).innerHTML=xhr.responseText; } } } xhr.open(“put”,“http://localhost/doAjaxPut”,true); //post允诺向服务器端传递统计数据,须要设置允诺头,必须在open之后 xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”); //发送允诺(post允诺传递统计数据,须要将统计数据写入到send方法内部) xhr.send(“id=101&city=tianjin”); }Delete 允诺形式,代码如下: function doAjaxDelete(){ let xhr=newXMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ document.getElementById(“result”).innerHTML=xhr.responseText; } } }let params=“102”; xhr.open(“delete”,`http://localhost/doAjaxDelete/${params}`,true); xhr.send(null); }

启动服务展开出访测试预测

Ajax 控制技术进阶实现

Ajax 代码的封装

在实际编程操作过程中他们通常会封装代码共性,提取代码特性.接着来提升代码的可重用性.比如:

xhr对象的创建

Get允诺

Post允诺

function ajaxPost(url,params,callback){//封装ajax get 允诺模板代码 //1.create xhr and set onreadystate change let xhr=createXHR(callback); //2.open connection xhr.open(“POST”,url,true); xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”); //3.send request xhr.send(params); }

post 允诺，传递json统计数据

function ajaxPostJSON(url,params,callback){ //1.create xhr and set onreadystate change letxhr=createXHR(callback);//2.open connection xhr.open(“POST”,url,true); xhr.setRequestHeader(“Content-Type”,“application/json”); //3.send request xhr.send(JSON.stringify(params));//将json对象转换为json格式字符串提交到服务端 }

Put允诺

function ajaxPut(url,params,callback){//封装ajax get 允诺模板代码 //1.create xhr and set onreadystate change let xhr=createXHR(callback); //2.open connection xhr.open(“put”,url,true); xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”); //3.send request xhr.send(params); }

delete请求

创建ajax-03.html页面，在页面中分别调用如上函数展开出访测试，关键代码如下：

<div> <h1>The Ajax 03 Page</h1> <button onclick=“doAjaxGet()”>Do Ajax Get</button> <button onclick=“doAjaxPost()”>Do Ajax Post</button> <button onclick=“doAjaxPostJson()”>Do Ajax Post Json</button> <button onclick=“doAjaxDelete()”>Do Ajax Delete</button> <button onclick=“doAjaxPut()”>Do Ajax Put</button> </div> <div id=“result”></div> <script src=“/js/ajax.js”></script> <script> //ajax delete request function doAjaxDelete(){ const url=“/doAjaxDelete”;const params=“101”; ajaxDelete(url,params,function(result){ alert(result); }) }//ajax post put function doAjaxPut(){ const url=“/doAjaxPut”; const params=“id=100&city=shenzhen”; ajaxPut(url,params,function(result){ alert(result); }) } //ajax post request function doAjaxPostJson(){ const url=“/doAjaxPostJSON”; const params={id:“103”,city:“xiongan”};//服务器端须要@RequestBody ajaxPostJSON(url,params,function(result){ alert(result); }) }//ajax post request function doAjaxPost(){ const url=“/doAjaxPost”; const params=“id=102&city=shenzhen”; ajaxPost(url,params,function(result){ alert(result); }) } //ajax get request function doAjaxGet(){ const url=“/doAjaxGet”; const params=“”; ajaxGet(url,params,function(result){ document.querySelector(“#result”).innerHTML=result; }) } </script>

Ajax 编程小框架的实现(了解)

他们在实际的js编程中经常会以面向对象的形式展开实现，比如ajaxGet函数,如何以对象形式展开调用呢？关键代码预测如下：(如下代码的理解须要具备JS中面向对象的基础知识,假如不熟可暂时跳过)

此时外界在调用doAjaxGet和doAjaxPost函数时，能间接通过Ajax对象展开实现。

Ajax 控制技术在Jquery中的应用领域

Jquery概要

jQuery是一个加速、简洁的JavaScript库框架，是一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一类简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

Jquery中常用ajax函数预测

jQuery中基于标准的ajax api 提供了丰富的Ajax函数应用领域，基于这些函数能编写少量代码，便能加速实现Ajax操作。常用函数有：

ajax(…)get(…)getJSON(…)post(…)…

说明:jquery 中ajax相关函数的语法可参考官网(jquery.com).

Jquery中Ajax函数的基本应用领域实现

业务描述

构建一个html页面,并通过一些button事件,演示jquery中相关ajax函数的基本应用领域,总的来看:

关键步骤及代码设计如下:

第一步:在static目录下添加jquery-ajax-01.html页面.

第二步:在页面上添加关键的html元素,代码如下: <h1>The Jquery Ajax 01 Page</h1> <button onclick=“doAjax()”>$.ajax(…)</button> <button onclick=“doAjaxPost()”>$.post(…)</button> <button onclick=“doAjaxGet()”>$.get(…)</button> <button onclick=“doAjaxLoad()”>$(“..”).load(…)</button> <div id=“result”></div> <script src=“/js/jquery.min.js”></script>

第三步:添加button事件对应的事件处置函数,代码如下:

ajax 函数应用领域,代码如下:function doAjax(){ let url=“http://localhost/doAjaxGet”; let params=“”; //这里的$代表jquery对象 //ajax({})这是jquery对象中的一个ajax函数(封装了ajax操作的基本步骤) $.ajax({ type:“GET”,//省略type,默认是get允诺 url:url, data:params, async:true,//默认为true,表示触发器 success:function(result){//result为服务器端积极响应的结论 console.log(result);//ajax函数内部将服务器端返回的json串转换为了js对象 }//success函数会在服务器端积极响应状态status==200,readyState==4的时候执行. }); }post 函数应用领域,代码如下function doAjaxPost(){ let url=“http://localhost/doAjaxPost”; let params=“id=101&name=Computer&remark=Computer…”; $.post(url,params,function(result){ $(“#result”).html(result); });get函数应用领域,代码如下:function doAjaxGet(){ let url=“http://localhost/doAjaxGet”; let params=“”; $.get(url,params,function(result){ $(“#result”).html(result); },“text”); }load 函数应用领域,代码如下:function doAjaxLoad(){ let url=“http://localhost/doAjaxGet”; $(“#result”).get(url,function(){ console.log(“load complete”) }); }