ajax学习笔记

JDS_DIJ

已于 2023-12-30 20:51:31 修改

阅读量98

点赞数

分类专栏：笔记文章标签： ajax

于 2021-11-24 20:50:32 首次发布

本文链接：https://blog.csdn.net/BigBang_JJDS/article/details/121524702

版权

笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

原生ajax使用步骤

// 创建核心对象
var xmlHttp = new XMLHttpRequest();
// 编写回调函数(即xmlHttp.onreadyState发生变化就会调用一次该回调函数)
xmlHttp.onreadystatechange = function() {…}
// 编写请求方式和请求路径
xmlHttp.open(“请求方式”, “请求路径”,是否是异步请求)
// 发送请求(post请求才设置参数;get请求不设置参数)
xmlHttp.send([post请求参数]);

ajax-api详解

常用属性:

onreadystatechange:检测readyState状态改变的时候

readyState:ajax核心对象的状态

0:核心对象创建

1:调用了open方法

2:调用了send方法

3:部分响应已经生成

4:响应已经完成

status:状态码

常用方法:

setRequestHeader(“content-type”,“form表单enctype属性”):设置post请求的参数的类型必须放在send方法之前.

jQuery的ajax使用

方式1: $(this).load(请求路径, 请求参数, 回调函数)

举例:$(this).load(“请求路径”, params, function(数据) {…})

当params是json对象时,该请求是post请求,

当params是字符串时,该请求时get请求

方式2: $.get(请求路径, 请求参数, 回调函数, type)

举例:$.get(url,params,function(数据){},type)

url:请求的路径

params:请求的参数参数为key\value的形式 key=value {“”:“”,“”:“”}

fn:回调函数参数就是服务器发送回来的数据

type:返回内容格式，xml, html, script, json, text, _default。以后用"json"

方式3: $.post(url,params,function(数据){},type);

拦截所有请求

    // 拦截所有请求
    const xhrOverride = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url) {
      console.log('拦截请求:', method, url, this);
      const xhr = this; // 保存 XMLHttpRequest 对象的引用

      //在请求发送前设置token
      xhr.addEventListener('readystatechange', function() {
        if (xhr.readyState === XMLHttpRequest.OPENED) {
          xhr.setRequestHeader('Authorization', 'Bearer your_token_here');
        }
      });
      return xhrOverride.apply(this, arguments);
    };