前后端交互模式大总结艾提拉总结 attilax总结目录 1. 通过ajax ajax就是js的网络api 完全解耦合推荐 1 1.1. Query Ajax 操作函数 1 1.2. 服务

前后端交互模式大总结艾提拉总结 attilax总结

1. 通过ajax ajax就是js的网络api 完全解耦合推荐 1

1.1. Query Ajax 操作函数 1

1.2. 服务端远程脚本模式（简单快速） 2

1.3. 定义和用法 2

1.3.1. 语法 2

1.4. .利用cookie对象 3

1.5. 通过websocket 性能更高 4

1.6. 通过浏览器注入对象注入方法主要应用在cs桌面模式下 4

1.6.1. 浏览器注入对象、函数jsbridge 4

1.6.2. JsBridge的核心 4

1.7. 浏览器插件模式 5

1.8. 服务端语言的前端交互session 页面对象el 5

2. 后端调用前端方法 5

2.1. Ajax回调 5

2.2. 通过websocket 5

2.3. 直接执行js ，cs模式下 5

通过ajax ajax就是js的网络api 完全解耦合推荐

三种ajax模式三种方式, XMLHttpRequest(XHR)，Fetch ，jQuery实现的AJAX。

原生js api，繁琐。。。Fetch api

Jquery ajax库

Query Ajax 操作函数

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数	描述
jQuery.ajax()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()	设置将来的 Ajax 请求的默认值。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。

服务端远程脚本模式（简单快速）

后端可用springboot

@RequestMapping(value="/list.json" )

public String testUploadFile2(HttpServletResponse response )

return "list_data_fromjs="+JSON.toJSONString(li) +"";

}

定义和用法

getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

语法

jQuery.getScript(url,success(response,status))

参数

描述

url

将要请求的 URL 字符串。

success(response,status)

可选。规定请求成功后执行的回调函数。

额外的参数：

response - 包含来自请求的结果数据
status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）

//http://localhost:8080/rmtJs

</script>

//alert(jsVar);

jQuery.getScript("http://localhost:8080/rmtJs",function(response,status){

console.log(response) //undefined

console.log(status) //success

alert(jsVar);

})

</script>

Prj rmtjsPrjHtml

.利用cookie对象

Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提，就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。

Js api document.cookie

Jq api

使用方法

$.cookie('the_cookie'); // 获得cookie

$.cookie('the_cookie', 'the_value'); // 设置cookie

$.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie

$.cookie('the_cookie', '', { expires: -1 }); // 删除

$.cookie('the_cookie', null); // 删除 cookie

$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一个cookie 包括有效期路径域名等

通过websocket 性能更高

通过浏览器注入对象注入方法主要应用在cs桌面模式下
1. 浏览器注入对象、函数jsbridge
2. JsBridge的核心

JsBridge之所以能实现Native与Js相互调用的功能，其核心实现其实就是：

拦截Url
load url("javascript:js_method()");

先说第二点，Native调用Js，通过加载以javascript:开头的url即可实现调用Js的方法。这个很好理解，在web中也是通过这种方式调用Js的方法的。
然后细说下第一点的实现：

浏览器插件模式

▪ ActiveX ▪ Java Applet ▪ JavaFX ▪

▪ Silverlight ▪ ActionScript ▪ Flex ▪ AIR

1. 服务端语言的前端交互session 页面对象el
后端调用前端方法
1. Ajax回调
2. 通过websocket
3. 直接执行js ，cs模式下

Atitit title 头衔头街称号 v19

作者简介

艾龙 attilax，法名 st attilax akbar rinpoche 圣阿提拉科斯阿克巴仁波切

头街软件技术大师 uke组织创始人

学术成就，完善的20大知识体系，拥有uke学院硕士博士学位

从事软件互联网行业技术背景十二年，csdn排名TOP57

长年从事软件互联网技术与管理，预计出版多本心得分享书籍

擅长技术与管理与文化致力于标准化事业

Qq 1466519819 小号112237553

微信attilax 小号attilax201708

作者:: 绰号与头街 :老哇的爪子claw of Eagle 偶像破坏者Iconoclast image-smasher 神的使者（Messenger of God）及守望者（Watch Man

