Ajax学习笔记

Posted 2021-03-29 海筒学苑

一、概念

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. 创建异常对象：

   <script>
   if(window.XMLHttpRequest){
       //支持 XMLHttpRequest
       var xhr = new XMLHttpRequest();
   }else{
       //不支持XMLHttpRequest,使用 ActiveXObject 创建异步对象
       var xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   </script>
   

1. IE7+,Chrome,Firefox,Safari,Opera 调用XMLHttpRequest生成xhr对象

2. IE低版本(IE6及以下)调用ActiveXObject()生成xhr

3. xhr成员

   三、Ajax操作步骤

• 注意：django中post需要传递csrf_token，否则触发响应403，拒绝访问;

• 获取csrf_token方法如下：

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

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

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

• 作用：响应数据

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

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

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

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"
   

   var csrf=$("[name='csrfmiddlewaretoken']").val();
   #获取后，将token放在post body数据中一并提交
   

3. Open()方法

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

4. send()方法

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

5. readyState属性

6. 属性 - responseText

7. 属性 - status

8. 事件

四、Jquery对Ajax的支持

• $ajax()

  ```shell
  参数对象中的属性：
  1.url : 字符串，表示异步请求的地址
  2.type : 字符串，请求方式，GET 或 POST
  3.data : 传递到服务器端的参数
      可以是字符串 ："name=sf.zh&age=18"
      也可以是js对象:
          {
              name:"sf.zh",
              age:18
          }
  4.dataType : 字符串，响应回来的数据的格式
      1.'html'
      2.'xml'
      3.'text' 
      4.'script'
      5.'json'
      6.'jsonp' : 有关跨域的响应格式
  5.success:回调函数，请求和响应成功时回来执行的操作
  6.error : 回调函数，请求或响应失败时回来执行的操作
  7.beforeSend : 回调函数，发送ajax请求之前执行的操作，如果return false，则终止请求
  8.contentType : 当有请求体有数据提交时，标明提交方式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'
  ```
  

• 示例代码

  <script ></script>
  <script>
      $(function(){
          $('#btn').click(function(){
              $.ajax({
                  url:'/test_jq_get_server',
                  type:'get',
                  success:function(res){
                      $('#show').html(res);
                  }
              })
          })
      })
  </script>