jacascript AJAX 学习

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

　　AJAX 是 asynchronous javascript and XML 的简写，就是异步的 javascript 和 XML。这一技术能够向服务器请求额外的数据而无须刷新整个页面，会带来更好的用户体验。虽然名字中包含 XML，但是 ajax 通信与数据格式无关；

 

创建对象

　　因为 XMLHTTPRequest() 是一个构造函数，所以需要实例化一个 XMLHttpRequset 对象。下面是创建XHR对象的兼容写法；

　　如果要建立多个不同的请求，就要实例化多个不同的 XMLHttpRequset 对象；

        <script type="text/javascript">var xhr;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject('Microsoft.XMLHTTP');}</script>

 

发送请求

　　要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法。

open()

　　open() 方法需要三个参数：

　　　　　　　xhr.open("GET","test.json",true);

　　第一个参数定义发送请求所使用的方法（"GET" 还是 "POST"），不区分大小写，但通常使用大写字母，记得带引号。

　　"GET" 用于常规请求，它适用于当 URL 完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下。

　　然而，在以下情况中，请使用 "POST" 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（"POST" 没有数据量限制）
  • 发送包含未知字符的用户输入时，"POST" 比 "GET"更稳定也更可靠

　　第二个参数规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

　　第三个参数规定是否异步发送请求的布尔值，如果不填写，默认为 true，表示异步发送。如果接受的是同步响应，则需要将 open()方法的第三个参数设置为 false，那么 send()方法将阻塞直到请求完成。客户端 javascript 是单线程的，当 send() 方法阻塞时，它通常会导致整个浏览器界面冻结。如果连接的服务器响应慢，那么用户的浏览器将冻结，所以应该避免使用同步。

send()

　　send() 方法接收一个参数，即要作为请求主体发送的数据。调用 send() 方法后，请求被分派到服务器。

　　如果是 "GET" 方法，send() 方法无参数，或参数为 null；如果是 "POST" 方法，send() 方法的参数为要发送的数据。

            xhr.open("GET","test.json",false);xhr.send(null);

GET

　　"GET" 用于常规请求，它适用于当 URL 完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下。

　　【数据发送】

　　使用 "GET" 方式发送请求时，数据被追加到 open() 方法中 URL 的末尾，可以直接看到，存在安全隐患。

　　数据以问号开始，名和值之间用等号链接，名值对之间用和号(&)分隔。使用 "GET" 方式发送的数据常常被称为查询字符串。

　　【编码】

　　由于 URL无法识别特殊字符，所以如果数据中包含特殊字符(如中文)，则需要进行编码，编码的方式有很多种，其中 encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法主要对 ;/?:@&=+$,# 等这些用于分隔URI组件的字符以及中文进行编码。由于此方法对 :/ 都进行了编码，所以不能用它来对网址进行编码，而适合对 URI 中的参数进行编码

　　在 "GET" 请求中，为了避免缓存的影响，可以向 URL 末尾添加一个随机数或时间戳。

    <script>var url = 'test.php' +'?name=' + encodeURIComponent("你好");xhr.open('GET',url+'&'+Number(new Date()),true);xhr.send(null);</script>

POST

　　"POST" 请求通常用于向服务器发送应该被保存的数据。"POST" 方法常用于 HTML 表单。它在请求主体中包含额外数据且这些数据常存储到服务器上的数据库中。

　　在 open() 方法第一个参数的位置传入"POST"，就可以初始化一个 "POST" 请求。

　　【设置请求头】

　　默认情况下，服务器对 "POST" 请求和提交表单的请求并不会一视同仁。因此，服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。不过，可以使用 XHR 来模仿表单提交：首先将 content-Type 头部信息设置为 application/x-www-form-urlencoded，也就是表单提交时的内容类型；

　　使用 setRequestHeader() 方法可以设置自定义的请求头部信息。这个方法接受两个参数：头部字段的名称头部字段的值。要成功发送请求头部信息，必须在调用 open()方法之后且调用 send() 方法之前调用 setRequestHeader() 方法 。

　　在项目中，又是需要验证用户登录，可以设置请求头验证。机制就是：在用户首次登录成功之后，服务器发送token到客户端，客户端存入cookie。用户做任何请求操作时，在 ajax的请求头里带上 token，用以 server-end 做登录状态验证。

　　【发送主体】

　　发送 "POST" 请求的第三步就是向 send() 方法中传入某些数据，这一点和 "GET" 请求不一样。由于 XHR 最初的设计主要是为了处理 XML，因此可以在此传入 XML DOM 文档，传入的文档经序列化之后将作为请求主体被提交到服务器。当然，也可以在此传入任何想发送到服务器的字符串。

