同步与异步

想要泡茶，首先要烧水，等水烧开了，我们再去洗杯子，洗完杯子以后，用热水和杯子去泡茶。像这种一件一件事去做，等上一件做完了才能做下一件事的过程，在程序中就叫做同步。

同步是比较浪费时间的，所以产生了异步的方法。我们可以边烧水边洗杯子，这样等水烧好，杯子也已经洗好，就可以直接进行泡茶了。那像这种可以同时做两件或者几件事情，在程序中，称为异步。

举个同步的例子。比如说，我们想请求天气网站，首先要发送请求到服务器，服务器接收后返回响应，在浏览器中我们就可以看到天气网站了。

如果想知道今天白天的气温，同步请求，就会重新发送请求给服务器，这个过程中，页面就会进入等待状态，直到正确响应，页面才能显示。同样的，想看今天夜间的气温，还是要继续等待。直到正确响应，可是等待过程让用户体验很不好，而异步请求就可以解决这个问题。

AJAX异步

AJAX中的“A”代表 Asynchronous异步；“J”代表JavaScript是浏览器端的脚步语言；第三个字母“A”代表and和的意思；最后一个“X”代表了XML可扩展标记语言。AJAX就是“Asynchronous JavaScript and XML”的缩写。通俗的说AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

JQuery-AJAX

JQuery是一个丰富的js库，就好比是一个工具箱。它的内部对js很多复杂的方法进行了封装和加工，我们可以理解成封装成了很多个工具。AJAX也被简化封装成了一个工具，我们可以把他叫做JQuery-AJAX，另外JQuery还有一个外号，叫做‘$’。

JQuery-AJAX练习

接下来通过一道题目练习一下，要使用学习的知识完成这样的效果：点击页面左侧的故事背景之后，就会在页面中对应的地方，出现故事背景的内容。

app.config.from_envvar('CAT_CONFIG')

@app.route('/fantacy', methods=['GET'])
def fantacy():

    print(app.config['USERNAME'])
    return render_template('fantacy.html')


@app.route('/story', methods=['GET'])
def story():

    s = '由水晶创造出的世界，"梅尔法利亚"
梅尔法利亚由被后世称为最初之王的马路库提斯·埃斯塞提亚所领导的埃斯塞提亚王国所统治，所有生物都能得到水晶的恩惠，人们也过着和平的生活。

但是得到水晶的力量而发达的人们开始有了野心。
世界各地起了纷争，持续已久的埃斯塞提亚王国的时代告终。

在大国灭亡后经过二大王国时代、帝国时代、英雄时代，
现在有抱着各自的思想的五位王者为了平定大陆站了出来。

再次到来的战乱，何时会是尽头。'
    return s

AJAX POST请求

JSON格式

服务器返回给浏览器的响应数据，一般情况下都是字符串，如果服务器返回字符串：“我是3年级2班的Pony，擅长开发游戏，想玩的带着钱来找我哦！”，那浏览器想从其中取出名字，年级，班级，擅长的技巧这些，就有点麻烦了。于是聪明的人们想了一个办法，将数据格式化为{"name":"Pony","grade":3,"class":2,"skill":"开发游戏"}，这样浏览器就可以很方便根据name、grade取到名字，年级了。

那这种格式就是大名鼎鼎的JSON，全称是 Javascript Object Notation，本质上仍然是字符串，是服务器和浏览器间交换数据使用最多的格式。JSON格式和JavaScript中的对象的格式是相似的，最外层是一对大括号，里面有键和值，键是字符串，值的类型可以是字符串，也整数等，键值对之间呢用逗号分隔。大家注意，在JSON中，字符串必须用双引号引起来，不可以是单引号。在这一点上和js中的对象是不一样的，我们知道js中对象的属性可以有引号也可以没有，可以是单引号，也可以是双引号。

当我们返回字符串时，响应的默认类型是 text/html，这表示响应内容是html。如果要表示响应内容是JSON格式，响应类型应该改为application/json。

将JSON字符串赋值给变量str，在视图函数中return str，那它的响应内容的类型就是 text/html，其实可以在响应内容设置响应头，覆盖默认的设置，比如{'Content-Type':'application/json'}，那响应内容的类型就被设置为JSON了。

自定义状态码和响应头：元祖方式

可以返回一个元组，这样的元组必须是 (response, status, headers) 的形式，且至少包含一个元素。 status 值会覆盖状态代码， headers 可以是一个列表或字典，作为额外的消息标头值。

@app.route('/test01')
def test01():

    return 'hello cat.', 789, {'LOGO': 'CAT'}

@app.route('/test02')
def test02():

    return 'hello cat2.', 666, {'Content-Type': 'application/json'}

@app.route('/test03')
def test03():

    return 'hello cat3.', 888, [('LOGO', 'CAT3')]

make_response方式

@app.route('/test04')
def test04():

    response = make_response('hello cat4.')
    response.headers['LOGO'] = 'CAT4'
    response.status = '444'

    return response