前后台交互

整体流程

一个用户打开一个网页，到看到一个网页，经历的流程：
前端接收用户请求---》前端请求服务器---》后端接收前端请求---》后端找到负责处理的程序---》后端处理程序找到要传输给用户的前端页面---》后端将该前端页面留出位置---》后端到数据库取数据---》后端把数据放在前端留出来的位置上---》结合成真正用户看到的html文件---》传输给前端---》用户看到界面。

后台与数据库交互 --也就是对数据的“增删查改”等
前台$http.get （参数1,function(){}）; （参考查找关键字：JavaScript，ajax）来与后台交互，后台接受
后端对前端简单地来说，就是能处理数据然后将数据返回给前端，供前端使用
前端与后台的交互原理:
关注点:接口地址、前端请求的参数、后端返回的参数。调一下接口，看一下返回的数据。
前端请求参数的形式
GET和POST两种方式
GET从指定的服务器中获取数据，POST提交数据给指定的服务器处理

传统的向后端发送请求方法：

1.使用<form>标签的action属性可以向后端发送请求，这种方法在特殊的场景下会用到。

<form method="发送请求所使用的方法" action="向后台发送请求的url(访问的地址)">
    <input type="hidden" name="访问后台API需要传的参数" value="参数的值"/>
</form>

2.使用WebSocket进行通信，这是一种比较新型的方法，大家可以自行搜索，也只是简单地调用API(使用提供的方法)。

3.fetch()方法，这也是一种很新的方法，但目前兼容的浏览器有限，所以也不是很常用。

4.ajax，这是一种很常用很方便的方法，关于ajax的介绍可以自行百度。说到ajax，就得分JavaScript的ajax和jQuery的ajax:

1）原生js的ajax是基于一个名为XMLHttpRequest的对象。有关ajax的都是基于这个对象。
2）jQuery是一种JavaScript的封装库，封装了许多常用简便的方法，以此为例:

$.ajax({

    type: 'GET',                                                     // 请求的方式

    url: 'https://free-api.heweather.com/s6/weather/now?parameters', // 请求的地址（和风天气开放API）

    data: {                                                          // 请求所需要填的参数

        location: '中山,广东',                                        // 需要查询的城市或地区

        key: '9da*********************95bcb82f'                      // 用户认证key    },

    success: function(data) {                                        // 请求成功后，接收到data

        console.log(data); // 打印获取到的数据

        // 对获取到的数据稍作处理

        var basic = data.HeWeather6[0].basic;        var now = data.HeWeather6[0].now;

        console.log(basic);

        console.log(now);
    }
})

一、服务器端主要完成的功能

接受前台提交的数据
对前台提交的数据进行处理
服务器向前端返回数据
存储数据

二、数据传送方式

GET - 从指定的服务器中获取数据 POST - 提交数据给指定的服务器处理
GET和POST两种基本请求方法的区别

get方式：
使用get方法时，查询字符串（键值对）被附加在URL地址后面一起发送到服务器：/test/demo_form.jsp?name1=value1&name2=value2

不安全；
get数据有限制；
get是通过url提交数据参数

post方式：
使用POST方法时，查询字符串在POST信息中单独存在，和HTTP请求一起发送到服务器：
POST /test/demo_form.jsp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2

post数据理论上没有限制
post数据是在http请求头的主体部分发送的
相对安全

三、数据提交方式

1. 在链接地址上使用?提交，只有get一种传送方式。

2. form表单方式

可以实现POST与GET两种数据传送方式

可以跨域提交数据

使用iframe方式实现局部刷新（iframe）不支持跨域

3. 通过script标签的src属性

只能使用get方式

独立的实现局部刷新

支持跨域

JSON与JSONP

4 .XHR对象，XMLHttpRequest

创建对象： var xhr = new XMLHttpRequset();

方法：xhr.open(); 三个参数(GET/POST,url,同步|异步)

事件：onreadyStateChange: 当XHR状态发生变化的时候会执行
onload: 数据接收完毕互执行

属性：responseText : 服务器返回的数据
readyState XHR的执行状态，有五种状态：

0 - 初识状态
1 - 创建链接
2 - 发送数据
3 - 服务器开始返回数据
4 - 数据接受完毕

5. FormData 模拟表单提交

创建表单对象：var formData = new FromData();
添加数据方法： append

6. jquery Ajax封装

常用的四种方法：

$.ajax()

$load()

$get()

post()