【精简版】jQuery 中的 Ajax 详解

目录

一、概念

二、jQuery 发送 GET 请求

三、jQuery 发送 POST 请求

四、$.ajax() 方法

1、含义

2、settings 选项

① type 属性

② async 属性

③ headers 属性

④ contentType 属性

⑤ processData 属性

⑥ data 属性

⑦ timeout 属性

⑧ beforeSend(jqXHR) 方法

⑨ success(data, textStatus, jqXHR) 方法

⑩ error(jqXHR, textStatus) 方法

⑪ complete(jqXHR, textStatus) 方法

五、扩展知识


一、概念

        众所周知,jQuery 是一个跨主流浏览器的 JavaScript 库,它封装了 JavaScript 的常用功能代码,简化了 HTML DOM 操作、事件处理、动画设计和 Ajax 交互等任务。jQuery 中的 Ajax 是对 XMLHttpRequest 或 ActiveXObject(IE9以下版本中)的封装,它提供了一种更加方便和强大的方式来与服务器进行数据交换,从而实现在不重新加载整个页面的情况下,对网页进行局部更新。

二、jQuery 发送 GET 请求

//$.ajax() 等同于 jQuery.ajax(),是 jQuery 提供的一个全局函数,用于发送 Ajax 请求。
//该函数接受一个配置对象作为参数,这个对象可以包含各种属性和方法,用于定义 Ajax 请求的不同方面。
$.ajax({
    //属性 type 用于指定请求类型(GET/POST),默认为 GET,其它 HTTP 请求方法仅部分浏览器支持。
    type: 'GET',
    //属性 url 用于指定请求地址。
    url: 'http://127.0.0.1:8080/getData',
    //属性 data 用于指定发送到服务器的数据,GET请求时 data 属性值将自动转换为查询字符串格式并附加在 URL 后。
    //如果 value 为数组,jQuery 将自动为不同值对应同一个名称,如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
    data: {param1:value1, param2:value2},
    //方法 success(data, textStatus, jqXHR) 用于指定请求成功后的回调,其中参数 data 表示服务器的响应体信息;
    //textStatus 表示请求的状态,对于成功的请求,值通常是"success";
    //jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展,提供了更多的方法和属性来处理 HTTP 请求。
    success: function(data,textStatus,jqXHR){
        //XMLHttpRequest 对象的属性 status,用于表示服务器响应的 HTTP 状态码,如200表示成功,404表示未找到等。
        console.log(jqXHR.status);
        //XMLHttpRequest 对象的属性 statusText,用于表示服务器响应的状态描述,如"OK"、"Not Found"等。
        console.log(jqXHR.statusText);
        //XMLHttpRequest 对象的方法getAllResponseHeaders(),以一个字符串形式返回所有的响应头,且每个响应头独占一行。
		console.log(jqXHR.getAllResponseHeaders());
        //参数 data 表示服务器的响应体信息。
        console.log(data);
        //XMLHttpRequest 对象的属性 responseType,用于表示服务器响应体的数据类型,"" (默认值)表示字符串、text 表示字符串、
        //arraybuffer 表示 ArrayBuffer 对象、blob 表示 Blob 对象、document 表示 Document 对象(XML/HTML)、json 表示 JSON 对象。
        console.log(jqXHR.responseType);
    },
    //属性 timeout 用于指定当前请求的最大请求时间,单位为毫秒,如果请求在该时间内未结束则会自动终止,同时执行 error 指定的回调。
    timeout: 2000,
    //方法 error(jqXHR, textStatus) 用于指定请求失败时的回调,
    //其中参数 jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展,提供了更多的方法和属性来处理 HTTP 请求;
    //textStatus 表示请求的状态,对于失败的请求,值通常是"timeout"(请求超时)、"error"(请求未能成功完成)、"abort"(请求被中止)、
    //"parsererror"(解析返回的数据时出错)等。
    error: function(jqXHR,textStatus){
        console.log("
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值