　　接下来要以适当的格式创建一个字符串，并使用 send() 方法发送。

　　"POST" 数据的格式与 "GET" 数据的格式相同，名和值之间用等号链接，名值对之间用和号(&)分隔。

　　【编码】

　　由于使用 "POST" 方式传递数据时，需要设置请求头 "content-type"，这一步骤已经能够自动对特殊字符(如中文)进行编码，所以就不再需要使用 encodeURIComponent() 方法了。

　　"POST" 请求主要用于数据提交，相同 URL 的重复 "POST" 请求从服务器得到的响应可能不同，所以不应该缓存使用 "POST" 方法的请求。

　　"GET" 对所发送信息的数量有限制，一般在2000个字符。与 "GET" 请求相比，"POST" 请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计，"GET" 请求的速度最多可"POST"请求的两倍。

    <script>xhr.open('POST',url,true);//设置请求头
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//拼接数据var strData = 'name="abc"&num=123';//发送请求
        xhr.send(strData);</script>

 

接收响应

　　一个完整的 HTTP 响应由状态码、响应头集合和响应主体组成。

　　在收到响应后，这些都可以通过 XMLHttpRequset 对象的属性和方法使用，主要有以下4个属性：

responseText作为响应主体被返回的文本（文本格式）
responseXML如果响应的内容类型是 "text/xml" 或 "application/xml"，这个属性中将保存着响应数据的 XML DOM 文档（document 格式）
statusHTTP状态码（数字形式）
statusTextHTTP状态说明（文本格式）

 

　　在接收到响应后，第一步是检查 status 属性，以确定响应已经成功返回。一般来说，可以将 HTTP 状态码为 200 作为响应成功的标志。此时，responseText 属性的内容已经就绪，而且在内容类型正确的情况下，responseXML 也可以访问了。此外，状态码为 304 表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的。

　　无论内容类型是什么，响应主体的内容都会保存到 responseText 属性中，而对于非 XML 数据而言，responseXML 属性的值将为 null；

            if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){alert(xhr.responseText);}else{alert('请求失败，响应代码为：' + xhr.status);}

 

异步响应和同步响应

　　如果不设置 open() 方法的第三个参数（默认为true，即异步响应）。

　　如果接收的是异步响应，这就需要检测 XMLHttpRequset 对象的 readyState 属性，该属性表示 请求/响应 过程的当前活动阶段。这个属性可取的值如下：

0（UNSENT）未初始化还没调用open()
1（OPEND）启动已经调用open() ，但还没调用 send()
2（HEADERS_RECEIVED）发送己经调用 send() 方法，且接收到头信息。
3（LOADING）正在接收已经接收到部分响应主体信息。
4（DONE）完成已经接收到全部响应数据，而且已经可以在客户端使用了。

 

　　理论上，只要 readyState 属性值由一个值变成另一个值，都会触发一次 readystatechange 事件。可以利用这个事件来检测每次状态变化后 readyState 的值。通常，我们对readyState 值为4的阶段感兴趣，因为这时所有数据都已就绪。

　　必须在调用 open() 之前指定 onreadystatechange 事件处理程序才能确保跨浏览器兼容性，否则将无法接收 readyState 属性为0和1的情况 。

            xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status == 200){alert(xhr.responseText);}}}

　　如果将 open() 方法的第三个参数设置为 false，接收的就是同步响应，那么 send() 方法将阻塞直到请求完成。一旦 send() 返回，仅需要检查 XHR对象的 status 和responseText 属性即可。

　　应该避免使用同步请求。客户端 javascript 是单线程的，当 send() 方法阻塞时，它通常会导致整个浏览器 UI 冻结。如果连接的服务器响应慢，那么用户的浏览器将冻结，用户体验非常不好。

 

进度事件

　　一般地，使用 readystatechange 事件探测 HTTP 请求的完成。XHR2 规范草案定义了进度事件 Progress Events 规范，XMLHttpRequest 对象在请求的不同阶段触发不同类型的事件，所以它不再需要检査 readyState 属性。

　　有以下6个进度事件：

  1. loadstart: 在接收到响应数据的第一个字节时触发
  2. progress: 在接收响应期间持续不断地触
  3. error: 在请求发生错误时触发
  4. abort: 在因为调用abort()方法而终止连接时触发
  5. load: 在接收到完整的响应数据时触发
  6. loadend: 在通信完成或者触发error、abort或load事件后触发
  7. timeout: 超时发生时触发

