AJAX json 以及jquery对ajax的支持

    * 什么是AJAX
        Asynchronous JavaScript And XML
            异步的
        * 同步访问:
            当客户端向服务器发送请求时,服务器在处理的过程中,浏览器只能等待
        * 异步访问:
            当客户端向服务器发送请求时,服务器在处理的过程中,浏览器无需等待,可以做其他操作

        AJAX优点:
            1. 异步 访问
            2. 局部 刷新

        适用场合:
            1. 搜索建议
            2. 表单验证
            3. 前后端完全分离   


    * AJAX核心对象 -- 异步对象(XMLHttpRequest)
        1. 什么是XMLHttpRequest
            简称xhr  (类似于中介)
            称为"异步对象",代替浏览器向服务器发送异步的请求并接收响应
        2. 创建异步对象
            xhr 的创建是由js来提供的
            主流的异步对象时XMLHttpRequest类型的,并且主流的浏览器都支持
            支持XMLHttpRequest: 
                通过new XMLHttpRequest()创建
            不支持XMLHttpRequest:   
                通过new ActiveXObject("Microsoft.XMLHTTP") 

            判断浏览器支持性:
                if(windows.XMLHttpRequest){
                    则说明支持XMLHttpRequest
                }else{
                    则说明支持ActiveXObject("")
                }

