前言

在当今社会，作为一名前端程序猿，并不是一昧的去制作静态页面就可以满足滴；你说你会制作网页，好吧，只能说你算是一个前端程序猿。但这是你作为一个程序猿最基本的能力，并不会为你进行加分；

我们都明白，要想提高竞争力，提高自己的技能是十灰重要的。前后台的数据交互就是一个很好的加分项。今天，就带大家一起了解一下web前端实现数据交互的几种方式；

一、Ajax

作为一个前端程序猿，对于各种JS框架和各种库肯定不陌生。原生js的ajax以及jQuery的ajax都是十分常用的数据交互的方式；

1.1 原生JS的Ajax

大家可能对原生JS比较陌生，毕竟相对于jQuery的ajax,原生的确实有些复杂，不够jQuery的ajax是由原生的ajax封装而来。由此可见了解原生的ajax是十分必要的；

首先，要了解异步的javascript和xml,核心对象为XMLHttpRequest.

接下啦，给大家介绍XMLHttpRequest中的属性与方法：

XMLHttpRequest属性：

二、XMLHttpRequest方法：

接下来，把栗子中的步骤整理一下：

第一步：获得XMLHttpRequest对象；

var ajax = new XMLHttpRequest();

第二步：设置状态监听函数

ajax.onreadystatechange = function(){}

第三步：open一个请求：

其中，第一个参数为传递方式：get/post;

第二个参数：请求数据的url地址；

第三个参数：true/false。true表示异步请求。false表示同步请求

ajax.open("GET","h5.json",true);

第四步：send一个请求。可以发送对象和字符串，不需要传递数据发送null;

ajax.send(null);

第五步，在监听函数中，判断readyState==4 && status == 200表示请求成功；

if (ajax.readyState == 4 && ajax.status == 200) {}

第六步，使用ajax.responseText、ajax.responseXML接收响应数据，并使用原生js操作DOM进行显示；

console.log(JSON.parse(ajax.responseText));

直接上栗子：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//第一步：获得XMLHttpRequest对象var ajax = new XMLHttpRequest();//第二步：设置状态监听函数ajax.onreadystatechange = function(){//console.log(ajax.readyState);//console.log(ajax.status);//第五步，在监听函数中，判断readyState==4 && status == 200表示请求成功；if (ajax.readyState == 4 && ajax.status == 200) {//第六步，使用ajax.responseText、ajax.responseXML接收响应数据，并使用原生js操作DOM进行显示//console.log(ajax.responseText);//console.log(ajax.responseXML);//返回不是XMl,显示nullconsole.log(JSON.parse(ajax.responseText));//console.log(eval("("+ajax.responseText+")"));}}//第三步：open一个请求ajax.open("GET","h5.json",true); //true表示异步请求。false表示同步请求//第四步：send一个请求。可以发送对象和字符串，不需要传递数据发送null;ajax.send(null);var str = "alert('111')";eval(str);eval("alert('111')");var json1 = "{'name':'zhangsan'}";console.log(eval("("+json1+")"));</script></head><body></body>
</html>

json:

[{"name": "zhangsan","age": 17,"hobby": ["吃","喝","玩","乐"],"score":{"math":78,"chinese":89}},{"name": "zhangsan","age": 17,"hobby": ["吃","喝","玩","乐"],"score":{"math":78,"chinese":89}},{"name": "zhangsan","age": 17,"hobby": ["吃","喝","玩","乐"],"score":{"math":78,"chinese":89}}]

结果：

1.1.2 解析json的两种方式

在解析json的时候，通常我们使用JSON.parse()进行解析；但是，有很多程序猿使用eval()来解析json；

1、eval函数用于将字符串中的代码解析出来并执行
当使用eval函数解析JSON字符串时，需要在函数内部将JSON字符串用()拼接
eval("("+json1+")")表示eval函数中的字符串不是用于执行，而是进行字符串解析

eval("("+json1+")") = JSON.parse(json1);

举个小例子：

1 var json1 = "{'name':'zhangsan'}";
2  console.log(eval("("+json1+")"));

结果：

1.2jQuery中的Ajax

$.ajax():是JQuery最底层的ajax函数，参数接收一个大对象。对象里面的属性和方法，表示ajax请求的相关设置：