　　每个请求都从触发 loadstart 事件开始，接下来，通常每隔50毫秒左右触发一次 progress 事件，然后触发 load、error、abort 或 timeout 事件中的一个，最后以触发 loadend 事件结束

　　对于任何具体请求，浏览器将只会触发 load、abort、timeout 和 error 事件中的一个。XHR2规范草案指出一旦这些事件中的一个发生后，浏览器应该触发 loadend 事件。

load

　　响应接收完毕后将触发 load 事件，因此也就没有必要去检查 readyState 属性了。但一个完成的请求不一定是成功的请求，例如，onload 事件的处理程序应该检查 XMLHttpRequest 对象的 status 状态码来确定收到的是“200 OK”而不是“404 Not Found”的HTTP响应

progress

　　progress 事件会在浏览器接收新数据期间周期性地触发。而 onprogress 事件处理程序会接收到一个 event 对象，其 target 属性是 XHR 对象，但包含着三个额外的属性：lengthComputable、loaded 和t otal。其中，lengthComputable 是一个表示进度信息是否可用的布尔值，loaded 表示已经接收的字节数，total 表示根据 Content-Length 响应头部确定的预期字节数。有了这些信息，就可以为用户创建一个进度指示器了。

上传进度upload

　　除了为监控 HTTP 响应的加载定义的这些有用的事件外，XHR2 也给出了用于监控 HTTP 请求上传的事件。在实现这些特性的浏览器中，XMLHttpRequest 对象将有 upload 属性。upload 属性值是一个对象，它定义了 addEventListener() 方法和整个 progress 事件集合，比如 onprogress 和 onload。但 upload 对象没有定义 onreadystatechange 属性，upload  仅能触发新的事件类型。

    <input type="file" name="file1" id="file1" style="display:none"><button id="btn">上传文件</button><div id="pro"></div><div id="result"></div><script>btn.onclick = function(){file1.click();pro.innerHTML = result.innerHTML = ''; } file1.onchange = function(){ //创建xhr对象 var xhr = new XMLHttpRequest(); var data = file1.files[0]; //上传事件  xhr.upload.onprogress = function(e){ e = e || event; if (e.lengthComputable){ pro.innerHTML = "上传进度为：" + e.loaded + " of " + e.total + " bytes" + '；百分比为：' + e.loaded/e.total;  } } xhr.onload = function(e){ var data = xhr.responseText; e = e || event; if(xhr.status == 200){ result.innerHTML = data; } }; //发送请求  xhr.open('post','pp.php',true); xhr.setRequestHeader("content-type",data.type); xhr.send(data); } </script>

 

超时、中止、错误事件

　　HTTP 请求无法完成有3种情况。如果请求超时，会触发 timeout 事件。如果请求中止，会触发 abort 事件。最后，像太多重定向这样的网络错误会阻止请求完成，但这些情况发生时会触发 error 事件。

　　可以通过调用 XMLHttpRequest 对象的 abort() 方法来取消正在进行的 HTTP 请求。调用 abort() 的主要原因是完成取消或超时请求消耗的时间太长或当响应变得无关时。

　　XHR对象的 timeout 属性等于一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。该属性默认等于0，表示没有时间限制。如果请求超时，将触发ontimeout 事件。

    <script>var xhr = new XMLHttpRequest();btn.onclick = function(){xhr.abort();}xhr.onabort = function(){ console.log("请求已终止"); } xhr.ontimeout = function(){ console.log('请求超时'); } xhr.timeout = 3000; xhr.onerror = function(){ console.log("请求报错"); } xhr.onloadend = function(){ console.log("请求结束"); } </script>

 

转载于:https://www.cnblogs.com/sspeng/p/7648620.html

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

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

相关文章

android 自定义控件 焦点,android中设置控件获得焦点

android 自定义控件 焦点,android中设置控件获得焦点

android中&#xff0c;要使控件获得焦点&#xff0c;需要先setFocus,再requestFocus。以Button为例&#xff1a;btn.setFocusable(true);btn.setFocusableInTouchMode(true);btn.requestFocus();btn.requestFocusFromTouch();//获得失去焦点的监听器btn.setOnFocusChangeListen…
阅读更多...
分享丨强化学习是针对优化数据的监督学习？

分享丨强化学习是针对优化数据的监督学习？

来源&#xff1a;AI科技大本营作者 | Ben Eysenbach、Aviral Kumar、Abhishek Gupta 编译 | 凯隐出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;强化学习&#xff08;RL&#xff09;可以从两个不同的视角来看待&#xff1a;优化和动态规划。其中&#xff0c;诸如REI…
阅读更多...
stm32l0的停止模式怎么唤醒_手把手教你怎么利用旧电脑搭建NAS组建自己的黑群晖...

stm32l0的停止模式怎么唤醒_手把手教你怎么利用旧电脑搭建NAS组建自己的黑群晖...

手把手教你怎么利用旧电脑搭建NAS组建自己的黑群晖Synology群晖科技&#xff08;Synology &#xff09;创立于 2000 年&#xff0c;自始便专注于打造高效能、可靠、功能丰富且绿色环保的 NAS 服务器&#xff0c;是全球少数几家以单纯的提供网络存储解决方案获得世界认同的华人企…
阅读更多...
pat 甲级 1034. Head of a Gang (30)

pat 甲级 1034. Head of a Gang (30)

1034. Head of a Gang (30) 时间限制100 ms内存限制65536 kB代码长度限制16000 B判题程序Standard作者CHEN, YueOne way that the police finds the head of a gang is to check peoples phone calls. If there is a phone call between A and B, we say that A and B is relat…
阅读更多...
有人说 GPT3 是“暴力美学”的结晶，它的工作原理你知道吗？| 动图详解

有人说 GPT3 是“暴力美学”的结晶，它的工作原理你知道吗？| 动图详解

来源&#xff1a;CSDN如今&#xff0c;在科技领域掀起了一股GPT3的热潮。大规模语言模型&#xff08;比如GPT3&#xff09;的潜力惊艳了我们。虽然这些模型还没有成熟到大多数企业将之直接面对消费者&#xff0c;但却展示出一些智慧的火花&#xff0c;并让人坚信其将会加速自动…
阅读更多...
android的listview多选功能,Android ListView实现单选及多选等功能示例

android的listview多选功能,Android ListView实现单选及多选等功能示例

本文实例讲述了Android ListView实现单选及多选等功能的方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;在项目中也遇到过给ListView的item添加选择功能。比如一个网购APP&#xff0c;有个历史浏览页面&#xff0c;这个页面现点击item单选/多选及全选删除功能。当…
阅读更多...
git 生成ssh key_ubuntu git生成ssh key (公钥私钥)配置github或者码云

git 生成ssh key_ubuntu git生成ssh key (公钥私钥)配置github或者码云

Git是分布式的代码管理工具&#xff0c;远程的代码管理是基于SSH的&#xff0c;所以要使用远程的Git则需要SSH的配置。github的SSH配置如下&#xff1a;设置Git的user name和email&#xff1a;git config --global user.name "xx"git config --global user.email &qu…
阅读更多...
ThinkPHP5模型操作中的自动时间戳总结

ThinkPHP5模型操作中的自动时间戳总结

ThinkPHP5中提供了非常优秀的自动时间戳功能。使用起来非常方便。 但是官网手册中的说明还是不是很详尽&#xff0c;因此整理再次&#xff0c;以方便后续使用时查阅。 一、一般情况下的自动填充create_time,update_time两个字段 对于固定的时间戳和时间日期型的字段&#xff0c…
阅读更多...
android圆形头像 demo,Android图像处理之绘制圆形头像

android圆形头像 demo,Android图像处理之绘制圆形头像

在Android中&#xff0c;绘制圆形和绘制图片都是很容易的事情&#xff0c;但是绘制圆形图片就有点难倒人了。以前为了偷懒就直接去github上找一个开源项目&#xff0c;后来才发现绘制圆形图片其实也是很简单的事。绘制圆形图片也需要两个步骤&#xff1a;绘制圆形和绘制图片&am…
阅读更多...
芯片项目烂尾怎么办？国家发改委回应了！

芯片项目烂尾怎么办？国家发改委回应了！

来源&#xff1a;北京日报客户端芯片项目烂尾的报道近日引发关注。对此&#xff0c;国家发改委新闻发言人孟玮在今日&#xff08;20日&#xff09;上午举行的例行发布会上回应&#xff0c;将会同有关部门强化顶层设计&#xff0c;狠抓产业规划布局&#xff0c;努力维护产业发展…
阅读更多...
idea中二级包为什么创建不了_IDEA通过Maven打包JavaFX工程（OpenJFX11）

idea中二级包为什么创建不了_IDEA通过Maven打包JavaFX工程（OpenJFX11）

1 概述 最近研究JFX&#xff0c;写出来了但是打包不了&#xff0c;这。。。尴尬。。。 IDEA的文档说只支持Java8打成jar包&#xff1a; 尝试过直接使用Maven插件的package&#xff0c;不行&#xff0c;也尝试过Build Artifacts&#xff0c;也不行&#xff0c;各种奇奇怪怪的问题…
阅读更多...
鸿蒙系统发布会16号几点,华为鸿蒙手机系统正式定档发布，12月16日于我们见面...

鸿蒙系统发布会16号几点,华为鸿蒙手机系统正式定档发布，12月16日于我们见面...

#华为鸿蒙系统#大家都知道&#xff0c;华为手机已经无法预装谷歌GMS服务了&#xff0c;对于大部分海外用户来说&#xff0c;GMS服务还是相当重要的&#xff0c;谷歌全家桶内置了地图、搜索、视频娱乐等功能&#xff0c;但凡是搭载了安卓系统的智能手机&#xff0c;那么就无法离…
阅读更多...
二叉树和红黑二叉树

二叉树和红黑二叉树

二叉树是树形结构的一个类型&#xff0c;由一个根节点和左子树、右子树组成。排序二叉树特性&#xff1a;左子树上的值均小于根节点的值&#xff1b;右子树的值均大于根节点的值。&#xff08;相当于链表&#xff09;平衡二叉树任何节点的两个子树的最大高度差为1&#xff0c;被…
阅读更多...
Gartner发布2021年重要战略科技趋势

Gartner发布2021年重要战略科技趋势

来源&#xff1a;Gartner公司全球领先的信息技术研究和顾问公司Gartner于今日发布企业机构在2021年需要深挖的重要战略科技趋势。分析师们在本周举行的Gartner IT Symposium/Xpo大会美洲站虚拟会议上展示了自己的发现。Gartner研究副总裁Brian Burke表示&#xff1a;“各企业职…
阅读更多...
html右侧分为两个框架,html – 两个框架一个滚动条

html右侧分为两个框架,html – 两个框架一个滚动条

我正在尝试创建两个框架并使它们一起滚动,例如,如果页面顶部有更改的菜单栏 –我正在使用旋转木马 – 或底部的页脚,必须作为页面的一部分出现.我希望页面看起来像一个也能够滚动的页面,但页面实际上由两个框架组成.用这个……/p>"http://www.w3.org/TR/xhtml1/DTD/xht…
阅读更多...
pause pod 什么是pod_Kubernetes 自主式Pod清单 干货太多先马住慢慢看

pause pod 什么是pod_Kubernetes 自主式Pod清单 干货太多先马住慢慢看

在讲资源清单之前&#xff0c;先给大家介绍一下究竟什么是Kubernetes资源&#xff1f;有几种资源&#xff1f;① 资源分类&#xff1a;① 1 工作负载&#xff1a;pod、rs(ReplicasSet)、deploy(Deployment)、sts(StatefulSet)、ds(DaemonSet)、job、cronjob① 2 服务发现及负…
阅读更多...
不会Python开发的运维终将被淘汰？

不会Python开发的运维终将被淘汰？

Python语言是一种面向对象、直译式计算机程序设计语言&#xff0c;由Guido van Rossum于1989年底发明。Python语法简捷而清晰&#xff0c;具有丰富和强大的类库&#xff0c;具有可扩展性和可嵌入性&#xff0c;是现代比较流行的语言。 一、最流行的语言 IEEE Spectrum 的数据记…
阅读更多...
8大领域、6大机遇！读懂2020年AI医疗新风向

8大领域、6大机遇！读懂2020年AI医疗新风向

来源 | 工业互联网创新中心、36氪研究院编辑 | 蒲蒲蓝皮书如下未来智能实验室的主要工作包括&#xff1a;建立AI智能系统智商评测体系&#xff0c;开展世界人工智能智商评测&#xff1b;开展互联网&#xff08;城市&#xff09;云脑研究计划&#xff0c;构建互联网&#xff08;…
阅读更多...
对口高考 html语言,VB对口高考模拟试题1

对口高考 html语言,VB对口高考模拟试题1

《VB》对口高考模拟试题1一、选择题。(每个1分&#xff0c;共30分)1、某一VB工程含F1、F2两个窗体&#xff0c;执行“F1&#xff0e;Show: F2&#xff0e;Hide”语句后&#xff0c;F1、F2窗体显示的结果为()。A、都显示B、都不显示C、仅显示F1窗体D、仅显示F2窗体2、删除列表框…
阅读更多...
LinkedList源码详解

LinkedList源码详解

public class LinkedList<E>extends AbstractSequentialList<E>implements List<E>, Deque<E>, Cloneable, java.io.Serializable LinkedList继承自AbstractSequenceList、实现了List及Deque接口。 AbstractSequenceList提供List接口的骨干实现,以减少…
阅读更多...
最新文章

Copyright @ 2022~2023