前端 AJAX 二、AJAX使用

环境准备:

使用AJAX技术我们需要用到HTML/CSS/JS/jQuery/JavaWeb相关知识,原生的JS也可以进行AJAX的操作,但是相对比较繁琐也没有必要,故此我们使用jQuery封装后的AJAX技术来进行学习;

创建AJAX请求

$.ajax({
    url : "ajax/getName?id="+id,// ajax请求的url地址
    type : "get",// 提交的方法
    success : function(data) { // ajax请求回调后执行的方法,data表示从服务器返回的数据 
        alert(data);
    }
});

以上代码表示的意思为:

使用get方法向ajax/getName的URL提交id数据,并且在服务器返回后弹出服务器返回内容

AJAX参数说明:

  • url:

要求为String类型的参数,(默认为当前页地址)发送请求的地址。

  • type:

要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。

  • timeout:

要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。

  • async:

要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。

  • cache:

要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。

  • data:

要求为Object或String类型的参数,服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看  processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

  • dataType: 服务端返回的数据类型

要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:

xml:返回XML文档,可用JQuery处理。

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

script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。

json:返回JSON数据。

jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。

text:返回纯文本字符串。

  • beforeSend:

要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

            function(XMLHttpRequest){

               this;   //调用本次ajax请求时传递的options参数

            }

  • complete:

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

          function(XMLHttpRequest, textStatus){

             this;    //调用本次ajax请求时传递的options参数

          }

  • success

要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。

         (1)由服务器返回,并根据dataType参数进行处理后的数据。

         (2)描述状态的字符串。

         function(data, textStatus){

            //data可能是xmlDoc、jsonObj、html、text等等

            this;  //调用本次ajax请求时传递的options参数

         }

  • error:

要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:

       function(XMLHttpRequest, textStatus, errorThrown){

          //通常情况下textStatus和errorThrown只有其中一个包含信息

          this;   //调用本次ajax请求时传递的options参数

       }

  • contentType

要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded","json"。该默认值适合大多数应用场合。

  • dataFilter:

要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

            function(data, type){

                //返回处理后的数据

                return data;

            }

  • global:

要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。

  • ifModified:

要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。

  • jsonp:

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

  • username:

要求为String类型的参数,用于响应HTTP访问认证请求的用户名。

  • password:

要求为String类型的参数,用于响应HTTP访问认证请求的密码。

  • processData:

要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。

  • scriptCharset:

要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/978032.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于STM32的智能垃圾分类与回收系统

1. 引言 传统垃圾处理方式存在分类效率低、资源浪费严重等问题,难以满足城市可持续发展的需求。本文设计了一款基于STM32的智能垃圾分类与回收系统,通过视觉识别、多传感器融合与自动化分拣技术,实现垃圾精准分类、压缩存储与资源回收&#…

C++:dfs,bfs各两则

1.木棒 167. 木棒 - AcWing题库 乔治拿来一组等长的木棒,将它们随机地砍断,使得每一节木棍的长度都不超过 5050 个长度单位。 然后他又想把这些木棍恢复到为裁截前的状态,但忘记了初始时有多少木棒以及木棒的初始长度。 请你设计一个程序…

Web端——超级马里奥【简化版】

1.介绍 这是一个简单的受超级马里奥启发的平台游戏演示!这个基于网络的游戏包括: 角色移动:使用箭头键让马里奥向左和向右移动,空格键或向上箭头键跳跃。跳跃平台:游戏中有多个可以跳跃的平台,包括经典的…

PEFT介绍及其源码解析

PEFT库介绍 PEFT(Parameter-Efficient Fine-Tuning,参数高效微调)是由 Hugging Face 开源的一个高效微调库,旨在通过少量可训练参数实现对大型预训练模型的快速适应,从而显著降低计算和存储成本。 核心功能与优势 多…

osgEarth安装总结

第一步:安装OSG 直接通过git下载源码,使用cmake进行编译, git clone --depth 1 https://github.com/openscenegraph/OpenSceneGraph.git mkdir build cd build cmake .. make sudo make isntall编译过程中缺什么库,就安装什么库 …

实体机器人在gazebo中的映射

这一部分目的是将真实的机器人映射到gazebo中,使得gazebo中的其他虚拟机器人能识别到真实世界的wheeltec机器人。 真实机器人的型号的wheeltec旗下的mini_mec。 一、在wheeltec官方百度云文档中找到URDF原始导出功能包.zip 找到对应的包 拷贝到工作空间下 在原有…

8、HTTP/1.0和HTTP/1.1的区别【高频】

第一个是 长连接: HTTP/1.0 默认 短连接,(它也可以指定 Connection 首部字段的值为 Keep-Alive实现 长连接)而HTTP/1.1 默认支持 长连接,HTTP/1.1是基于 TCP/IP协议的,创建一个TCP连接是需要经过三次握手的…

