jQuery——AJAX文字类

AJAX=Asynchronous JavaScript And XML（异步的Javascript和XML）

特点：

1.  AJAX并非编程语言，是内建浏览器XMLHttpRquest对象（从web服务器请求数据）、JavaScript、HTML DOM（显示或使用数据）这三者相结合的一种技术。
2. 使用Javascript语言与服务器进行异步交互的，并进行局部刷新。
3. 不用刷新整个的页面，就可以将指定区域的画面进行刷新。
4. 在页面加载完成后从服务器接收或发送请求。
5. AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

需要注意的点：

1. 发送时要关注发送的地址，如果是form表单要么删除form表单，要么button按钮的type也需要设置成button
2. 前端发送到后端的数据，后端提取时。列表类型的文件需要或使用getlist的提取提取，或使用json.stringify在前端转换成json文件
3. 在ajax中，再使用function时，this则会是ajax，如果始终要指定为标签，那么可以使用箭头指向。
4. 在后端进行删除后，还需要把前端的内容进行删除才可。从而不用刷新整个页面。

同步和异步

• 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；（GET、POST、form表单、a标签）
• 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。（AJAX）

AJAX调用的XMLHttpRequest是如何工作：

1. 网页中发生一个事件（页面加载、按钮点击）
2. 由JavaScript创建 XMLHttpRequest对象
3. XMLHttpRequest对象向web服务器发送请求
4. 服务器处理该请求
5. 服务器将相应发送会网页
6. 由JavaScript读取响应
7. 由JavaScript执行正确的动作（如更新页面）

AJAX常见应用情景

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

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

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

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

       

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

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

XMLHttpRequest对象

1. Ajax的核心是XMLHttpRequest对象
2. 所有现代浏览器都支持XMLHttpRequest对象
3. XMLHttpRequest对象用于同幕后服务器交换数据。这就意味着可以更新网页的部分，而不需要重新加载整个网页。

variable = new XMLHttpRequest();

使用AJAX请求信息：

javascript

$.ajax({
    url:'/login_au/',//写入需要请求的URL路径
    methods:'get',//请求还是发送
    success:(res)=>{        //箭头指向，与function的区别是this表达，箭头表达为标签，而function表达为ajax
        console.log(res); //获取的信息
    },
    error:function(err){
        console.log(err)//出现问题的信息
    },
})

GET还是POST：

GET比POSRT更简单更快，可用于大多情况下。

不过POST比GET更强大更安全。，请在下面的情况始终使用POST：

• 缓存文件不是选项（更新服务器上的文件或数据库）
• 想服务器发送大量数据（post无大小限制）
• 发送用户输入（可包含未知字符）

ajax常用实例

发送和接收数据

//使用ajax来进行前端的数据的发送和接收工作
$("#ID").click(function () {
    $.ajax({
      url: "/ajax_test/",                                     #提交的连接
      type: "POST",                                           #提交的方式，默认get
      data: {username: "Q1mi", password: 123456,
            age:JSON.stringify(['22','44','88'])},            #提交的信息,提交列表时，需要进行转换
      success:(data)=> {                                      #接收信息data是接收的数据
        $(this).text(data)                                    #显示的方式
      }
    })
  })
//后台接收ajax数据并进行处理
def ajax_test(request):
    user_name = request.POST.get("username")
    password = request.POST.get("password")
    age = json.loads(request.POST.get('age'))          #列表数据接收，建议使用json进行数据转换。
    print(user_name, password)
    return HttpResponse("OK")                                 #回的信息

上传文件

// 上传文件示例
$("#b3").click(function () {
  var formData = new FormData();
  formData.append("key_name", $("[name='file']").val());     key与vlaue是文件对象
  formData.append("f1", $("#f1")[0].files[0]);
  $.ajax({
    url: "/upload/",
    type: "POST",
    processData: false,  // 告诉jQuery不要去处理发送的数据
    contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
    data: formData,      //将上面的文件放入到ajax中
    success:function (data) {
      console.log(data)
    }
  })
})


//后台接收ajax数据并进行处理
def ajax_test(request):
    file_name = request.FILES
    return HttpResponse("OK")                                 #回的信息

在网页中查看接口：

跨域访问

1. 加载的网页和XML文件都必须位于相同服务器上
2. 处于安全原因，现代浏览器不允许跨域访问
   

AJAX请求如何设置csrf_token

方式1

通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  data: {
    "username": "Q1mi",
    "password": 123456,
    "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中
  },
  success: function (data) {
    console.log(data);
  }
})

方式2

通过获取返回的cookie中的字符串 放置在请求头中发送。

注意：需要引入一个jquery.cookie.js插件。

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 从Cookie取csrftoken，并设置到请求头中
  data: {"username": "Q1mi", "password": 123456},
  success: function (data) {
    console.log(data);
  }
})

或者用自己写一个getCookie方法：

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

每一次都这么写太麻烦了，可以使用$.ajaxSetup()方法为ajax请求统一设置。

function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

注意：

如果使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值。

如果你的视图渲染的HTML文件中没有包含 {% csrf_token %}，Django可能不会设置CSRFtoken的cookie。

这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。

django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def login(request):
    pass