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

在开发中，URL主要是由后台来写好给前端。

若后台在查询数据，需要借助查询条件才能查询到前端需要的数据时，这时后台会要求前端提供相关的查询参数（即URL请求的参数）。

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

接口文档主要由后台设计和修改，前端开发者起到了辅助的作用。

后台直接跟数据打交道，最清楚数据库里有什么数据，能返回什么数据。

前端只是数据的被动接受者，只是接口文档的使用者。

使用过程中，发现返回的数据不对，则需要跟后台商量，由后台修改。

切记：前端不能随意更改接口文档，除非取得后台开发人员同意。

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

前端与后台交互的数据格式主要是JSON

JSON 通常用于与服务端交换数据。在接收服务器数据时一般是得到字符串，我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

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

JSON.parse('{"name":"tom"}');  // {name: "tom"}
JSON.parse('{"age":10}');      // {age: 10}
JSON.parse('{"age":null}');     // {age: null}
JSON.stringify()方法用于将一个对象解析成一个JSON字符串
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 代码：

Let AJAX change this text

Change Content AJAX load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：$(selector).load(URL, data, callback);

必需的 URL 参数规定希望加载数据的URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

例子：把文件 “demo_test.txt” 的内容加载到指定的

元素中

jQuery 代码：

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

HTML 代码：

请点击下面的按钮，通过 jQuery AJAX 改变这段文本。

获得外部的内容 也可以把 jQuery 选择器添加到 URL 参数。 例子：把 “demo_test.txt” 文件中 id=”p1” 的元素的内容，加载到指定的

元素中 jQuery 代码：

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

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