/*
   创建函数 -createxhr
   目的: 为了根据不同的浏览器穿好见不同的一部对象
   返回值:创建好的异步对象
*/
function createXhr(){
   if(window.XMLHttpRequest){
       return new XMLHttpRequest()
   }else{
       return new ActiveXObject("microsoft.XMLHTTP")
   }
}

   * xhr成员
       1. 方法 - open()
          作用: 创建请求
          语法:xhr.open(method,url,async)
               method: 请求方式,取值'get 或 'post'
               url: 请求地址,取值为字符串
               async: 是否采用异步的方式发送请求
                   true:采用异步
                   false:采用同步
           示例: 使用get方式向01-server的服务器端地址发送异步请求
               xhr.open('get','/01-server',true);
       2. 属性 - readyState
          作用: 请求状态,通过不同的请求状态来表示xhr与服务器的交互状况
               由0-4共5个值来表示5个不同的状态
               0: 请求尚未初始化
               1: 已经与服务器建立连接
               2: 服务器端已经接受请求信息
               3: 请求正在处理中
               4: 响应已完成
       3. 属性 - statues
           作用:表示服务器段的响应状态码
               200: 服务器正确处理所有请求并给出响应
               404: NotFound
               500: Internet Server Error
               ... ...
           示例:
               if(xhr.readyState==4 && xhr.statues==200){
                   //正确的接收了服务器端的所有相应内容
               } 
       4. 属性 - responseText
           作用:表示服务器端响应回来的数据
           示例:
           if(xhr.readyState==4 && xhr.statues==200){
               console.log(xhr.responseText)
           } 
       5. 事件 - onreadystatechange
           作用:每当xhr的readyState值发生改变时要触发的操作
           - 回调函数
           示例:
               xhr.onreadystatechange = function(){
                   if(xhr.readyState==4 && xhr.statues==200){
                       接收响应数据做前端业务处理
                   }
               }
       6. 方法 - send()
           作用: 通过xhr向服务器端发送请求
           语法:xhr.send(body)
               body为请求主体
               get请求: body 值为null
                   xhr.send(null)
               post请求: body值为请求体的数据
                   xhr.send("请求数据")

   * AJAX的操作步骤
       当想要从数据库获取数据的时候用 GET
       当吧数据交给数据库处理的时候用 POST
       1.GET请求
           1. 创建 xhr 对象
           2. 创建请求 - open()
           3. 设置回调函数 - onreadystatechange
               1. 判断状态
               2. 接受响应
               3. 业务处理
           4. 发送请求 - send()


       2.POST请求
           * 创建xhr   
           * 创建xhr
               1. 将请求方式更改为post
               2. 如果有请求参数不能拼接在url之后
               3. 设置回调函数
               4. 设置请求消息头
                   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
               5. 发送请求
                   xhr.send('name=value&name1=value1')

        3. JSON
            1.介绍JSON
                JSON: JaveScript Object Notation
                以JS对象的格式来约束前后端交互的符传数据
            2.JSO - JS 对象
                var obj = {
                    uname:"zhaokt",
                    uage:25,
                    ugender:"男",
                }
            3.JSON规范
                1. 使用JSON表示单个对象
                    * 使用{}表示一个对象
                    * 在{}中使用 key:value 来表示属性(数据)
                    * key必须使用 "" 引起来
                    * value如果是字符串的话,也必须用 "" 引起来
                    * 多个 key:value 使用逗号来分割
                    示例:
                        var obj = '{"uname":"zhaokt","uage":25}'

                2. 使用JSON表示一组对象
                    使用 [] 表示一组对象
                    示例:
                        var users = '[
                            {"uname":"zhaokt","uage":30},
                            {"uname":"kangdong","uage":10},
                        ]';
            4. 前端中处理JSON
                var js对象 = JSON.parse(JSON串)
            
            5. 后端中处理JSON
                1. 在python中的处理
                    1. 允许将 元祖, 列表, 字典 转换成JSON串
                    2. 元祖, 列表,字典 中可以是字符串也可以是元祖,列表和字典

                    python中提供了JSON的模块,json模块中提供了dumps方法实现JSON串的转换
                2. 在django中的处理
                    使用django中提供的序列化类来完成QuertSet到JSON字符串的转换

                    from django.core import serializers
                    str = serializers.serialize('json',QuerySet)
                    return Httpresponse(str)
            6. 前端传递JSON数据给服务器端
                * 前端: 将数据封装成js对象/数组
                    var params = {
                        uname : "wangwc",
                        uage : 30,
                        ugender : "M"
                    }
                * 前端: 将js对象转换成JSON格式的字符串
                    方法: JSON.stringify()
                    作用: 将JS对象转换成JSON串
                    示例:
                        var jsonStr= JSON.stringify(params)

                * 服务器端: 接收响应数据
                    jsonStr = request.GET['xxx']
                * 服务器端: 将JSON串转换成为python字典/列表
                    方法: json.loads()
                    作用: 将JSON串转换成为python字典/列表
                    示例:
                        dic = json.load(jsonStr)
                        dic['key'] 取值

    * JQ对AJAX的支持
        1. $obj.load()
            作用: 载入远程的HTML文件到指定的元素中
            语法:
                $obj.load(url,data,callback)
                    $obj: 显示相应内容个jq元素
                    url: 请求地址
                    data: 请求参数 (可省略)
                        方式一: 字符串传参
                            "key12value1&key2=value2"
                            注: 此种会使用 get 方式发送请求
                        方式二: 使用JS对象传参
                            {
                                key1:"value1",
                                key2:"value2"
                            }
                            注: 此种传参会使用 post 方式发送请求

        2. $.get()
            作用: 通过get的方式异步的向远程地址发送请求
            语法: $.get(url,data,callback,type)
                url: 请求地址
                data: 发送到服务器的参数
                callback: 响应成功的回调函数
                type: 响应回来的数据的格式
                    取值如下:
                        1. html: 响应回来的文本是HTML文本
                        2. text: 响应回来的文本是text文本
                        3. script : 响应回来的文本是js的执行脚本
                        4. json : 响应回来的文本是json格式的文本
        3. $.post()
            与$.get用法相同
        4. $.ajax()
            作用: 自定义所有的ajax操作
            语法:
                $.ajax({AJAX的参数对象})
                AJAx的参数对象:
                    1. url: 异步请求地址
                    2. data：　请求到服务器的参数
                        1. 字符串
                        2. JS对象
                    3. type:请求方式　。'get'或 'post'
                    4. dataType:服务端响应回来的数据格式
                        html,text,script,json
                    5. async: 是否采用异步的方式发送请求
                    　　true: 使用异步（默认值）
                    　　false:　使用同步
                    6. success: 响应成功后的回调函数
                        function(data){
                            data表示的是响应回来的数据
                        }
                    7. error: 请求或响应失败的回调函数
    3. 跨域(Cross Domain)
        1. 什么是跨域
            HTTP协议中的一个策略 - "同源策略"
            同源: 多个地址中具备相同协议,相同域名以及相同端口的地址称之为"同源地址"
            在HTTP中,只有同源地址才能发送ajax请求,非同源地址是被拒绝的(<script>和<img>)