捕鸟王"Bird Catcher kok 虔诚者Pious 宗教信仰捍卫者 Defender Of the Faith. 卡拉卡拉红斗篷 Caracalla red cloak KOA万兽之王纵火者

头街来源：神的使者（Messenger of God）及守望者（Watch Man来源于圣经

老哇的爪子claw of Eagle来源于印加帝国

KOA万兽之王来源于婆罗门大神森林中修炼

简称：： st Emir Attilax Akbar 圣埃米尔阿提拉克斯阿克巴

全名：：st Emir Attilax Akbar bin Mahmud bin attila bin Solomon bin adam Al Rapanui 圣埃米尔阿提拉克斯阿克巴本马哈茂德本阿提拉本所罗门本亚当阿尔拉帕努伊

常用名：艾提拉（艾龙）， EMAIL:1466519819@qq.com

头衔：

uke	Emir Uke部落首席大酋长，ati协会创始人 uke总部o2o负责人，全球网格化项目创始人，圣阿提拉克斯国王
科技领域	UTSC uke技术标准化委员会委员长 uke 首席cto 软件部门总监技术部副总监研发部门总监主管产品部副经理项目部副经理 uke科技研究院院长 uke软件培训大师 Ati组织科研研究院创始人
文艺领域	，，， uke机车协会主任 uke纹身协会 uke交友协会会长 uke捕猎协会会长 Ati文艺协会会长 ati文学协会
行政领域	Gchsp总裁 gchsp常委 GsP创始人
媒体传播领域	uke出版社编辑总编宣传布道总策划 Ati传媒总部
渔猎军事领域	uke保安部首席大队长 Uke 户外运动协会理事长度假村首席大村长 Ati打猎协会
法学	法学研究会制度研究会
管理领域	工商管理学公共管理与社会服务 ,uke制度检查委员会副会长
教育领域	uec学院校长， uecip图像处理机器视觉专业系主任 uke文档检索专业系主任 Uke图像处理与机器视觉学院首席院长 uke终身教育学校副校长靓号研究院
经济领域	uke波利尼西亚区大区连锁负责人汤加王国区域负责人 uke克尔格伦群岛区连锁负责人，莱恩群岛区连锁负责人，uke布维岛和南乔治亚和南桑威奇群岛大区连锁负责人 Uke软件标准化协会理事长理事长 Uke 数据库与存储标准化协会副会长直达巴士西北区负责人直达巴士长沙与西安分部部长润昌通讯软件事业部总裁执行长分部负责人执行委员会主席 Ati经济研究所
历史领域	历史事业部 ati历史研究院
社会科学领域	社科学院 ati文化部
自然科学领域	Uke研究院院长兼首席研究员科学家 Ati自然科学研究院
宗教神学领域	uke宗教与文化融合事务部部长大师master uke制度与重大会议委员会委员长 ati宗教事务所
医学领域	Uke医院与医学院方面的创始人

转载请注明来源：attilax的专栏 http://blog.csdn.net/attilax

http://www.cnblogs.com/attilax/

Microblog

http://weibo.com/u/5941179815 (common attilax)

https://weibo.com/p/1005055941179815 （attilax201707,bek weibo）

http://weibo.com/u/5487832265 (tech,for blog auto gene)

知乎空间

https://www.zhihu.com/people/ati-att/activities

Qq 1466519819 小号112237553

微信attilax 小号attilax201708

微博 attilax2016 小号attilax201707

--Atiend v20

修改历史记录

V21 增加神的使者头街守望者

在旧约中，“神人”（Man of God），神的使者（Messenger of God）及守望者（Watch Man），也是指先知。他们是负有上帝特殊使命的人，同时又是关心世人灵性问题的人

V20 增加了7行的作者简介

V18增加了GsP 头街 v19增加了圣字头街与圣阿提拉克斯王国国王头街

V17 增加了ati组织的头街

V16 结构化表格化头街，并且头街增加一些。充实了空虚。

V15 增加了知乎空间微博大小号

V14 增加小号，以及通讯公司与直达巴士分部

V12 增加机构utsc

V10 增加了microblog

万兽之王本来这个是湿婆的。。

V7 增加了研究院title

V8 去了奶牛科技的东东

V9 融和俩个v8版本。。

