31. Ajax

简介
  • AJAX 是 Asynchronous JavaScript And XML 的简称。直译为,异步的JS和XML。
  • AJAX的实际意义是,不发生页面跳转、异步载入内容并改写页面内容的技术。
  • AJAX也可以简单的理解为通过JS向服务器发送请求。

AJAX这门技术很早就被发明,但是直到2005年被谷歌的大量使用,才在市场中流行起来,可以说Google为AJAX的推广起到到推波助澜的作用。

  • 同步处理:
    • AJAX出现之前,我们访问互联网时一般都是同步请求,也就是当我们通过一个页面向服务器发送一个请求时,在服务器响应结束之前,我们的整个页面是不能操作的,也就是直观上来看他是卡主不动的。
    • 这就带来了非常糟糕的用户体验。首先,同步请求时,用户只能等待服务器的响应,而不能做任何操作。其次,如果请求时间过长可能会给用户一个卡死的感觉。最后,同步请求的最大缺点就是即使整个页面中只有一小部分内容发生改变我们也要刷新整个页面。
  • 异步处理:
    • 而异步处理指的是我们在浏览网页的同时,通过AJAX向服务器发送请求,发送请求的过程中我们浏览网页的行为并不会收到任何影响,甚至主观上感知不到在向服务器发送请求。当服务器正常响应请求后,响应信息会直接发送到AJAX中,AJAX可以根据服务器响应的内容做一些操作。
    • 使用AJAX的异步请求基本上完美的解决了同步请求带来的问题。首先,发送请求时不会影响到用户的正常访问。其次,即使请求时间过长,用户不会有任何感知。最后,AJAX可以根据服务器的响应信息局部的修改页面,而不需要整个页面刷新。
请求对象

向服务器发送请求,毫无疑问需要使用Http协议,也就是我们需要通过JS来向服务器发送一个请求报文。这里我们来回顾一下请求报文的格式:
在这里插入图片描述

这是一个请求报文的格式,那我们如果手动的创建这么一个报文格式来发送给服务器想必是非常麻烦呢,于是浏览器为我们提供了一个XMLHttpRequest对象。

XMLHttpRequest
  • XMLHttpRequest对象是AJAX中非常重要的对象,所有的AJAX操作都是基于该对象的。
  • XMLHttpRequest对象用来封装请求报文,我们向服务器发送的请求信息全部都需要封装到该对象中。
  • 这里需要稍微注意一下,XMLHttpRequest对象并没有成为标准,但是现在的主流浏览器都支持该对象,而一些如IE6的老版本浏览器中的创建方式有一些区别,但是问题不大。

获取XMLHttpRequest对象:

  • 由于浏览器之间的差异,不同浏览器中获取XMLHttpRequest的方式不同,但总的来说一共有三种方式:
    • var xhr = new XMLHttpRequest()
      • 目前主流浏览器都支持
    • var xhr = new ActiveXObject(“Msxml2.XMLHTTP”)
      • IE6支持的方式
    • var xhr = new ActiveXObject(“Microsoft.XMLHTTP”)
      • IE5.5一下支持的方式

根据三种不同的方式编写通用方法来获取XMLHttpRequest对象:

