ajax简单介绍

最新推荐文章于 2022-03-20 15:49:42 发布

Eva_kevin

最新推荐文章于 2022-03-20 15:49:42 发布

阅读量249

点赞数

本文链接：https://blog.csdn.net/kevin_ZKW/article/details/105570812

版权

原生ajax

ajax是什么

ajax：异步的JavaScript和xml.

ajax是前后端交互的一种技术。

补充同步和异步

同步：程序发出请求需要等待当前请求执行结束才能进行下一步的操作

异步：程序发出请求不需要等待当前请求结束就能进行下一步操作

例：5个人需要买票，5个人在5个窗口同时买票不需要等这是异步，5个人在一个窗口排队买票需要等待前面结束到下一个，这是同步

console.log(1);  //同步
    setTimeout(function(){
      console.log(2);  //异步
    },0);
    console.log(3);  //同步

ajax的优势

无需刷新整个页面，即可与服务器交互数据并更新页面的部分内容
JS的原生对象，无兼容问题

ajax的状态码

ajax状态码：描述当前处于ajax的哪一个步骤；处在ajax的第一环节可能就是0，进入ajax的第二环节就是1，......

怎么获取ajax状态码：ajax对象.readyState

有哪些状态码：

0：表示创建一个ajax对象成功
1：表示匹配请求信息成功（也就是执行open）
2：表示响应题已经回到浏览器，但是还不能使用（因为此时还是一个响应报文）
3：浏览器正在解析响应报文（把响应报文里面的响应题分离出来）
4：浏览器分离响应头成功，可以正常使用（本次请求结束）

当 ajax 的状态码改变的时候，onreadystatechange 事件会触发

ajax的交互四步骤

    // 1.创建异步对象
    var xhr = new XMLHttpRequest()

    // 2. 配置请求信息
    // open(参数1，参数2，参数3)
    //参数1：请求方式
    //参数2：请求接口
    //参数3：是否异步  默认是异步 可不写
    // 以 GET 的请求方式 向 ajax.php 文件发起一个请求
    xhr.open('GET', './ajax.php')

    // 3. 发送请求
    // 表示把配置好的这个请求发送出去
    xhr.send()

    // 4. 接受后端响应
    xhr.onreadystatechange = function () {
      // 这个函数会在当前这个 ajax 请求完成的时候触发
      // 这个 ajax 请求一完成, 那么就会触发这个函数了
      // 我们再这里就能得到后端给返回的数据
      // http 状态码时 200 ~ 299 之间
      // xhr.status 就是本次请求的 http 状态码
      if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
        // responseText 就是响应体
        console.log(xhr.responseText)
      }
    }

ajax的兼容处理

new XMLHttpRequest => 标准浏览器使用

new ActiveXObject => IE 低版本使用

兼容处理：

let xhr=null;
    if(window.XMLHttpRequest){
      xhr=new XMLHttpRequest();
    }else{
      xhr=new ActiveXObject('Micorsoft.XMLHTTP');
    }

jQuery发送ajax请求

jQuery 里面帮我们封装好了几个方法，专门用来发送 ajax 请求的

$.get() -> 专门用来发送 get 请求的
$.post() -> 专门用来发送 post 请求的
$.ajax() -> 发送什么请求都可以(get, post, put, delete) 并且还可以发送一个 jsonp 请求

ajax发送GET请求

语法: $.get(请求地址, 需要携带到后端的参数, 成功的回调函数, 期望后端返回的数据类型)

=> 请求地址: 你要请求的后端接口地址(必填)

=> 携带参数: 你需要给后端传递的参数

-> 可以是一个固定格式的字符串 'key=value&key=value'

-> 也可以是一个对象 { a: 100, b: 200 }

=> 成功回调: 当请求成功的时候会执行的函数

=> 期望数据类型: 就是你是不是需要 jQuery 帮你解析响应体

-> 默认是不解析

