WEB框架之Ajax

一 Ajax简介

1 Ajax的介绍

AJAX翻译成中文就是"异步Javascript和XML"。即使用JavaScript语言与服务器进行异步交互，传输的数据为XML(当然，传输数据不只是XML,现在更多使用json数据)
同步交互：客户端发出一个请求后,需要等待服务器结束后才能发出第二个请求
异步交互：客户端发出一个请求后无需等待服务器响应结束,就可以发出第二个请求
AJAX除了异步的特定外还有一个就是：浏览器局部刷新,(这一特点就给用户的感受是在不知不觉完成请求和响应过程)

2 Ajax的应用场景

当我们在百度中输入一个“老”字后，会马上出现一个下拉列表！列表中显示的是包含“老”字的4个关键字。

其实这里就使用了AJAX技术！当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，查询包含“老”字的前10个关键字，然后服务器会把查询到的结果响应给浏览器，最后浏览器把这4个关键字显示在下拉列表中。

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

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

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

3、ajax的优点

优点：

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

二基于jquery的Ajax实现

<script type="text/javascript">
      $(function () {
          $(".Ajax").click(function () {
                    // 发送Ajax请求
                    $.ajax({
                        url:"/test_ajax/",        // 请求URL
                        type:"get",               // 请求方式post
                        success:function (data) { // 回调函数
                            console.log(data);
                            $("#aj").html(data)
                            }
                        }
                    )
                })
            })
</script>

三基于Ajax的登录验证

在注册表单中,当用户填写了用户名之后,把光标移开后,会自动向服务器发送异步请求。服务器返回True或False,返回True表示这个用户名以及注册过，返回false表示没有注册过。客户端得到服务器返回结果后，确定是否在用户名文本框显示"用户名已被注册"的错误信息

