前后端交互指南

前言

前端工程师除了UI重构外，还有一个非常重要的职责就是在正确的区域渲染出服务端的数据。要构建一个大的web应用，不只是普普通通的由静态页面构成。

前后端如何实现交互

前端请求数据URL由后台来写

在开发中，URL主要是由后台来写好给前端。
若后台在查询数据，需要借助查询条件才能查询到前端需要的数据时，这时后台会要求前端提供相关的查询参数（即URL请求的参数）。

接口文档主要由后台设计和修改

接口文档主要由后台设计和修改，前端开发者起到了辅助的作用。
后台直接跟数据打交道，最清楚数据库里有什么数据，能返回什么数据。
前端只是数据的被动接受者，只是接口文档的使用者。
使用过程中，发现返回的数据不对，则需要跟后台商量，由后台修改。
切记：前端不能随意更改接口文档，除非取得后台开发人员同意。

前端与后台交互的数据格式

前端与后台交互的数据格式主要是JSON，XML现在用的不多。
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是得到字符串，我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

JSON.parse()方法用于从一个字符串中解析出json对象。

1
2
3

JSON.parse('{"name":"tom"}');  // {name: "tom"}
JSON.parse('{"age":10}');      // {age: 10}
JSON.parse('{"age":null}');     // {age: null}

JSON.stringify()方法用于将一个对象解析成一个JSON字符串

1 2	var a = {a:1,b:2}; JSON.stringify(a); // "{"a":1,"b":2}"

前端与后台的交互原理

前后端开发关注点：接口地址、前端请求的参数、后端返回的参数。
完成接口开发后，调一下接口，看一下返回的数据是否符合要求。

前端请求参数的形式

前端请求参数的形式：GET和POST两种方式。
GET：从指定的服务器中获取数据（方便，较不安全）。
POST：提交数据给指定的服务器处理（不方便，比较安全）。

GET 和 POST的对比

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 不使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

前端应该告知后台哪些有效信息，后台才能返回前端想要的数据

先将要展示的页面内容进行模块划分，将模块的内容提取出来，以及方便前端的一些标志值等，将所有想要的内容和逻辑告知后端。
后端从数据库里面去查询相应的数据表以获得相应的内容或者图片地址信息。
URL中的参数主要是根据后台需要，若后台需要一个参数作为查询的辅助条件，前端在URL数据请求时就传递参数。
请求格式：URL?参数（如果有几个参数则用&连接参数。

前端如何把页面信息有效传达给后台，以及后台如何获取到这些数据

所有前端请求的URL后面的参数都是辅助后台数据查询的，若不需要参数，那后台就会直接给个URL给前端。

前端应该如何回拒一些本不属于自己做的一些功能需求或任务

前端负责把数据展示在页面上（清晰的认识自己需要做的需求和任务）。

当前端在调用数据接口时，发现有些数据不是我们想要的，那么前端应该怎么办

把请求的URL和返回的数据以及在页面的展示的情况给后台看。
考虑后端开发的难处（后台查询数据、取数据、封装数据方面等蛮难处理的），耐心进行沟通。

前端有时候需要在请求的时候传入参数

后台在查询数据库的时候需要条件查询。

Ajax

AJAX = 异步 JavaScript 和 XML。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
Web的运作原理：一次HTTP请求对应一个页面。
- 如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个AJAX请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

例子：通过 AJAX 加载一段文本

jQuery 代码：

$(document).ready(function(){
    $("#b01").click(function(){
        htmlobj = $.ajax({
            url: "/jquery/test1.txt", 
            async: false
        });
        $("#myDiv").html(htmlobj.responseText);
    });
});

HTML 代码：

1 2	<div id="myDiv"><h2>Let AJAX change this text</h2></div> <button id="b01" type="button">Change Content</button>

AJAX load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：$(selector).load(URL, data, callback);
- 必需的 URL 参数规定希望加载数据的URL。
- 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
- 可选的 callback 参数是 load() 方法完成后所执行的函数名称。

例子：把文件 “demo_test.txt” 的内容加载到指定的 <div> 元素中

jQuery 代码：