-> 当你传递一个 'json' 的时候, 会自动帮你执行 JSON.parse()

 $.get('./server/get.php', 'a=100&b=200', function (res) {
      // res 就是后端返回的数据, 也就是响应体
      // console.log(JSON.parse(res))
      console.log(res)
    }, 'json')

ajax发送POST请求

语法: $.post(请求地址, 需要携带到后端的参数, 成功的回调函数, 期望后端返回的数据类型)

=> 四个参数和 $.get 是一摸一样的

  $.post('./server/post.php', 'c=hello&d=world', function (res) {
      console.log(res)
    }, 'json')

jQuery 的 $.ajax 方法

用来发送综合 ajax 请求的(GET, POST, PUT, ...)

语法: $.ajax(对象)

=> 对象是对本次请求的所有配置

=> $.ajax({

url: '', // => 请求地址(必填)

type: '', // => 请求方式(GET, POST, ...) 默认是 GET

data: '', // => 携带到后端的参数

dataType: '', // => 期望后端返回的数据类型, 默认不解析

async: true, // => 是否异步, 默认是 true

success: function () {}, // => 成功的回调

error: function () {}, // => 失败的回调

timeout: 数字, // 单位是 ms, 超时时间(超过你写的时间没有响应, 那么就算失败)

cache: true, // 是否缓存, 默认是 true

context: 上下文, // 改变回调函数里面的 this 指向

...

})

$.ajax 里面失败的回调

=> 不光是请求失败的时候会触发

=> jQuery 认定失败就是失败

-> 当 dataType 写成 json 的时候, jQuery 会帮我们执行 JSON.parse()

-> 当后端返回一个不是 json 格式的字符串的时候

-> 执行 JSON.parse() 就会报错

-> 也会执行失败的回调, 请求虽然成功, 但是解析失败了, 也是失败

=> JSON.parse('你好世界') -> 就会报错了

$.ajax 里面是否缓存的问题

=> 这个请求要不要缓存

=> 当两次请求地址一样的时候, 就会缓存

=> 如果你写成 false, 表示不要缓存

=> jQuery 就会自动再你的请求后面加一个参数 _=时间戳

-> 第一次请求 ./server/get.php?_=11:10:01.325的时间戳

-> 第二次请求 ./server/get.php?_=11:10:02.326的时间戳

$.ajax 里面的回调 this 指向问题

=> ajax 的回调里面默认 this 指向被 jQuery 加工过的 ajax 对象

=> context 的值你写的是谁, 回调函数里面的 this 就时谁

$.ajax 里面的请求方式的问题

=> $.ajax 这个方法里面, type 表示请求方式

=> jQuery 还给了我们一个参数叫做 method

=> 也表示请求方式

-> 当你写请求方式的时候

-> 可以写成 type: 'POST'

-> 也可以写成 method: 'POST'

$.ajax 里面的接收响应的问题(2015年以后的版本才有 promise 的形式)

=> jQuery 默认把 ajax 封装成了 promsie 的形式

=> 你可以用 success 选项接收成功的回调

=> 也可以用 .then() 的方式接收响应

var obj = {
      name: '我是 obj 对象'
    }

$.ajax({
      url: './server/get.php',
      type: 'GET', // 大小写无所谓, GET 请求可以不写
      data: 'a=100&b=200', // { a: 100, b: 200 },
      dataType: 'json', // jQuery 帮我们执行 JSON.parse()
      async: true, // 是否异步
      success: function (res) { // 成功的回调
        console.log('请求成功了')
        console.log(res)
        console.log(this)
      },
      error: function (xhr, err, info) { // 失败的回调
        console.log('请求失败')
        // xhr => ajax 对象
        // err => 错误信息, 一个简单描述
        // info => 详细的错误信息
        console.log(xhr)
        console.log(err)
        console.log(info)
      },
      timeout: 1000, // 超时时间, 1000ms 后没有响应回来就失败了
      cache: false, // 不缓存, 就会自动添加一个参数叫做 _=时间戳
      context: obj, // 让回调函数里面的 this 指向 obj 这个对象
    })