开发者社区> 橘子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

HTML5与后台服务器的数据流动问题

简介:
+关注继续查看

 编辑中,尚未完稿。。。2017.7.14 1345

 

很多前端开发出来的HTML5可能对于后台开发者来说,并不是很清楚,也许像我一样一知半解。而且真的让人很糊涂的地方就是前端的JS如何与后端的数据库进行双向通信,交互数据。

一种解释认为简单点说,这就是前端技术与后端技术沟通,根据业务定义交互接口,交互接口的的形式可能包含:
1、后端将数据输出到HTML页面,在JS控制逻辑中需要访问数据时可以从HTML中取得。
2、定义前后端请求的接口,一般是AJAX接口,如果存在跨域问题或一些特殊的业务场景,可能也会使用JSONP或者其他方式,总之,不论是何种方式请求,目的都是动态的请求数据,然后根据返回数据刷新页面内容。返回数据的格式现在主流是使用JSON格式,但是也不排除一些特殊的业务场景需要是使用XML或其他格式的数据。

 

对于我一样的新手,跨域请求的例子可参考Ajax 跨域请求如何解决ajax跨域问题(转)

总之非跨域请求限制比较少,但跨域请求的限制很多。

最初XHR对象是不能跨域的,但新版本的浏览器允许跨域,但需要服务端对当前网站开权限。

在不允许跨域的年代,都是通过某些hack的方法来实现跨域的。通常是借助一些天生能够跨域的元素:script, img, iframe,这些元素里面script最好,因为可以很方便地执行JS代码,从而能够对返回的数据进行处理。
跨域的优势是能充分利用分布式集群系统,使某些服务压力可以分散到多台服务器上。但数据交互的安全性上有一定影响。
不跨域的优势是前台页面和后台服务都在一个服务器下,安全性高,但但不能分摊负载。
目前计算机行业正在向高集成,多并发,低耦合的方向发展。所有基础服务以接口的方式提供是很好的一种方案(像百度地图,微信,支付宝都有服务接口),基础服务和中间件之间的交互也可能采用服务调用的方式,这些问题就牵扯到跨域,处理好跨域和安全的平衡点是这类集成系统的需要重点权衡的方面之一。

 

现在的互联网技术发展的越来越快,我们在开发过程中遇到的问题也越来越多。比如当我们需要进行跨域访问数据的时候该如何进行开发?本篇博文就记述如何使用Ajax进行跨域访问调用数据。

1、非跨域调用

我们用到的最多是这样的方式,也就是非跨域的进行访问,只是简单的在我们的网页中进行Ajax使用即可。如下面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
 * 非跨域请求方式
 */ 