//获取XMLHttpRequest的通用方法
function getXMLHttpRequest(){var xhr;try{//大部分浏览器都支持xhr = new XMLHttpRequest();}catch(e){try{//如果不支持,在这里捕获异常并且采用IE6支持的方式xhr = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){//如果还不支持,在这里捕获异常并采用IE5支持的方式xhr = new ActiveXObject("Microsoft.XMLHTTP");}}return xhr;
}

XMLHttpRequest对象的方法:

  • open(method,url,async)
    • open()用于设置请求的基本信息,接收三个参数。
      1. method
        • 请求的方法:get或post
        • 接收一个字符串
      2. url
        • 请求的地址,接收一个字符串
      3. Assync
        • 发送的请求是否为异步请求,接收一个布尔值。
        • true 是异步请求
  • send(string)
    • send()用于将请求发送给服务器,可以接收一个参数
      1. string参数
        • 该参数只在发送post请求时需要。
        • string参数用于设置请求体
  • setRequestHeader(header,value)
    • 用于设置请求头
      1. header参数
        • 字符串类型,要设置的请求头的名字
      2. value参数
        • 字符串类型,要设置的请求头的值
  • XMLHttpRequest对象的属性:
    • readyState
      • 描述XMLHttpRequest的状态
      • 一共有五种状态分别对应了五个数字:
        0 :请求尚未初始化,open()尚未被调用
        1 :服务器连接已建立,send()尚未被调用
        2 :请求已接收,服务器尚未响应
        3 :请求已处理,正在接收服务器发送的响应
        4 :请求已处理完毕,且响应已就绪。
    • status
      • 请求的响应码
        • 200 响应成功
        • 404 页面为找到
        • 500 服务器内部错误

XMLHttpRequest对象的属性:

  • readyState
    • 描述XMLHttpRequest的状态
    • 一共有五种状态分别对应了五个数字:
      0 :请求尚未初始化,open()尚未被调用
      1 :服务器连接已建立,send()尚未被调用
      2 :请求已接收,服务器尚未响应
      3 :请求已处理,正在接收服务器发送的响应
      4 :请求已处理完毕,且响应已就绪。
  • status
    • 请求的响应码
      200 响应成功
      404 页面为找到
      500 服务器内部错误
  • onreadystatechange
    - 该属性需要指向一个函数
    - 该函数会在readyState属性发生改变时被调用
  • responseText
    - 获得字符串形式的响应数据。
  • responseXML(用的比较少)
    • 获得 XML 形式的响应数据。
示例代码

使用AJAX发送GET请求

var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("get","AjaxServlet?&t="+Math.random(),true);
//发送请求
xhr.send();
//监听请求状态
xhr.onreadystatechange = function(){
//当响应完成if(xhr.readyState == 4){//且状态码为200时if(xhr.status == 200){//接收响应信息(文本形式)var text = xhr.responseText;//弹出消息alert(text);}};
}

这是一个最简单的AJAX代码,向AjaxServlet发送了一个get请求,并且在页面中输出响应的内容.

使用AJAX发送POST请求

//获取xhr对象
var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("post","2.jsp",true);
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
xhr.send("hello=123456");
//监听请求状态
xhr.onreadystatechange = function(){
//当响应完成
if(xhr.readyState == 4){//且状态码为200时if(xhr.status == 200){//接收响应信息(文本形式)var text = xhr.responseText;//弹出消息alert(text);}
}

JSON

  • 上边两个示例返回都是一个字符串,那当我们需要返回一个复杂的数据时,比如说需要返回一个对象时,就需要定义一下数据的格式。
  • AJAX一开始使用的时XML的数据格式,XML的数据格式非常简单清晰,容易编写,但是由于XML中包含了过多的标签,以及十分复杂的结构,解析起来也相对复杂,所以目前来讲,AJAX中已经几乎不使用XML来发送数据了。取而代之的是一项新的技术JSON。
  • JSON是JavaScript Object Notation 的缩写,是JS提供的一种数据交换格式。
  • JSON对象本质上就是一个JS对象,但是这个对象比较特殊,它可以直接转换为字符串,在不同语言中进行传递,通过工具又可以转换为其他语言中的对象。

例,有如下一个JSON对象:

  • {“name”:”sunwukong” , ”age”:18 , ”address”:”beijing” }
  • 这个对象中有三个属性name、age和address
  • 如果将该对象使用单引号引起了,那么他就变成了一个字符串
  • ‘{“name”:”sunwukong” , ”age”:18 , ”address”:”beijing” }’
  • 变成字符串后有一个好处,就是可以在不同语言之间传递。
    比如,将JSON作为一个字符串发送给Servlet,在Java中就可以把JSON字符串转换为一个Java对象。

JSON通过6种数据类型来表示:

  • 字符串
    - 例子:”字符串”
    - 注意:不能使用单引号
  • 数字:
    - 例子:4
  • 布尔值:
    - 例子:true、false
  • null值:
    - 例子:null
  • 对象
    - 例子:{“name”:”sunwukong”, ”age”:18}
  • 数组
    - 例子:[1,”str”,true]

在JS中操作JSON

  • 创建JSON对象
    • var json = {“name1”:”value1”,”name2”:”value2” , “name3”:[1,”str”,true]};
    • var json = [{“name1”:”value1”},{“name2”:”value2”}];
  • JSON对象转换为JSON字符串
    • stringify(JSON对象)
  • JSON字符串转换为JSON对象
    • parse(JSON字符串)

在Java中操作JSON

  • 在Java中可以从文件中读取JSON字符串,也可以是客户端发送的JSON字符串,所以第一个问题,我们先来看如何将一个JSON字符串转换成一个Java对象。
  • 首先解析JSON字符串我们需要导入第三方的工具,目前主流的解析JSON的工具大概有三种json-lib、jackson、gson。三种解析工具相比较json-lib的使用复杂,且效率较差。而Jackson和gson解析效率较高。
  • Gson是Google公司出品的解析JSON工具,使用简单,解析性能好。
jquery中的ajax
$.get()

jquery中发送get请求的方法
方法签名:
$.get(url, [data], [callback], [type]) []表示参数可选
参数解析:

  • url:发送的请求地址
  • data:待发送 Key/value 参数。
  • callback:请求成功时回调函数。
  • type:返回内容格式,xml, html, script, json, text, _default。

发送示例:

$.get("user?method=login",{username:"lll",password:"lll"},function(data){alert(data.errCode);
},"json");
$.post()

jquery中发送post请求的方法。
方法签名:
$.post(url, [data], [callback], [type]) []表示可选参数
参数解析:

  • url:发送请求地址。
  • data:待发送 Key/value 参数。
  • callback:发送成功时回调函数。
  • type:返回内容格式,xml, html, script, json, text, _default。

发送示例:

$.post("user?method=login",{username:"lll",password:"lll"},function(data){alert(data.errCode);
},"json");
$.getJSON()

jquery中返回json数据的get请求
方法签名:
$.getJSON(url, [data], [callback]) []表示可选参数
参数解析:

  • url:发送请求地址。
  • data:待发送 Key/value 参数。
  • callback:载入成功时回调函数。

发送示例:

$.getJSON("user?method=login",{username:"lll",password:"lll"},function(data){alert(data.errCode);}
$.ajax()

jquery中底层的ajax请求方法,可以设置详细的参数

方法签名:
$.ajax(url,[settings]) []表示可选参数
参数解析:

  • url:发送请求地址。
  • settings:其他详细设置。可设置项参加jquery文档

发送示例:

$.ajax({type: "POST",url: "some.php",data: "name=John&location=Boston",success: function(msg){alert( "Data Saved: " + msg );};error:function(){alert(“请求失败”)}
})
参数详解

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

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

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

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

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

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

7.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:返回纯文本字符串。

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

            function(XMLHttpRequest){this;   //调用本次ajax请求时传递的options参数}

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

          function(XMLHttpRequest, textStatus){this;    //调用本次ajax请求时传递的options参数}

10.success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。

        function(data, textStatus){//data可能是xmlDoc、jsonObj、html、text等等this;  //调用本次ajax请求时传递的options参数}

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

       function(XMLHttpRequest, textStatus, errorThrown){//通常情况下textStatus和errorThrown只有其中一个包含信息this;   //调用本次ajax请求时传递的options参数}

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

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

            function(data, type){//返回处理后的数据return data;}

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

            function(data, type){//返回处理后的数据return data;}

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

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

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

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

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端框架前置学习(4) AJAX

同步代码和异步代码 同步代码 浏览器按照我们书写代码的顺序一行一行地执行程序.浏览器会等待代码的解析和工作,在上一行代码完成之后才会执行下一行代码.这被称之为同步程序 逐行执行,需要原地等待结果 异步代码 异步编码技术使得程序可以在执行一个可能长期运行的任务的…

助力打造清洁环境,基于轻量级YOLOv8开发构建公共场景下垃圾堆放垃圾桶溢出检测识别系统

公共社区环境生活垃圾基本上是我们每个人每天几乎都无法避免的一个问题,公共环境下垃圾投放点都会有固定的值班时间,但是考虑到实际扔垃圾的无规律性,往往会出现在无人值守的时段内垃圾堆放垃圾桶溢出等问题,有些容易扩散的垃圾比…

将elementUI,NaiveUI的progress环形进度条设置为渐变色

需求 :进度条要有一个渐变效果。效果图: NaiveUI和elementUI的官方progress组件都是只能设置一种颜色,不符合需求所以改一下。 其实NaiveUI和elementUI设置进度条的实现方式基本一样都是使用svg渲染出两个path,第一个是底色&…

<meta name=“Keywords“ content=““ >、<meta name=“Description“ content=““ > 等用法解释

今天在看网站代码&#xff0c;发现类似<meta name"Keywords" content"" >、<meta name"Description" content"" >这样的写法&#xff0c;不知道具体代表什么意思&#xff0c;于是上网搜了一下&#xff0c;下面是在网上找到…

Python电能质量扰动信号分类(三)基于Transformer的一维信号分类模型

目录 引言 1 数据集制作与加载 1.1 导入数据 1.2 制作数据集 2 Transformer分类模型和超参数选取 2.1 定义Transformer分类模型 2.2 定义模型参数 3 Transformer模型训练与评估 3.1 模型训练 3.2 模型评估 代码、数据如下&#xff1a; 往期精彩内容&#xff1a; 电…

[内功修炼]函数栈帧的创建与销毁

文章目录 1:什么是函数栈帧2:理解函数栈帧能解决什么问题呢3:函数栈帧的创建与销毁的解析3.1:什么是栈3.2:认识相关寄存器与汇编指令相关寄存器相关汇编指令 3.3 解析函数栈帧的创建和销毁3.3.1 预备知识3.3.2 详细解析一:调用main函数,为main函数开辟函数栈帧First:push前push…

RK3588平台开发系列讲解(AI 篇)RKNN-Toolkit2 模型的加载转换

文章目录 一、Caffe 模型加载接口二、TensorFlow 模型加载接口三、TensorFlowLite 模型加载接口四、ONNX 模型加载五、DarkNet 模型加载接口六、PyTorch 模型加载接口沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 RKNN-Toolkit2 目前支持 Caffe、TensorFlow、Tensor…

MySQL报错:1054 - Unknown column ‘xx‘ in ‘field list的解决方法

我在操作MySQL遇到1054报错&#xff0c;报错内容&#xff1a;1054 - Unknown column Cindy in field list&#xff0c;下面演示解决方法&#xff0c;非常简单。 根据箭头指示&#xff0c;Cindy对应的应该是VARCHAR文本数字类型&#xff0c;字符串要用引号&#xff0c;所以解决方…

web架构师编辑器内容-HTML2Canvas 截图的原理

HTML2Canvas 截图的原理 目的&#xff1a;一个canvas元素&#xff0c;上面有绘制一系列的HTML节点 局限&#xff1a;canvas中没法添加具体的Html节点&#xff0c;它只是一张画布 通过canvas.getContext(‘2d’)可以拿到canvas提供的2D渲染上下文&#xff0c;然后在里面绘制形…

使用tesla gpu 加速大模型,ffmpeg,unity 和 UE等二三维应用

我们知道tesla gpu 没有显示器接口&#xff0c;那么在windows中怎么使用加速unity ue这种三维编辑器呢&#xff0c;答案就是改变注册表来加速相应的三维渲染程序. 1 tesla gpu p40 p100 加速 在windows中使用regedit 来改变 核显配置&#xff0c; 让p100 p40 等等显卡通过核显…

【动态规划】11简单多状态 dp 问题_按摩师_C++(easy)

题目链接&#xff1a;leetcode按摩师 目录 题目解析&#xff1a; 算法原理 1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 5.返回值 编写代码 题目解析&#xff1a; 题目让我们求按摩师找到最优的预约集合&#xff08;总预约时间最长&#xff09; 由题可得&#xff…

一体机定制_工控触控一体机安卓主板方案

工控一体机是一种集成化的硬件方案&#xff0c;采用了联发科MT8768八核芯片和12nm制程工艺。该芯片拥有2.0GHz的主频和IMG PowerVR GE8320图形处理GPU&#xff0c;具备强大的视频处理能力&#xff0c;并且兼容大部分的视频格式和解码能力。工控一体机搭载了Android 9.0操作系统…

合并的单元格如何填充连续的序号

希望你以后碰到合并的单元格&#xff0c;不在一个个输入序号&#xff0c;用以下操作帮你输入连续的序号。 一、操作过程如下 1.有一个基准的单元格在同一列&#xff0c;而且这个基准单元格必须得是序号为1的单元格的上面的一个单元格&#xff0c;这样的话后面才能自动递增&am…

单聊和群聊

TCP协议单聊 服务端&#xff1a; import java.awt.BorderLayout; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; import java.util.Vec…

使用ArcMap进行实测数据处理

文章目录 题目流程 题目 实验名称&#xff1a;实测数据处理 实验目的及要求&#xff1a; 1. 掌握实测点数据转为矢量点数据方法 2. 掌握数据投影变换方法 3. 掌握点数据插值方法 流程 1&#xff0c;打开ArcMap软件&#xff0c;在左菜单栏上选中File&#xff0c;然后鼠标移…

我在代码随想录|写代码|简单题理解KMP算法

本篇提纲 什么是KMPKMP有什么用什么是前缀表为什么一定要用前缀表如何计算前缀表前缀表与next数组使用next数组来匹配时间复杂度分析构造next数组使用next数组来做匹配前缀表统一减一 C代码实现前缀表&#xff08;不减一&#xff09;C实现总结 什么是KMP? 说到KMP&#xf…

HTTP前端请求

目录 HTTP 请求1.请求组成2.请求方式与数据格式get 请求示例post 请求示例json 请求示例multipart 请求示例数据格式小结 3.表单3.1.作用与语法3.2.常见的表单项 4.session 原理5.jwt 原理 HTTP 请求 1.请求组成 请求由三部分组成 请求行请求头请求体 可以用 telnet 程序测…

《我在北京送快递》平凡隽永的时刻,对人生更具意义

《我在北京送快递》平凡隽永的时刻&#xff0c;对人生更具意义 胡安焉 文章目录 《我在北京送快递》平凡隽永的时刻&#xff0c;对人生更具意义[toc]摘录感悟 摘录 转“没有期限的承诺无疑就是委婉的拒绝” 转书友&#xff1a;亨利福特说&#xff0c;我聘的是一双手&#xff0…

Codeforces Round 917 (Div. 2)

Codeforces Round 917 (Div. 2) Codeforces Round 917 (Div. 2) A. Least Product 题意&#xff1a; 给出整数数组a&#xff0c;现在可以执行任意次数以下操作&#xff1a;任意选择数组a的一个元素 a i a_i ai​&#xff0c;若 a i a_i ai​>0可以任意替换为[0, a i a_i…

U盘加密软件哪个好用(三款优秀的U盘加密软件推荐)

随着移动存储设备的普及&#xff0c;U盘已成为我们工作和生活中不可或缺的存储工具。然而&#xff0c;U盘丢失或被盗的风险也随之增加&#xff0c;如何保护U盘中的敏感数据成为了重要的问题。 此时&#xff0c;U盘加密软件成为了解决这一问题的有效手段。 那么&#xff0c;哪个…