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

前言

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

　　我们都明白，要想提高竞争力，提高自己的技能是十灰重要的。前后台的数据交互就是一个很好的加分项。今天，就带大家一起了解一下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,显示null

                     console.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);

举个小例子：

 var json1 = "{'name':'zhangsan'}";

  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(); $.post(); 这两个函数，是在$.ajax()的基础上进行封装而来。可以直接默认发送get请求或post请求；

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

疯狂的举栗子：

$.post("Surl",{data:"aaa"},function(data){

            console.log(data);

        },"json");

二、AngularJS中的$http

在上篇的AngularJS中小编讲了一下$http,今天再来复习一遍；AngularJS中的$http的基本样式比较简单，

1 $http({

2 method:"get/post", /*请求的方法*/

3 url:" " /*请求的地址*/

4 }).then(function(classes){

5 /*请求成功的回调函数*/

6 },function(){

7 /*请求失败的回调函数*/

8 });

直接上栗子：

<!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：

 1 [

 2     {

 3         "name": "张三",

 4         "age": 17,

 5         "hobby": [

 6             "吃",

 7             "喝",

 8             "玩",

 9             "乐"

10         ],

11         "score":{

12             "math":48,

13             "chinese":59

14         }

15     },

16     {

17         "name": "张三",

18         "age": 17,

19         "hobby": [

20             "吃",

21             "喝",

22             "玩",

23             "乐"

24         ],

25         "score":{

26             "math":88,

27             "chinese":99

28         }

29     },

30     {

31         "name": "张三",

32         "age": 17,

33         "hobby": [

34             "吃",

35             "喝",

36             "玩",

37             "乐"

38         ],

39         "score":{

40             "math":68,

41             "chinese":89

42         }

43     },

44     {

45         "name": "张三",

46         "age": 17,

47         "hobby": [

48             "吃",

49             "喝",

50             "玩",

51             "乐"

52         ],

53         "score":{

54             "math":78,

55             "chinese":89

56         }

57     }

58 ]

结果：

当然，他也有简写形式：

$http.get('/someUrl', config).then(successCallback, errorCallback);

$http.post('/someUrl', data, config).then(successCallback, errorCallback);

举个栗子：

1             $http.get("angularJs.json",{/*需要传递到后台的参数*/}).then(function(){

2                 alert("请求成功！")

3                 },function(){

4                 alert("请求失败！");

5             })

6         })

7

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

在最开始的前端学习中，表单是很重要的一部分。要知道，表单的提交过程也是想后台的一种数据交互的过程；今天，就来看一下表单请求到PHP；

3.1POST表单提交

在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：

<?php

    header("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(){

                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:

<?php

    header("Content-Type:text/html;charset=utf-8");

if(isset($_GET["username"])&& isset($_GET["pwd"])){

        if($_GET["username"]=='zhang'&&$_GET["pwd"]==123){

            echo "登录成功";

        }else{

            echo "登录失败";

        }

    }

结果：

编者按

今天小编就给大家介绍着四种前后台数据交互的方式。还有，localStorage和sessionStorage中的数据也是数据交互的一种方式。

而在数据交互的过程中，经常会需要进行跨域请求，小编之后会给大家讲解。