① url : 请求远程文件的路径
② type： Ajax请求的类型，可选值 get/post
③ data: 对象格式。向后台发送一个对象，表示传递的数据。
常用与type为"post"的请求方式；
如果type为"get"，可以直接使用？追加在URL的后面。
④ dataType ：预期后台返回什么类型的数据。
“text”-字符串 “json”-JSON对象
⑤ success: 请求成功的回调函数。参数接受一个data，表示后台返回的数据。
⑥ error : 请求失败的时候的回调函数
⑦ statusCode ：接受一个对象，对象的键值对是status状态码和对应的回调函数，表示当请求状态码是对应数
字时，执行具体的操作函数。
200-正常请求成功 404-页面没有找到 500-服务器内部错误。

再再举个栗子：

<script type="text/javascript">$(function(){$.ajax({url : "url",type: "post",data : {name : "李四",age : 28},//dataType : "json",success : function(data){// JQuery中吧JSON字符串转成JSON对象var jsons = $.parseJSON(data);console.log(jsons);},error: function(){alert("请求失败啦！");},statusCode:{"404":function(){alert("404表示页面没有找到");},"500":function(){alert("500表示服务器内部错误");},"200":function(){alert("200表示请求成功");}}});
</script>

1.2.2 $ .post/$.get

在jQuery中，还进一步封装了Ajax，$.get(); . p o s t ( ) ; 这两个函数，是在 .post(); 这两个函数，是在 .post();这两个函数，是在.ajax()的基础上进行封装而来。可以直接默认发送get请求或post请求；

接受四个参数：
① 请求的URL路径。相当于 . a j a x ( ) 里面的 u r l ； ② 向后台传递的数据。相当于 .ajax()里面的url； ② 向后台传递的数据。相当于 .ajax()里面的url；②向后台传递的数据。相当于.ajax()里面的data；
③ 请求成功的回调函数。相当于 . a j a x ( ) 里面的 s u c c e s s ； ④ 预期返回的数据类型。相当于 .ajax()里面的success； ④ 预期返回的数据类型。相当于 .ajax()里面的success；④预期返回的数据类型。相当于.ajax()里面的dataType；

疯狂的举栗子：

$.post("Surl",{data:"aaa"},function(data){console.log(data);},"json");

二、AngularJS中的$http

在上篇的AngularJS中小编讲了一下 h t t p , 今天再来复习一遍； A n g u l a r J S 中的 http,今天再来复习一遍；AngularJS中的 http,今天再来复习一遍；AngularJS中的http的基本样式比较简单，

$http({method:"get/post", /*请求的方法*/
url:" " /*请求的地址*/
}).then(function(classes){/*请求成功的回调函数*/
},function(){/*请求失败的回调函数*/
});

直接上栗子：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body ng-app="app" ng-controller="ctrl"><table width="400px"border="1"style="border-collapse: collapse;"><tr><th>姓名</th><th>年龄</th><th>兴趣</th><th>语文成绩</th><th>数学成绩</th><th>总分</th>    </tr><tr ng-repeat="item in classes|orderBy:'score.chinese+score.math'"><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.hobby}}</td><td>{{item.score.math}}</td><td>{{item.score.chinese}}</td><td>{{item.score.math+item.score.chinese}}</td></tr></table></body><script type="text/javascript" src="js/angular.js"></script><script type="text/javascript">angular.module("app",[]).controller("ctrl",function($scope,$http){$http({method:"get", /*请求的方法*/url:"AngularJs.json" /*请求的地址*/}).then(function(classes){/*请求成功的回调函数*/$scope.classes=classes.data;//                $scope.name = classes.data.name;alert("请求成功！");},function(){/*请求成功的回调函数*/alert("请求失败");});});</script>
</html>

json：

[{"name": "张三","age": 17,"hobby": ["吃","喝","玩","乐"],"score":{"math":48,"chinese":59}},{"name": "张三","age": 17,"hobby": ["吃","喝","玩","乐"],"score":{"math":88,"chinese":99}},{"name": "张三","age": 17,"hobby": ["吃","喝","玩","乐"],"score":{"math":68,"chinese":89}},{"name": "张三","age": 17,"hobby": ["吃","喝","玩","乐"],"score":{"math":78,"chinese":89}}
]

结果：

三、表单提交的get/post请求

在http中，有个HTTP POST变量：$_POST，其作用就是获取通过前台post发送的数据；

再次疯狂的举栗子：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><body><!--<form action="03-chaoQuanJuArray.php" method="get">-->用户名：<input type="text" name="username" />密码：<input type="password" name="pwd" /><!--<input type="file" name="file" />--><button id="btn">点击发送post请求</button><!--</form>--><script type="text/javascript">$("#btn").click(function(){var username = $("input[name='username']").val();var pwd = $("input[name='pwd']").val();$.post("03-chaoQuanJuArray.php",{"username":username,"pwd":pwd,},function(data){alert(data);})});</script></body>
</html>

PHP：

<?phpheader("Content-Type:text/html;charset=utf-8");
if(isset($_POST["username"])&&isset($_POST["pwd"])){if($_POST["username"]=='zhang'&&$_POST["pwd"]==123){echo "登录成功";}else{echo "登录失败";}}

结果：

3.2表单Get请求数据

最后疯狂的举例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><body><form action="03-chaoQuanJuArray.php" method="get">用户名：<input type="text" name="username" />        密码：<input type="password" name="pwd" /><!--<input type="file" name="file" />--><button id="btn">点击发送post请求</button></form><script type="text/javascript">$("#btn").click(function(){![在这里插入图片描述](https://images2017.cnblogs.com/blog/1205848/201711/1205848-20171105150846904-1466066205.gif#pic_center)var username = $("input[name='username']").val();var pwd = $("input[name='pwd']").val();$.post("03-chaoQuanJuArray.php",{"username":username,"pwd":pwd,},function(data){alert(data);})});</script></body>
</html>

php：

<?phpheader("Content-Type:text/html;charset=utf-8");
if(isset($_GET["username"])&& isset($_GET["pwd"])){if($_GET["username"]=='zhang'&&$_GET["pwd"]==123){echo "登录成功";}else{echo "登录失败";}}

结果：

web常见的几种数据交互的常见方式相关推荐

浅谈智慧医疗中常见的几种数据标注类型
近年来,在科学技术急速发展的背景下,当代医疗正在变得越来越智慧,东软医疗所推出的MDaaS,即医疗设备和医疗影像数据服务,可以提供各种创新医疗数据服务和解决方案,帮助医生提高工作效率,同时也可以帮助改 ...
SNS游戏中社区Server和游戏Server一种数据交互的策略
SNS游戏和MMO类的游戏最大的区别是不分在线和离线状态.SNS游戏中存在大量的某个角色对另外一个离线角色交互. 我们拿农场类游戏举例.像偷菜之类的功能都在社区Server(SS)中实现.偷菜之外,我 ...
SNS 游戏中社区 Server 和游戏 Server 一种数据交互的策略
SNS游戏和MMO类的游戏最大的区别是不分在线和离线状态.SNS游戏中存在大量的某个角色对另外一个离线角色交互. 我们拿农场类游戏举例.像偷菜之类的功能都在社区Server(SS)中实现.偷菜之外,我 ...
选择图片横向拼接html,一些比较常见的几种组合多张图片的方式
在日常生活中,我们经常会对一些手机中的照片或网上寻找的图片进行处理,以下分享了一些日常比较常见的几种组合高清图片与手机照片的方式以及使用本站的在线工具进行简单的合成处理办法. 一.横向拼接图片顾名思 ...
实战！Python常见的几种数据可视化案例
大家好,我是辰哥. 利用可视化探索图表一.数据可视化与探索图数据可视化是指用图形或表格的方式来呈现数据.图表能够清楚地呈现数据性质, 以及数据间或属性间的关系,可以轻易地让人看图释义.用户通过探索 ...
常见的五种数据复制技术
根据IDC的相关数据统计,2018年全球的数据复制存储市场规模就已经超过了500亿美金,而其中而作为数据复制技术重要应用场景的数据备份和恢复软件市场的规模也同样蔚为可观.今天,我们就来聊聊5种常见 ...
常见的几种数据加密算法
常见的数据加密算法一,数据加密的含义数据加密(Data Encryption)指将一个信息(或称明文,plain text)经过加密钥匙(Encryption key)及加密函数转换,变成无意义的 ...
机器学习强基计划0-6：盘点最常见的7种数据预处理方法和原理
目录 0 写在前面 1 数据规范化 1.1 最值归一化 1.2 Z-Score规范化 2 类别平衡化 2.1 阈值移动 2.2 欠采样法(undersampling) 2.3 过采样法(oversam ...
【hive】hive常见的几种文件存储格式与压缩方式的结合-------Parquet格式+snappy压缩以及ORC格式+snappy压缩文件的方式
一.使用Parquet存储数据数据使用列存储之前是普通的行存储,下面是行存储的的文件大小,这个HDFS上的数据使用parquet列存储,可以将文件的大小减小化.下面具体讲parquet存储数据的代 ...

web常见的几种数据交互的常见方式

前言