增加了cnblogs的url

前后端交互模式大总结艾提拉总结 attilax总结目录 1. 通过ajax ajax就是js的网络api 完全解耦合推荐 1 1.1. Query Ajax 操作函数 1 1.2. 服务相关推荐

VS code实现前后端交互及大屏可视化（Flask+Mysql+Echarts+HTML+JS+CSS）
@阿乐今天敲代码没前言最近老师留了大屏可视化作业,老师讲的模棱两可,在网上又找不到详细的教程,想必好多萌新都跟我一样苦恼,所以在这里记录下,实验工具为VS code.先贴一下我的实验结果图吧,虽然 ...
springboot+mybatis+thymeleaf项目搭建及前后端交互
前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...
Vue学习笔记（三） —— 前后端交互
简介本文主要是为了介绍前端交互的相关知识,而严格来讲,这也不算是Vue的专属知识,但是却是必须要指定的.本文开始简单说了ajax.jquery 的方式,但是随着SPA开发模式的大火,相继出现了一些新 ...
VUE进行前后端交互
目录一. 跨域 1. 什么是跨域? 2. 什么是本域? 3. 浏览器请求的三种报错二.SpringBoot解决跨域问题+其他前后端跨域请求解决方案 1. SpringBoot上直接添加@Cross ...
前后端交互ajax和axios入门讲解，以及http与服务器基础
ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 文章目录 ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 前言一.Aj ...
Servlet实现简单的前后端交互
Servlet实现简单的前后端交互首先前后端交互是啥呢? 在我的理解中大概是这样的: 简单的讲就是数据的交换接下来我们来看看应该要怎么实现这个简单的交互: 1.首先我们前端先不写静态页面,直接在u ...
前后端分离模式下前端与后端数据交互
下面举的例子就是使用jQuery Ajax和Python Flask进行前后端交互时,前端提交表单数据到后端,后端返回JSON数据给前端. 前端GET提交表单数据: # GET请求var data = ...
JAVA电子病历系统源码，云端SaaS服务前后端分离模式开发和部署
电子病历系统是什么? 电子病历是指医务人员在医疗活动过程中,使用医疗机构信息系统生成的文字.符号.图表.图形.数据.影像等数字化信息,并能实现存储.管理.传输和重现的医疗记录,是病历的一种记录形式. ...
艾提拉近年来技术大总结
##基本信息姓名:艾提拉民族:汉生日:1984.3 email:1466519819@qq.com 英文名&网名id : attilax 曾用名:艾龙 ##主要方向与目标: 技术 ...
浅论前后端分离模式：低代码强势推动开发效率提升
编者按:本文介绍前后端分离,以及低代码如何采用前后端分离等先进技术为软件开发赋能提效,提高用户开发体验. 如何理解分离前后端? 前后端分离,其实就是将一个单体应用拆分成两个独立的应用,只通过简单的AP ...

前后端交互模式大总结艾提拉总结 attilax总结目录 1. 通过ajax ajax就是js的网络api 完全解耦合推荐 1 1.1. Query Ajax 操作函数 1 1.2. 服务

前后端交互模式大总结艾提拉总结 attilax总结目录 1. 通过ajax ajax就是js的网络api 完全解耦合推荐 1 1.1. Query Ajax 操作函数 1 1.2. 服务相关推荐

最新文章

热门文章

前后端交互模式大总结 艾提拉 总结 attilax总结 目录 1. 通过ajax ajax就是js的网络api 完全解耦合 推荐 1 1.1. Query Ajax 操作函数 1 1.2. 服务

前后端交互模式大总结 艾提拉 总结 attilax总结 目录 1. 通过ajax ajax就是js的网络api 完全解耦合 推荐 1 1.1. Query Ajax 操作函数 1 1.2. 服务相关推荐

最新文章

热门文章

前后端交互模式大总结艾提拉总结 attilax总结目录 1. 通过ajax ajax就是js的网络api 完全解耦合推荐 1 1.1. Query Ajax 操作函数 1 1.2. 服务

前后端交互模式大总结艾提拉总结 attilax总结目录 1. 通过ajax ajax就是js的网络api 完全解耦合推荐 1 1.1. Query Ajax 操作函数 1 1.2. 服务相关推荐