Ajax代码：

  $.ajax({
         url:"/login/",
         type:"POST",
          data:{
                username:$('#username').val(),
                password:$('#password').val()
          },
        success:function (data) {
                console.log(data);
                var ret = JSON.parse(data);
                if (ret.state){
                    location.href = 'http://www.baidu.com'
                 }else {
                    $('.error').html(ret.msg).css({'color':'red'})
                 }
})

视图函数代码：

def login(request):
        if request.method == 'POST':
            username = request.POST.get('username')
            password = request.POST.get('password')
            ret = Users.objects.filter(username=username,password=password)
            message = {
                    'state':False,
                    'msg':None
                    }
            if ret:
                message['state'] = True
            else:
                message['msg'] = '用户名或密码错误'
                message = json.dumps(message)
                return HttpResponse(message)
        return render(request,'index.html')

四 js接收Python的json对象

在json的编码过程中，会存在从Python原始类型向json类型的转换过程，具体的转换如下
python ----> json

ajax发送JSON数据

$(".btn").click(function(){
    $.ajax({
        url:"",
        type:"post",
        contentType:"application/json"
        data:JSON.stringfy({
                a:1,
                b:2
            }),
        success:function(data){
                console.log(data)
            }
        })

def get_json(request):
    if request.method == 'POST':
        print(request.body)  # 请求报文

五 Jsonp跨域请求

浏览器有一个很重要的概念--同源策略。所谓同源是指，域名协议,端口相同。不同源的客户脚本在没有明确授权的情况下不能读写对方资源。

1 JSONP的js实现

JSONP是JSONwith Padding的缩略。可以让网页从别的域名获取资料，即跨域读取数据
它是一个非官方的协议，它允许服务器端集成Script tags返回客户端, 通过JavaScript callback的形式实现跨域访问

示例一：

<input type="button" onclick="jonpRequest()" value="跨域请求"> 
<script>
    tag = null;
    function jonpRequest(){
            var tag = document.createElement('script');
            tag.src = "http://baidu.com/";
            document.head.appendchild(tag);
        } 
    function list(arg){
                console.log(arg);
                document.head.removeChild(tag);
         }
</script>

示例二：

<script>
    function test1(w){
            alert(w)
        }
</script>    
            
<script>
    tag = null;
    function jonpRequest(){
    var tag = document.createElement('script');
    tag.setAttribute("type", "text/javascript")
    tag.src = "http://127.0.1/jquery_get";
    document.head.appendchild(tag);
        } 
    function list(arg){
            console.log(arg);
            document.head.removeChild(tag);
        }
</script>
            
def jquery_get(req):
        print("hello")        
        return HttpResponse("test1('kkk')")

2 Jquery实现跨域请求

示例一：

<script type="text/javascript">
    $.ajax({
        url:"http://127.0.0.1:8002/get_byjsonp",
        dataType:"jsonp",
        jsonp:'callbacks',
        jsonpCallback:"fetch"
        });

        function fetch(arg){
                    alert(arg);
         }    
                
#------------------------------- http://127.0..1:8002/get_byjsonp
    def get_byjsonp(req):
        callback = req.GET.get('callbacks')
        print(callback)
        return HttpResponse('%s("harry")' %callback)

示例二：

<script type="text/javascript">
 $.ajax({
         url:"http://127.0.0.1:8002/get_byjsonp",
         dataType:"jsonp",
         jsonp:'callbacks',
         success:function(data){
                alert(data)
        }
});
            
#------------------------------- http://127.0..1:8002/get_byjsonp
 def get_byjsonp(req):
         callback = req.GET.get('callbacks')
         print(callback)    # jQuery23232415124215_231243
         return HttpResponse('%s("harry")' %callback)

六ajax使用seralize

如果我们想使用ajax向后端提交数据，但是一个form表单下有多个input标签或select标签，如果我们想一下全部获取可以使用seralize

serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。

serialize()函数常用于将表单内容序列化，以便用于AJAX提交。

该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串，该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。

该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

<form id='f1'>
    <input type='text' name='input1' />
    <input type='text' name='input2' />
    <input type='text' name='input3' />
    <input type='text' name='input4' />
    <input type='text' name='input5' />
    <input type='text' name='input6' />
    <select mulitiple>
         <option></option>
     </select>
</form>

$.ajax({
    url：
    data：$("#f1").seralize(),
    traditional:true,
})

对<form>元素进行序列化可以直接序列化其内部的所有表单元素。

// 序列化<form>内的所有表单元素
// 序列化后的结果：uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );

我们也可以直接对部分表单元素进行序列化。

// 序列化所有的text、select、checkbox表单元素
// 序列化后的结果：username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text, select, :checkbox").serialize() );

七文件上传

1 基于form表单的文件上传

文件和其他的数据类型不一样，是一个二进制的形式
Form上传文件的时候切记要加上：enctype="multipart/form-data"

(1) HTML代码
<form action="/upload/" method="post" enctype="multipart/form-data">
          用户名 <input type="text" name="user">
          头像  <input type="file" name="avatar">
         <input type="submit" >
</form>

(2) 视图函数
def upload(req):
    if req.method == 'POST':
        print(req.POST)
        print(req.FILES)
        file_obj = req.FILES.get("avatar")    # 拿到文件对象的方法
        with open("static/%s" % file_obj.name, 'wb') as f:        # 拿到文件名字
                for line in file_obj:
                    f.write(line)
        return HttpResponse('OK')

2 基于Ajax的文件上传

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

注意：下文中的几个需要解释的

$("#upload") 拿到的是一个集合
$("#upload")[0]  就是一个dom对象
$("#upload")[0].files   拿到的是一个filelist
$("#upload")[0].files[0]  拿到的是当前最近的文件对象

要是使用FormData一定要加上：

一定要加上：

　　contentType：false
　　processDate：false #不做预处理

上传示例：

$("#btn").click(function () {
      var formadata = new FormData();
      formadata.append('user',$('#user').val());
      formadata.append('avatar',$('#avatar')[0].files[0]);     // 取到上传文件的对象
 $.ajax({
       url:/upload/,
       type:"post",
       contentType:false,
       processData:false,
       data:formadata,
       success:function (data) {
              console.log(data);
               console.log(123)
               }
          })
    })

3 补充一个实现上传图片预览功能

上传头像： 点击头像等于点击input
<div class="form-group">
    <label for="avatar">
        头像
    <img id="avatar_img" width="60" height="60" src="/static/blog/img/default.png">
    </label>
        <input type="file" id="avatar">
</div>

实现头像预览功能：
    <script>
        $("#avatar").change(function(){
            // 获取文件对象
            var file_obj = $(this)[0].files[0];
            // 获取文件对象的路径
            var reader = new FileReader()
            reader.readAsDataURL(file_obj)
            // 修改img的src属性
            reader.onload = function(){
            $("#avatar_img").attr("src", reader.result)
                        };
    </script>