$(document).ready(function(){
    $("#btn1").click(function(){
        $('#test').load('/example/jquery/demo_test.txt');
    })
})

HTML 代码：

1 2	<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3> <button id="btn1" type="button">获得外部的内容</button>

也可以把 jQuery 选择器添加到 URL 参数。

例子：把 “demo_test.txt” 文件中 id=”p1” 的元素的内容，加载到指定的 <div> 元素中

jQuery 代码：

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#div1").load("demo_test.txt #p1"); // demo_test.txt
    })
})

“demo_test.txt” 文件中的内容：

1 2	<h2>jQuery and AJAX is FUN!!!</h2> <p id="p1">This is some text in a paragraph.</p>

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。
回调函数可以设置不同的参数：
- responseTxt : 包含调用成功时的结果内容
- statusTXT : 包含调用的状态
- xhr : 包含 XMLHttpRequest 对象

例子：在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：

jQuery 代码：

$("button").click(function(){
    $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
        if(statusTxt=="success")
        alert("外部内容加载成功！");
        if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
});

AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
- GET：从指定的资源请求数据
- POST：向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：$.get(url,[data],[callback],[type]);
- 必需的 URL 参数规定希望请求的 URL。
- 可选的 data 参数是请求时所传递的参数，可以json对象也可以是字符串拼接形式。
- 可选的 callback 参数是请求成功后所执行的函数名。
- 可选的 type 参数是期待的返回值类型，可以是text/xml/json。

例子：使用 $.get() 方法从服务器上的一个文件中取回数据：

/*
$.get() 的第一个参数是我们希望请求的 URL（"demo_test.asp"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容data，第二个回调参数存有请求的状态status。
*/
$(document).ready(function(){
    $("button").click(function(){
        $.get("/example/jquery/demo_test.asp",function(data,status){
            alert("数据：" + data + "\n状态：" + status);
        });
    });
});

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法：$.post(url,[data],[callback],[type]);
- 必需的 URL 参数规定您希望请求的 URL。
- 可选的 data 参数规定连同请求发送的数据。
- 可选的 callback 参数是请求成功后所执行的函数名。
- 可选的 type 参数是期待的返回值类型，可以是text/xml/json。

例子：使用 $.post() 连同请求一起发送数据：

/*
$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。
然后我们连同请求（name 和 city）一起发送数据。
"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
*/
$("button").click(function(){
    $.post("demo_test_post.asp",
    {
        name:"Donald Duck",
        city:"Duckburg"
    },
    function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

$.post() 和 $.get() 的完整形式

$.post() 和 $.get() 是简写的 Ajax 函数，等价于：

$.ajax({
    url: url,
    type: "get"/"post",
    data: data,
    dataType: callback
    success: success,
});

根据响应的不同的 MIME 类型，传递给 success 回调函数的返回数据也有所不同，这些数据可以是 XML root 元素、文本字符串、JavaScript 文件或者 JSON 对象,也可向 success 回调函数传递响应的文本状态，取决于dataType的类型。

实现get方式跨域请求数据：

<script>
$(document).ready(function(){
    $.ajax({
        url: "http://www.xxx.cn/index.php",
        type: "get",
        dataType: "jsonp", //指定服务器返回的数据类型
        success: function (data) {
            console.log(data);
        }
    });
});
</script>

实现post方式跨域请求：

<script>
$(document).ready(function(){
    $.ajax({
        url: "http://www.xxx.cn/index.php",
        type: "post",
        dataType: "json", //指定服务器返回的数据类型
        success: function (data) {
            console.log(data);
        }
    });
});
</script>

服务器端：

Access-Control-Allow-Origin: * 表示允许任何域名跨域访问。
如果需要指定某域名才允许跨域访问，只需把
- Access-Control-Allow-Origin: * 改为 Access-Control-Allow-Origin: 允许的域名。

某些header请求头：

// 指定允许其他域名访问
header('Access-Control-Allow-Origin: *');
// 响应类型
header('Access-Control-Allow-Methods: POST');
// 响应头设置
header('Access-Control-Allow-Headers: x-requested-with, content-type');

//设置内容类型为json

header('content-type: application:json; charset = utf8');