day57(Ajax)

今日内容详细

ajax简介:

ajax 全名 async javascript and XML(异步JavaScript和XML)

是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

是⼀个 默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）

补充：

学习回顾同步异步

同步：
 同步请求是指当前发出请求后，浏览器什么都不能做，
 必须得等到请求完成返回数据之后，才会执行后续的代码，
 相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
 也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，
 当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态
异步
默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

    
    页面不刷新的情况下可以与后端进行数据交互
	异步提交 局部刷新
eg:码云用户注册 无需点击按钮内部也可完成数据交互
  
ajax不是一门全新知识 本质就是一些js代码 我们学习ajax直接使用jQuery封装之后的版本(语法更加简单)   使用ajax的前提必须要引入jQuery文件

# 前戏
	学习ajax一定要能够发现与form表单提交数据的区别
  	ajax提交数据页面不用刷新 原始数据还在 处理数据的过程中不影响页面其他操作
    form表单提交数据页面刷新 原始数据不在 并且处理数据的过程中无法做其他操作
    
  页面上有三个input框和一个提交按钮 前两个框输入数字 点击按钮 最后一个框里面展示数字的和 并且页面不能刷新
    
    $('#btn').click(function () {
        {#获取两个框里输入内容#}
        let i1val = $('#i1').val();
        let i2val = $('#i2').val();
    {#    发送ajax请求传数据#}
        $.ajax({
            {#  url  写入地址 不写的话是当前所在页面#}
            url:'',
        {#    type是指定当前 去请求的方式可以是get也可以是post#}
            type:'post',
        {#    data 是请求携带数据 比如字典#}
            data:{'i1':i1val,'i2':i2val},
        {#    最后 异步提交任务 结果不要 异步回调机制也就是用回调函数  success:function#}
            success:function (args) {
            {#    异步回调函数 后端自动触发#}
                 $('#i3').val(args)
            }
        })
    })

前后端传输数据编码格式

"""
核心：请求体中携带编码格式
	Content-Type:...
django针对不同编码方式对应的数据格式会采用不同的处理策略
"""
form表单默认发送的编码格式
	Content-Type: application/x-www-form-urlencoded
  数据格式:username=jason&password=123
  django后端会自动处理到:request.POST
form表单发送文件
	Content-Type: multipart/form-data
  数据格式:隐藏不让看
  django后端会自动处理:request.POST  request.FILES
ajax默认的编码格式
	Content-Type: application/x-www-form-urlencoded
  数据格式:username=jason&password=123
  django后端会自动处理到:request.POST

ajax发送json格式数据

# form表单是无法发送json格式数据的!!!
ajax发送的数据类型一定要跟数据的编码格式一致 
	不能骗人家:
    编码格式是urlencoded 
    数据格式就应该是username=jason&password=123
    但是你却发送了json格式数据
"""
django后端针对json格式的数据不会做任何的处理 就在request.body内
需要我们自行处理
"""
$('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',  // 不写默认也是get请求
            contentType:'application/json',  //要给他声明是什么格式 不写默认是urlencoded编码
            data:JSON.stringify({'name':'jason','pwd':123}),  // 序列化方法
            success:function (args) {
            }
        })
    })

    if request.method == 'POST':
        print(request.POST)
        print(request.body)#
        json_bytes = request.body
        import json
        "jason  自带解码功能无需自己解码  不需要自己在decode"
        json_dict = json.loads(json_bytes)#b'{"name":"jason","pwd":123}'
        print(json_dict, type(json_dict))#{'name': 'jason', 'pwd': 123} <class 'dict'>
        """可以自己封装"""
        request.JSO=json_dict
    return render(request, 'add.html')

ajax携带文件数据

$("#d1").click(function () {
        // 需要利用内置js内置对象FormData
        let myFormData = new FormData();
        // 对象添加普通数据
        myFormData.append('username',$('#name').val())
        myFormData.append('password',$('#pwd').val())
        // 对象添加文件数据
        myFormData.append('my_file',$('#file')[0].files[0])
        // 发送ajax请求
        $.ajax({
            url:'',
            type:'post',
            data:myFormData,
            // 携带文件必须要指定的两个参数
            contentType:false,
            processData:false,
            success:function (args) {
                // 处理异步回调返回的结果
            }
        })
    })

zqh:
    <input type="text" id="name">
<input type="text" id="pwd">
<input type="file" id="file">
<button id="d1">发送Ajax请求</button>
<script>
    $('#d1').click(function () {
        "固定记忆  需要利用 js 内置对象 FromData"
        let myFormData = new FormData
        "duixiang对象添加普通数据"
        myFormData.append('name', $('#name').val())
        myFormData.append('pwd', $('#pwd').val())
        "对象添加文件数据"
        myFormData.append('myfiles', $('#file')[0].files[0])
        "发送Ajax请求"
        $.ajax({
            url: '',
            type: 'post',
            data: myFormData,
            {#如果携带文件必须用到这两个国定参数#}
            contentType: false,
            processData: false,
            success: function (args) {
                {#    我们现在不处理所以不用写#}
            }
        })
    })

回调机制处理策略

使用ajax交互 所有的操作都不再直接影响整个页面(局部操作)
JavaScript Ajax异步回调
Ajax的异步回调，就是Ajax请求成功以后执行一个函数，在函数内可以拿到接口返回值，然后进行页面加载、

  success: function (args) {
                window.location.href=args
            }
 回顾所学
self.location.href="/url" 当前页面打开URL页面
location.href="/url" 当前页面打开URL页面
windows.location.href="/url" 当前页面打开URL页面，前面三个用法相同。
this.location.href="/url" 当前页面打开URL页面
parent.location.href="/url" 在父页面打开新页面
top.location.href="/url" 在顶层页面打开新页面

视图代码

from django.shortcuts import render, HttpResponse, reverse, redirect


# Create your views here.


def add(request):
    print(request.is_ajax())  # "is_ajax"判断混是否是Ajax请求
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            i1 = request.POST.get('i1')
            i2 = request.POST.get('i2')
            res = int(i1) + int(i2)
            return HttpResponse(res)
        elif request.method == 'GET':
            name = request.GET.get('d1')
            if name == 'j':
                return HttpResponse('j太短了')
            elif name == 'ja':
                return HttpResponse('ja也不是很长')
            elif name == 'jason':
                return HttpResponse('jason已存在')
    """Ajax发送json格式数据"""
    if request.method == 'POST':
        print(request.POST)
        print(request.body)#
        json_bytes = request.body
        import json
        "jason  自带解码功能无需自己解码  不需要自己在decode"
        json_dict = json.loads(json_bytes)#b'{"name":"jason","pwd":123}'
        print(json_dict, type(json_dict))#{'name': 'jason', 'pwd': 123} <class 'dict'>
        """可以自己封装"""
        request.JSO=json_dict

    """文件操作"""
    if request.method == 'POST':
        print(request.POST)
        # print(request.body)
        print(request.FILES)
    return render(request, 'add.html')
    """ajax代码重定向操作"""
    if request.method=='POST':
        return HttpResponse('https://www.43ckck.com')
    return render(request, 'add.html')

HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {#    {% load static %}#}
    {#    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">#}
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.0.0/jquery.js"></script>
    {#    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>#}
</head>
<body>
{##}
{#<input type="text" id="i1">+<input type="text" id="i2">=<input type="text" id="i3">#}
{#<button id="btn">计算</button>#}
{#    <p>username:#}
{#        <input type="text" id="d1">#}
{#    </p>#}
{#<script>#}
{#    $('#d1').on('input',function (){#}
{#        $.ajax({#}
{#            url: '',#}
{#            type:'get',#}
{#            data:{'d1':$(this).val()},#}
{#            success:function (args){#}
{#                alert(args)#}
{#            }#}
{#        })#}
{#    })#}
{##}
{#    $('#btn').click(function () {#}
{#获取两个框里输入内容#}
{#        let i1val = $('#i1').val();#}
{#        let i2val = $('#i2').val();#}
{#    发送ajax请求传数据#}
{#        $.ajax({#}
{#  url  写入地址 不写的话是当前所在页面#}
{#            url:'',#}
{#    type是指定当前 去请求的方式可以是get也可以是post#}
{#            type:'post',#}
{#    data 是请求携带数据 比如字典#}
{#            data:{'i1':i1val,'i2':i2val},#}
{#    最后 异步提交任务 结果不要 异步回调机制也就是用回调函数  success:function#}
{#            success:function (args) {#}
{#    异步回调函数 后端自动触发#}
{#                 $('#i3').val(args)#}
{#            }#}
{#        })#}
{#    })#}
{#</script>#}
{#enctype="multipart/form-data"> 可以获取文件数据#}
{#<form action=""method="post" enctype="multipart/form-data">#}
{#    <input type="text" name="username">#}
{#    <input type="text" name="password">#}
{#    <input type="file" name="file">#}
{#    <input type="submit">#}
{#</form>#}
{#<button id="d1">发送Json格式数据</button>#}
{#<script>#}
{#    $('#d1').click(function () {#}
{#        $.ajax({#}
{#            url: '',#}
{#            type: 'post',#}
{#            contentType:'application/json',#}
{#            data: JSON.stringify({'name': 'jason','pwd':123}),#}
{#            success:function (args){#}
{#    没有回调 就不处理#}
{#            }#}
{#        })#}
{#    })#}
<input type="text" id="name">
<input type="text" id="pwd">
<input type="file" id="file">
<button id="d1">发送Ajax请求</button>
<script>
    $('#d1').click(function () {
        "固定记忆  需要利用 js 内置对象 FromData"
        let myFormData = new FormData
        "duixiang对象添加普通数据"
        myFormData.append('name', $('#name').val())
        myFormData.append('pwd', $('#pwd').val())
        "对象添加文件数据"
        myFormData.append('myfiles', $('#file')[0].files[0])
        "发送Ajax请求"
        $.ajax({
            url: '',
            type: 'post',
            data: myFormData,
            {#如果携带文件必须用到这两个国定参数#}
            contentType: false,
            processData: false,
            success: function (args) {
                window.location.href=args
            }
        })
    })

</script>

</body>
</html>

Ajax参数

1.url: 
要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2.type: 
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3.timeout: 
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async: 
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5.cache: 
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6.data: 
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType: 
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

8.beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
            function(XMLHttpRequest){
               this;   //调用本次ajax请求时传递的options参数
            }
9.complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //调用本次ajax请求时传递的options参数
          }

10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
         (1)由服务器返回，并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
         }

11.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
            function(data, type){
                //返回处理后的数据
                return data;
            }

15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。

20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。