当前位置: 首页 > news >正文

jquery ajax学习笔记

这两天做项目的时候频繁用到jquery ajax,很多东西都忘了。于是写下这篇文章,加深印象,也方便自己日后查阅。

先看一下基本版本:

$.ajax({
    url: url,    //请求的url地址
    dataType: datatype,   //服务器返回的值类型
    async: true, //请求是否异步,默认为异步
    data: { 
        "id": "value" ,
        "param":"param"
    },//发送到服务器的参数
    type: "GET",   //请求方式
    beforeSend: function() {
        //请求前的处理
    },
    success: function(data) {
        //请求成功时处理
    },
    complete: function() {
        //请求完成的处理
    },
    error: function() {
        //请求出错处理
    }
});

接下来来详细看一下各个属性

  • url 请求的url地址,String类型

  • dataType 服务器返回的值的类型。【若没有填写,jQuery会自动根据HTTP包MIME信息来智能判断。若填写错了反而会有问题】有以下几种类型:

    • "xml": 返回XML文档,可用 jQuery 处理。

    • "html": 返回纯文本HTML信息;包含的 script 标签会在插入 dom 时执行。

    • "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为GET请求。(因为将使用DOM的script标签来加载)

    • "json": 返回 JSON 数据

    • "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

    • "text": 返回纯文本字符串

  • data 发送到服务器的参数。GET请求中将附加在URL后。

  • type 请求方式GET【默认方式】 | POST

  • async Boolean类型。默认值: true【表示异步】。
    默认设置下,所有请求均为异步请求。
    如果需要发送同步请求,设置为 false。
    【注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。】

  • cache Boolean类型。【默认】true。当dataType为script和jsonp时默认为 false。设置为false将不缓存此页面。
    【默认情况下,请求总会被发出去,但浏览器有可能从它的缓存中调取数据。要禁止使用缓存的结果,可以设置 cache 参数为 false】

  • contentType 发送信息至服务器时内容编码类型。默认值: "application/x-www-form-urlencoded"。
    contentType:"application/x-www-form-urlencoded; charset=utf-8"

  • beforeSend 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。(没有实践过,不是很懂。)

  • success 请求成功后的回调函数。参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。

  • dataFilter 在请求成功之后调用。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。

  • error 很明显是请求失败时调用此函数。有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

  • complete 请求完成后回调函数 (请求成功或失败之后均调用)。参数: XMLHttpRequest 对象和一个描述请求类型的字符串。

  • global 是否触发全局AJAX事件。默认为true | 【不触发则设置为】false。用于阻止响应注册的回调函数,比如 .ajaxSend,或者 ajaxError,以及类似的方法。这在有些时候很有用,比如发送的请求非常频繁且简短的时候,就可以在 ajaxSend 里禁用这个。

  • ifModified 仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
    【如果希望判断数据自从上次请求后没有更改过就报告出错的话,设置ifModified为true】

  • jsonp 在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。

  • jsonpCallback 为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。
    你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。

  • username 用于响应 HTTP 访问认证请求的用户名。

  • password 用于响应 HTTP 访问认证请求的密码
    如果服务器需要 HTTP 认证,可以使用用户名和密码可以通过 username 和 password 选项来设置。

  • processData 默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。
    【发送 DOM 树信息或其它不希望转换的信息设置为false】。

  • scriptCharset 只有当请求时 dataType 为 "jsonp" 或 "script",并且 type 是 "GET" 才会用于强制修改 charset
    通常只在本地和远程的内容编码不同时使用。

  • timeout 设置请求超时时间(毫秒)。此设置将覆盖全局设置。

参考文章:jQuery ajax()方法|菜鸟教程
jQuery ajax w3school

相关文章:

  • 前端工程化 - bower
  • WindowProc和DefWindowProc的区别
  • (转)h264中avc和flv数据的解析
  • JAVA - IDEA快捷键(精简版)
  • (紀錄)[ASP.NET MVC][jQuery]-2 純手工打造屬於自己的 jQuery GridView (含完整程式碼下載)...
  • 高吞吐量的分布式发布订阅消息系统Kafka-- 管理工具 Kafka Manager
  • TestLink相关配置
  • 新版Azure CDN HTTPS加速服务正式上线
  • FastJSON 简介及其Map/JSON/String 互转
  • 从接受自己到接受过去和把握当下
  • Ubuntu下安装Sublime Text 2
  • winfrom 菜单栏遮挡工作区
  • 一张图片学习 Git常用命令
  • 网络抓包工具
  • python中的OOP
  • @angular/forms 源码解析之双向绑定
  • 2019.2.20 c++ 知识梳理
  • Apache Zeppelin在Apache Trafodion上的可视化
  • JAVA多线程机制解析-volatilesynchronized
  • learning koa2.x
  • Python3爬取英雄联盟英雄皮肤大图
  • SpringBoot 实战 (三) | 配置文件详解
  • uva 10370 Above Average
  • Vue 动态创建 component
  • 猴子数据域名防封接口降低小说被封的风险
  • 理清楚Vue的结构
  • 如何胜任知名企业的商业数据分析师?
  • 数组的操作
  • 硬币翻转问题,区间操作
  • MiKTeX could not find the script engine ‘perl.exe‘ which is required to execute ‘latexmk‘.
  • 专访Pony.ai 楼天城:自动驾驶已经走过了“从0到1”,“规模”是行业的分水岭| 自动驾驶这十年 ...
  • ​ssh-keyscan命令--Linux命令应用大词典729个命令解读
  • ​比特币大跌的 2 个原因
  • # Swust 12th acm 邀请赛# [ A ] A+B problem [题解]
  • #[Composer学习笔记]Part1:安装composer并通过composer创建一个项目
  • #HarmonyOS:Web组件的使用
  • #鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行
  • #绘制圆心_R语言——绘制一个诚意满满的圆 祝你2021圆圆满满
  • (1)安装hadoop之虚拟机准备(配置IP与主机名)
  • (26)4.7 字符函数和字符串函数
  • (顶刊)一个基于分类代理模型的超多目标优化算法
  • (十六)一篇文章学会Java的常用API
  • (一)Thymeleaf用法——Thymeleaf简介
  • (转)关于pipe()的详细解析
  • (转)微软牛津计划介绍——屌爆了的自然数据处理解决方案(人脸/语音识别,计算机视觉与语言理解)...
  • .net core 实现redis分片_基于 Redis 的分布式任务调度框架 earth-frost
  • .NET MVC 验证码
  • .Net Web项目创建比较不错的参考文章
  • .NET 材料检测系统崩溃分析
  • .NET/C# 使用 #if 和 Conditional 特性来按条件编译代码的不同原理和适用场景
  • .NET版Word处理控件Aspose.words功能演示:在ASP.NET MVC中创建MS Word编辑器
  • .NET简谈设计模式之(单件模式)
  • .NET开源全面方便的第三方登录组件集合 - MrHuo.OAuth
  • .net中生成excel后调整宽度
  • /bin/rm: 参数列表过长"的解决办法