kafka-leader -1问题解决

一. 问题: 在 Kafka 中,leader -1 通常表示分区的领导者副本尚未被选举出来,或者在获取领导者信息时出现了问题。以下是可能导致出现 kafka leader -1 的一些常见原因及相关分析: 1. 副本同步问题: 在 Kafka 集群中&…

stm32hal库寻迹+蓝牙智能车(STM32F103C8T6)

简介: 这个小车的芯片是STM32F103C8T6,其他的芯片也可以照猫画虎,基本配置差不多,要注意的就是,管脚复用,管脚的特殊功能,(这点不用担心,hal库每个管脚的功能都会给你罗列,很方便的.)由于我做的比较简单,只是用到了几个简单外设.主要是由带霍尔编码器电机的车模,电机…

使用DeepSeek/ChatGPT等AI工具辅助编写wireshark过滤器

随着deepseek,chatgpt等大模型的能力越来越强大,本文将介绍借助deepseek,chatgpt等大模型工具,通过编写提示词,辅助生成全面的Wireshark显示过滤器的能力。 每一种协议的字段众多,流量分析的需求多种多样,…

飞鱼科技游戏策划岗内推

协助策划完成相关工作,包括但不仅限于策划配置,资料搜集,游戏体验; 游戏策划相关作品;游戏大赛经历;游戏demo制作经历;游戏公司策划岗位实习经历优先 内推码 DSZP7YFU

解决中文乱码:字符编码全攻略 - ASCII、Unicode、UTF-8、GB2312详解

🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编…

Mesh自组网技术及应用

前言: Mesh自组网随着无线技术发展,在消费领域最近比较有热度。当然应用的场景不限于普通消费领域,在工业、军事领域被也是越来越重要。 一、什么是无线Mesh技术 1.1 无线自组网概念 无线Mesh是一种智能、自组织、多跳、移动、对等、去中心…

滑动验证组件-微信小程序

微信小程序-滑动验证组件&#xff0c;直接引用就可以了&#xff0c;效果如下&#xff1a; 组件参数&#xff1a; 1.enable-close&#xff1a;是否允许关闭&#xff0c;默认true 2.bind:onsuccess&#xff1a;验证后回调方法 引用方式&#xff1a; <verification wx:if&qu…

11.Docker 之分布式仓库 Harbor

Docker 之分布式仓库 Harbor Docker 之分布式仓库 Harbor1. Harbor 组成2. 安装 Harbor Docker 之分布式仓库 Harbor Harbor 是一个用于存储和分发 Docker 镜像的企业级 Registry 服务器&#xff0c;由 VMware 开源&#xff0c;其通过添加一些企业必需的功能特性&#xff0c;例…

(一)趣学设计模式 之 单例模式!

目录 一、啥是单例模式&#xff1f;二、为什么要用单例模式&#xff1f;三、单例模式怎么实现&#xff1f;1. 饿汉式&#xff1a;先下手为强&#xff01; &#x1f608;2. 懒汉式&#xff1a;用的时候再创建&#xff01; &#x1f634;3. 枚举&#xff1a;最简单最安全的单例&a…

Chrome 浏览器(版本号49之后)‌解决跨域问题

谷歌浏览器解决跨域问题 如何查看 Chrome 浏览器版本号 打开 Chrome 浏览器点击右上角的三个点&#xff0c;打开“设置”页面 点击“关于Chrome” 查看版本号 解决跨域操作&#xff1a;windows系统为例 方法一&#xff1a;命令行启动方式&#xff08;最简单&#xff09; …

python中的JSON数据格式

文章目录 什么是json主要功能Python数据和Json数据的相互转化 什么是json JSON是一种轻量级的数据交互格式。可以按照JSON指定的格式去组织和封装数据。JSON本质上是一个带有特定格式的字符串。 主要功能 json就是一种在各个编程语言中流通的数据格式&#xff0c;负责不同编…

汽车智能制造企业数字化转型SAP解决方案总结

一、项目实施概述 项目阶段划分&#xff1a; 蓝图设计阶段主数据管理方案各模块蓝图设计方案下一阶段工作计划 关键里程碑&#xff1a; 2022年6月6日&#xff1a;项目启动会2022年12月1日&#xff1a;系统上线 二、总体目标 通过SAP实施&#xff0c;构建研产供销协同、业财一…

JavaWeb-在idea中配置Servlet项目

文章目录 在idea中进行Servlet项目的配置(较新的idea版本)创建一个空的JavaSE项目(Project)创建一个普通的JavaSE板块(module)添加Web项目的配置定义一个对象模拟实现接口在web.xml中配置路径映射配置项目到Tomcat服务器启动Tomcat服务器进行测试 在idea中进行Servlet项目的配置…