编辑中,尚未完稿。。。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使用即可。如下面代码:

    /**
* 非跨域请求方式
*/
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是你自定义的回调函数方法名。

代码如下:

    /**
* 跨域请求方式
*/
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比较

HTML5与后台服务器的数据流动问题的更多相关文章

  1. React学习(4)——向服务器请求数据并显示

    本文中涉及到的技术包括:node.js/express服务器的搭建.fetch发送数据请求. 在之前的几篇文章中,介绍了如何搭建基础的React项目,以及一些简单知识,现在,我们还需要掌握如何用Rea ...

  2. HTML5中的服务器‘推送’技术 -Server-Sent Events

    转帖:http://www.developersky.net/thread-63-1-1.html 一直以来,HTTP协议都是严格遵循Request-Response模型的.客户端发送一个Reques ...

  3. application/x-www-form-urlencoded multipart/form-data text/plain 后台返回的数据响应的格式类型

    application/x-www-form-urlencoded multipart/form-data text/plain 为什么上传文件的表单里要加个属性 enctype  后台返回的数据响应 ...

  4. Now直播应用的后台服务器性能测试实践

    版权声明:本文由Oliver原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/208 来源:腾云阁 https://www.q ...

  5. Flask04 后台获取请求数据、视图函数返回类型、前台接受响应数据

    1 后台获取请求数据 1.1 提出问题 前台发送请求的方式有哪些 后台如何获取这些请求的参数 1.2 前台发送请求的方式 GET.POST.AJAX 点睛:如果不指定请求方式,浏览器默认使用GET请求 ...

  6. 前端笔记之服务器&Ajax(上)服务器&PHP&数据交互&HTTP

    一.服务器 1.1 什么是服务器,做什么的? 服务器,就是放在机房中的电脑,和我们的电脑的区别在与服务器有固定的IP,服务器的安全性和稳定性相当的高;性能一般就可以了,但是CPU的性能要比普通的客户机 ...

  7. ArcGIS 后台服务器抛出异常

    ArcGIS工具箱是一个非常经典的工具应用,它就像一个做过很多项目.技术不断丰富的大神.以至于,现在ESIR与ITT公司合作,搞得新版的ENVI都有工具箱这样的界面了. 抛出异常 并不是每一个问题都能 ...

  8. 在Html5中与服务器交互

    转自原文 在Html5中与服务器交互 刚刚涉足职场,上头就要我研究HTML5,内嵌到手机上,这对我来说完全是一个陌生的领域,不过也正好给自己一个机会来学习,最近做到要跟服务器交互这部分,这部分可是卡了 ...

  9. ajax向后台传递数组参数并将后台响应的数据赋值给一个变量供其它插件使用

    1.在js中封装ajax向后台传递数组参数函数 //combogrid * * @Description 封装ajax向后台传递数组参数并将后台响应的数据赋值给一个变量方便其他插件使用该数据函数 * ...

随机推荐

  1. BA--湿球温度和干球温度的区别

    关于湿球温度和干球温度的区别: 干湿球温度表:用一对并列装置的.形状完全相同的温度表,一支测气温,称干球温度表,另一支包有保持浸透蒸馏水的脱脂纱布,称湿球温度表.当空气未饱和时,湿球因表面蒸发需要消耗 ...

  2. nyoj--120--校园网络(scc+缩点)

    校园网络 时间限制:3000 ms  |  内存限制:65535 KB 难度:5 描述 南阳理工学院共有M个系,分别编号1~M,其中各个系之间达成有一定的协议,如果某系有新软件可用时,该系将允许一些其 ...

  3. oracle 11gR2 如何修改public ip

    修改public ip 修改前后ip信息 修改前ip信息 p570a 192.168.1.10 p570b 192.168.1.11 修改后ip信息 p570a 1.7.3.112 p570a 1.7 ...

  4. ROS-机器人建模与仿真概论

    前言:无论是因为高昂的设备费用还是为了减少实验次数,仿真都是十分必要的. ROS提供了很多优秀的仿真方式,下面来介绍一下: URDF:Unified Robot Description Format, ...

  5. DirectUI界面编程(六)实现右键弹出菜单

    本节向大家介绍一下右键弹出菜单是如何实现的.效果如下,在窗口中点击鼠标右键弹出菜单,点击菜单项能够响应菜单点击事件. 使用Duilib库实现的弹出菜单,实际上也是一个Windows窗口,因此我们需要创 ...

  6. 有关windows dpi适配(c#)

    /// <summary>当前Dpi</summary> public static Int32 Dpi { get; set; } /// <summary>修正 ...

  7. 深入浅出JDK动态代理(一)

    1.何为代理 代理,即代替主角完成一些额外的事情.例如,明星都有经纪人,明星参演电影之前,经纪人作为明星的代理人和出资方洽谈片酬.排期等,而真正参与拍戏的还是明星本人,明星拍完戏后,由经纪人代理明星去 ...

  8. ZBrush破解版下载,ZBrush中文版下载

    11月11日这个令人兴奋的日子又来了.没错,“双十一”所有网购达人狂欢的日子.但是ZBrush却让心心念念的小伙伴们失望了一把,本以为双十一期间会有相关活动的,结果,官方并未提及,事实上,ZBrush ...

  9. day05-1 执行Python程序的两种方式

    目录 执行Python程序的两种方式 第一种:交互式 第二种:命令行式 三个步骤 两种方式的区别 执行Python程序的两种方式 第一种:交互式 在cmd中运行 优点:直接给出结果,执行效率高,及时报 ...

  10. Eclipse本地创建新的GIT分支,并推送至远程Git分支

    本地创建新的GIT分支: 1.右击要创建新分支的项目——Team——Switch To——New Branch…: 2.在弹出的对话框中name框中输入要创建的分支名称,(如果是当前显示的要拷贝的分支 ...