Ajax学习笔记

/ 0评 / 0

一、概念

  1. Ajax:Asynchronous Javascript And Xml异步的JS和xml(Extensible Markup Language 数据交换与传输格式,现已被json所取代),通过JS异常向服务器发送请求并接收响应数据。
    • 同步访问:当客户端向服务器发送请求时,服务器在处理的过程中,浏览器只能等待,效率较低。
    • 异常访问:当客户端向服务器发送请求时,服务器在处理的过程中,客户端可以做其他的操作,不需要一直等待。
  2. AJAX优点:
    1. 异步访问
    2. 局部刷新
  3. 使用场景
    1. 搜索建议
    2. 表单验证
    3. 前后端分离

二、Ajax核心对象-异常对象(XMLHttpRquest)

  1. XMLHttpRequest概念[简称:xhr]: 异常对象,代替浏览器向服务器发送异常的请求并接收响应[xhr是由JS提供]
  2. 创建异常对象:

    1. IE7+,Chrome,Firefox,Safari,Opera 调用XMLHttpRequest生成xhr对象
    2. IE低版本(IE6及以下)调用ActiveXObject()生成xhr
    <script>
    if(window.XMLHttpRequest){
        //支持 XMLHttpRequest
        var xhr = new XMLHttpRequest();
    }else{
        //不支持XMLHttpRequest,使用 ActiveXObject 创建异步对象
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    </script>
    
  3. xhr成员

    1. Open()方法

      作用:创建请求
          语法:open(method,url,asyn)
          参数:
              method:请求方式,取值'GET' 或 'POST'
              url:请求地址,字符串
              asyn:是否采用异步的方式  - true:异步 / false:同步
          ex:  xhr.open('GET','/server',true);
      
    2. send()方法

      作用:通知xhr向服务器端发送请求
          语法:send(body)
          参数:
              GET请求:body的值为null  ->  send(null)
              POST请求:body的值为请求数据  ->  send("请求数据")
      
    3. readyState属性

      • 作用:请求状态,通过不同的请求状态来表示xhr与服务器的交互情况

        • 由0-4共5个值来表示5个不同的状态

          状态 说明
          0 代理被创建,但尚未调用open()方法
          1 open()方法已经被调用
          2 Send()方法已经被调用,响应头也已经被接收
          3 下载中;responseText属性已经包含部分数据
          4 下载操作已完成
    4. 属性 - responseText

      • 作用:响应数据
    5. 属性 - status

      • 作用: 服务器端的响应状态码

        状态码 说明
        200 表示服务器正确处理所有的请求以及给出响应
        404 请求资源不存在
        500 服务器内部错误
    6. 事件

      • 作用:第当xhr的readyState发生改变的时候都要触发的操作;也称架设函数;当readyState的值为4且status值为200时,才可以获取响应数据

    三、Ajax操作步骤

    1. GET请求

      //1.创建xhr请求
      var xhr = createXhr();
      //2.创建请求 - open()
      xhr.open('GET',url,asyn[true|false])
      //3.设置回调函数 - onreadystatechange
      xhr.onreadystatechange = function(){
          if(xhr.readyState == 4 && xhr.status == 200){
              //接收响应
              xhr.responseText;
          }
      }
      //4.发送请求
      xhr.send(null);
      ​
      //注意:若含有请求参数 - URL后拼接 查询字符串 QueryString
      //ex: xhr.open('get','/url?key=value&key=value',asyn)
      
    2. Post请求

      //1.创建xhr请求
      var xhr = createXhr();
      //2.创建请求 - open()
      xhr.open('post',url,asyn[true|false])
      //3.设置回调函数 - onreadystatechange
      xhr.onreadystatechange = function(){
          if(xhr.readyState == 4 && xhr.status == 200){
              //接收响应
              xhr.responseText;
          }
      }
      //4设置Content-Type;
      //默认ajax post的Content-Type为 "text/plain;charset=utf-8"
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      //5.发送请求
      xhr.send('请求数据');
      //请求数据同查询字符串 "uname=guoxiaonao&age=18"
      
      • 注意:django中post需要传递csrf_token,否则触发响应403,拒绝访问;
      • 获取csrf_token方法如下:
      var csrf=$("[name='csrfmiddlewaretoken']").val();
      #获取后,将token放在post body数据中一并提交
      

四、Jquery对Ajax的支持

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注