ajax _flask

同步访问
    当客户端向服务器发送请求时，服务器在处理过程中，浏览器只能等等，效率偏低
异步访问:
    当客户端向服务器发送请求时，服务器在处理过程中，客户端可以做其他的操作，不需要一直等待，效率偏高
AJAX优点
    1 异步 访问
    2 局部 刷新
    使用场合：
        1 搜索建议
        2 表单验证
        3 表单提交

2 AJAX的核心对象 - 异步对象（XMLHttpRequest）
    1 什么是XMLHttpRequest
        简称为xhr
        称为异步对象，代替浏览器向服务器发送请求并接收响应
        xhr 是由JS来提供
    2 创建异步对象（xhr）
        主流的异步对象是 XMLHttpRequest 类型的，并且主流浏览器都支持（IE7+，chrome,Firefox,Safari,Opera） 全部支持，
        但在Ie低版本浏览器中（ie6以及以下），就不支持 XMLHttpRequest,需要使用 ActiveXObject()来创建异步对象

        支持 XMLHttpRequest :new XMLHttpRequest()
        不支持 XMLHttpRequest: new ActiveXObject('Microsoft.XMLHTTP')

    3 xhr 的成员
    4 AJAX的操作步骤
        1 GET请求
            1 创建xhr 对象
            2 创建请求 - open()
            3 设置回调函数 - onreadystatechange
                判断状态并且接收数据
            4 发送请求-send()

                1 方法 - open()
                    作用：创建请求
                    语法：open(method,url,async)
                        method : 请求方法，取值为 'get'或'post'
                        url :请求地址，字符串
                        async:是否采用异步的方式发送请求
                            true: 使用异步方式发送请求
                            false:使用同步方式发送请求
                    ex:
                        xhr.open('get','/server',true)
                2 属性 - readyState
                    作用：请求状态，通过不同的请求状态值来表示xhr与服务器的交互情况
                    由 0-4 共5个值来表示5个不同的状态
                    0 ： 请求尚未初始化
                    1 ：xhr已经与服务器建立连接
                    2 ：服务器端已经开始接收请求
                    3 : 请求正在处理中
                    4 ： 响应已完成
                3 属性 - status
                    作用：表示服务器端的响应状态码
                        200： 表示服务器正解处理所有的请求以及给出的响应
                        404： 请求资源不存在
                        500：服务器内部错误
                4 属性 - responseText
                    作用：服务器端的响应数据
                5 事件 - onreadystatechange
                    作用：每当xhr的readyState属性值发生改变的时候要触发的操作 - 回调函数
                        在该函数中，只有当readyState的值为4并且status的值为200的时候，就可以正常的接收responseText了
                6 方法 - send()
                    作用：通知xhr 向服务器发送请求
                    语法：send(body)
                        body:表示请求的主体
                            get请求：是没有请求主体的，所以body的值为null
                                xhr.send(null)
                            post请求：是没有请求主体的，所以body的位置处要表示请求数据
                                xhr.send('请求数据')
                                xhr.send('参数=值&参数=值')
        2 POST 请求
            1 请求提交的数据要作为 send()的参数进行提交 xhr.send('参数 = 值&参数=值')
            2 修改请求消息头
                在AJAX中，提交POST请求时，AJAX默认将 Content-Type请求消息头的值修改为"text/plain"了，
                所以导致数据无法正常提交
                解决方案：将 Content-Type的请求消息头再修改回"application/x-www-form-urlencoded"即可
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            Content-Type: application/x-www-form-urlencoded