phpajaxcontroller技巧_阿里P7大年夜佬手写SpringBoot工程中ajax技能分析及应用快来进修吧

文章目录 [+]

在互联网高速发展的本日，传统的WEB运用，对付高并发、高性能、高可靠性的哀求已迫不及待。
单线程办法的客户端与做事端交互办法已经不能知足现阶段的需求.我们须要以异步、按需加载的办法从做事端获取数据并及时刷新，来提高用户体验，于是Ajax技能出身。

Ajax 是什么？

phpajaxcontroller技巧_阿里P7大年夜佬手写SpringBoot工程中ajax技能分析及应用快来进修吧

Ajax (Asynchronous JavaScript and XML) 是一种Web运用客户端技能,可以借助客户端脚本(javascript)与做事端运用进行异步通讯(可以有多个线程同时与做事器交互)，并且按需获取做事端数据往后,可以进行局部刷新,进而提高数据的相应和渲染速率。

（图片来自网络侵删）

Ajax 运用处景？

Ajax技能最大的上风便是底层异步,然后局部刷新,进而提高用户体验,这种技能现在在很多项目中都有很好的运用,例如:

商品系统。
评价系统。
舆图系统。
…..

AJAX可以仅向做事器发送并取回必要的数据，并在客户端采取JavaScript处理来自做事器的相应。
这样在做事器和浏览器之间交流的数据大量减少，做事器相应的速率就更快了。
但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;@RestControllerpublic 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要求.

添加属性和布局方法,代码如下:

/假设这个是用于存储数据的数据库/ private List<Map<String,String>> dbList=new ArrayList<>(); public AjaxController(){ Map<String,String> map=new HashMap<String,String>(); map.put("id","100"); map.put("city","beijing"); dbList.add(map); map=new HashMap<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); } } return list;}@PostMapping("/doAjaxPost")public String doAjaxPost(@RequestParam Map<String,String> map){ dbList.add(map); return "save ok";}@PostMapping("/doAjaxPostJson")public String doAjaxPost(@RequestBody Map<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 String doAjaxPut(@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 要求办法,代码如下:

Ajax 技能进阶实现

Ajax 代码的封装

在实际编程过程中我们常日会封装代码共性,提取代码特性.然后来提高代码的可重用性.例如:

xhr工具的创建

function createXHR(callback){ //1.create XHR object let xhr=new XMLHttpRequest(); //2.set onreadystatechange xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ callback(xhr.responseText); } } } return 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 let xhr=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 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") });}总结(Summary)

本章紧张先容了Ajax是什么、运用处景、客户端与做事真个通讯模型、ajax编程的基本步骤、封装过程以及ajax技能在一些JS框架中的运用等，并且重点剖析了在ajax编码过程中的一些调试技巧。