Ajax

简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
ajax不是一门全新知识 本质就是一些js代码 我们学习ajax直接使用jQuery封装之后的版本(语法更加简单) 使用ajax的前提必须要引入jQuery文件

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

Ajax常见应用场景

搜索引擎根据用户输入的关键字，自动提示检索关键字。

还有一个很重要的应用场景就是注册时候的用户名的查重。

其实这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为lemontree7777777的用户是否存在，最终服务器返回true表示名为lemontree7777777的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

整个过程中页面没有刷新，只是局部刷新了；
在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

 页面上有三个input框和一个提交按钮 前两个框输入数字 点击按钮 最后一个框里面展示数字的和 并且页面不能刷新
  $('#btn').click(function () {
            // 获取两个框里面的数据
            let i1Val = $('#i1').val();
            let i2Val = $('#i2').val();
            // 发送ajax请求传输数据
            $.ajax({
                url:'',  // 不写默认就是当前页面所在的地址
                type:'post', // 指定当前请求方式
                data:{'i1':i1Val,'i2':i2Val},  // 请求携带的数据
                success:function (args) {  // 异步回调函数 后端有回复自动触发
                    $('#i3').val(args)
                }
            })
        })

AJAX的特点

AJAX使用JavaScript技术向服务器发送异步请求；
AJAX请求无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高； 
两个关键点:1.局部刷新，2.异步请求

前后端传输数据编码格式

"""
请求体中携带编码格式
	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) {
            }
        })
    })

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) {
                // 处理异步回调返回的结果
            }
        })
    })

"""
回调机制处理策略
使用ajax交互 所有的操作都不再直接影响整个页面(局部操作)
"""