function feikuayu() { 
    $.ajax({ 
        type: "post"
        url: platformUrl + "/security/modifyPwd"
        data: $('#updatepwdform').serialize(), 
        dataType: "json"
        success: function (data) { 
            $("#updatepwd_btn").click(); 
            $.toast("修改成功,系统即将退出,请重新登录", 1500); 
        }, 
        error: function () { 
            $.toast("网络异常", 1500); 
        
    }); 

2、跨域请求

在我们进行跨域请求时需要改变ajax固定参数:

        dataType:"jsonp",
        crossDomain:true,
        jsonpCallback:"jsonpCallbackFun",
        jsonp:"callback",

且后台返回的数据格式必须是:jsonpCallbackFun(json数据); 这里的jsonpCallbackFun是你自定义的回调函数方法名。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
 * 跨域请求方式
 */ 
function kuayu() { 
    $.ajax({ 
        type: "post"
        url: platformUrl + "/security/modifyPwd"
        data: params, 
        dataType: "jsonp"
        crossDomain: true
        jsonpCallback: "jsonpCallbackFun"
        jsonp: "callback"
        success: function (data) { 
            if (data.result == 1) { 
                $("#updatepwd_btn").click(); 
                $.toast("修改成功,系统即将退出,请重新登录", 1500); 
                setTimeout("logout()", 1600); 
            else if (data.result == 2) { 
                $.toast(data.msg, 1500); 
            else 
                $.toast("修改失败", 1500); 
            
        }, 
        error: function () { 
            $.toast("网络异常", 1500); 
        
    }); 

 

两种协议类型

SOAP

我们知道Android网络通信的方式有两种:基于Socket和基于HTTP。基于HTTP又包括两种编程方式:HttpUrlConnection和HttpClient。

HttpURLConnection和SOAP完全是两回事,前者是网络编程方式(发送请求、获得应答),后者是一种数据传输协议,由于其基于XML,可以穿越防火墙,所以在Web Service中大受欢迎。

当比较HttpURLConnection与之之间的区别时,可以得知:

二者区别是,HttpURLConnection实现网络连接数据传输,SOAP以XML方式定义传输的数据格式(当然SOAP不光光定义数据格式,还包括方法、消息很多格式)。

其实将HTTP和SOAP放在一起比较更有意义,借用网络上的一段文字:

不同:都是底层的通信协议,请求包的格式不同而已,soap包是XML格式,http纯文本格式。

关系:SOAP是个通信协议, SOAP在HTTP协议的基础上,把编写成XML的REQUEST参数, 放在HTTP BODY上提交个WEB SERVICE服务器(SERVLET,ASP什么的) 处理完成后,结果也写成XML作为RESPONSE送回用户端, 为了使用户端和WEB SERVICE可以相互对应,可以使用WSDL作为这种通信方式的描述文件,利用WSDL工具可以自动生成WS和用户端的框架文件,SOAP具备把复杂对象序列化捆绑到XML里去的能力。

  其实SOAP最早是针对RPC的一种解决方案,简单对象访问协议,很轻量,同时作为应用协议可以基于多种传输协议来传递消息(Http,SMTP等)。但是随着SOAP作为WebService的广泛应用,不断地增加附加的内容,使得现在开发人员觉得SOAP很重,使用门槛很高。在SOAP后续的发展过程中,WS-*一系列协议的制定,增加了SOAP的成熟度,也给SOAP增加了负担。

 

 

 REST

       REST其实并不是什么协议也不是什么标准,而是将Http协议的设计初衷作了诠释,在Http协议被广泛利用的今天,越来越多的是将其作为传输协议,而非原先设计者所考虑的应用协议。SOAP类型的WebService就是最好的例子,SOAP消息完全就是将Http协议作为消息承载,以至于对于Http协议中的各种参数(例如编码,错误码等)都置之不顾。其实,最轻量级的应用协议就是Http协议。Http协议所抽象的get,post,put,delete就好比数据库中最基本的增删改查,而互联网上的各种资源就好比数据库中的记录(可能这么比喻不是很好),对于各种资源的操作最后总是能抽象成为这四种基本操作,在定义了定位资源的规则以后,对于资源的操作通过标准的Http协议就可以实现,开发者也会受益于这种轻量级的协议。 
       自己理解的将REST的思想归结以下有如下几个关键点: 
       
1.面向资源的接口设计 
所有的接口设计都是针对资源来设计的,也就很类似于我们的面向对象和面向过程的设计区别,只不过现在将网络上的操作实体都作为资源来看待,同时URI的设计也是体现了对于资源的定位设计。后面会提到有一些网站的API设计说是REST设计,其实是RPC-REST的混合体,并非是REST的思想。 

2.抽象操作为基础的CRUD 
       这点很简单,Http中的get,put,post,delete分别对应了read,update,create,delete四种操作,如果仅仅是作为对于资源的操作,抽象成为这四种已经足够了,但是对于现在的一些复杂的业务服务接口设计,可能这样的抽象未必能够满足。其实这也在后面的几个网站的API设计中暴露了这样的问题,如果要完全按照REST的思想来设计,那么适用的环境将会有限制,而非放之四海皆准的。       

3.Http是应用协议而非传输协议 
       这点在后面各大网站的API分析中有很明显的体现,其实有些网站已经走到了SOAP的老路上,说是REST的理念设计,其实是作了一套私有的SOAP协议,因此称之为REST风格的自定义SOAP协议。 

4.无状态,自包含 
这点其实不仅仅是对于REST来说的,作为接口设计都需要能够做到这点,也是作为可扩展和高效性的最基本的保证,就算是使用SOAP的WebService也是一样。

 

 

 

参考文章

1.html5 怎么和后端进行数据交互

ajax跨域和不跨域有什么区别?

 JQuery Ajax跨域调用和非跨域调用的问题

WebService的两种方式SOAP和REST比较

没有整理与归纳的知识,一文不值!高度概括与梳理的知识,才是自己真正的知识与技能。 永远不要让自己的自由、好奇、充满创造力的想法被现实的框架所束缚,让创造力自由成长吧! 多花时间,关心他(她)人,正如别人所关心你的。理想的腾飞与实现,没有别人的支持与帮助,是万万不能的。




    本文转自wenglabs博客园博客,原文链接:http://www.cnblogs.com/arxive/p/7163577.html,如需转载请自行联系原作者



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML之文本格式化、链接、头部、CSS(笔记小结)
HTML之文本格式化、链接、头部、CSS(笔记小结)
0 0
【前端】css布局html页面之inline-block布局错位解决方法
本篇文章中,主要讲讲前端布局的情况 对于,对于刚接触前端开发的小伙伴来说,布局是一个比较重要的知识点,如果知识点理解不到位,那么很容易出现布局错位的情况
0 0
通过DOM对HTML文档的元素内容和CSS样式进行操作
通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到,通过DOM我们可以操作HTMl文档中的任意的元素及属性,文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码: <button id="btn">切换</button> <div class="wrap" id="wrap" style="color: yellow;"> <p id="text" class="text">这是一个段落</p> <ul class="list">
0 0
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
0 0
用HTML+CSS构建一个绚丽的登录页面
自动切换背景,登录页面,水滴效果,绚丽的登录页面
0 0
HTML+CSS实现商品介绍模考(以Apple14为案例)
本文以最通俗易懂的语言为读者提供一个经典CSS小案例,商品介绍模块,并且结合时事,以Apple14为案例进行讲解。
0 0
实训-利用HTML+CSS制作某米官网首页(二)
实训-利用HTML+CSS制作某米官网首页
0 0
实训-利用HTML+CSS制作某米官网首页(一)
实训-利用HTML+CSS制作某米官网首页
0 0
实训-利用HTML+CSS做响应式项目网页
实训-利用HTML+CSS做响应式项目网页
0 0
教你用HTML+CSS实现百叶窗动画效果
我们浏览网页的时候总能看见一些炫酷的特效,比如百叶窗效果,本文我们就用HTML+CSS制作一个百叶窗小项目,适合刚学前端的小伙伴,使用代码简单易懂,很容易上手,学习完本文后,相信你也能敲出来属于自己的百叶窗效果,改变图片及相应盒子的大小,有女朋友的可以试着放几张在一起的照片,也是一件非常浪漫的事
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
基于浏览器的实时构建探索之路
立即下载