js_XMLHTTPRequest与referrer概念

最新推荐文章于 2023-02-05 10:06:41 发布

Y-hj

最新推荐文章于 2023-02-05 10:06:41 发布

阅读量114

点赞数

文章标签： javascript json ajax

本文链接：https://blog.csdn.net/weixin_57385269/article/details/128611974

版权

XMLHttpRequest是AJAX的核心，用于浏览器与服务器通信。JSON作为轻量级的数据交换格式，比XML更易读且传输速度快。文章详细对比了JSON与XML的区别，并介绍了XMLHttpRequest的readyState、getResponseHeader、status等属性以及load、error等事件监听。同时，提及了AJAX文件上传和Referer在防御CSRF中的作用。

摘要由CSDN通过智能技术生成

一.XMLHttpRequest
XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。

-------JSON和XML的区别
1.JSON是JavaScript Object Notation；XML是可扩展标记语言。
2.JSON是一种表示对象的方式；XML是一种标记语言
3.JSON支持数组；XML不支持数组
4.XML的文件相对难以阅读和解释；与XML相比，JSON的文件非常易于阅读
5.JSON的安全性较低；XML比JSON更安全
6.JSON仅支持UTF-8编码；XML支持各种编码
7.JSON相对于XML来说, 数据的体积小,传递速度更快

-------JSON的顶层支持三种类型的值:
1.简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型；
2.对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；
3.数组值：数组的值可以是简单值、对象值、数组值；
4.XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。

1，表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。
2，表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。
3，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。
4，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息。
5，表示服务器返回的数据已经完全接收，或者本次接收已经失败。

--------XMLHttpRequest.getResponseHeader()
返回 HTTP 头信息指定字段的值，如果还没有收到服务器回应或者指定字段不存在，返回null。该方法的参数不区分大小写。
eg: 在这里插入图片描述

--------XMLHttpRequest.status，XMLHttpRequest.statusText
XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP 状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0。该属性只读。

200, OK，访问正常
301, Moved Permanently，永久移动
302, Moved temporarily，暂时移动
304, Not Modified，未修改
307, Temporary Redirect，暂时重定向
401, Unauthorized，未授权
403, Forbidden，禁止访问
404, Not Found，未发现指定网址
500, Internal Server Error，服务器发生错误

二.事件监听属性
XMLHttpRequest 对象可以对以下事件指定监听函数。

XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数
XMLHttpRequest.onprogress：progress事件（正在发送和加载数据）的监听函数
XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了abort()方法）的监听函数
XMLHttpRequest.onerror：error 事件（请求失败）的监听函数
XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数
XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数
XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数

--------XMLHttpRequest.upload
XMLHttpRequest 不仅可以发送请求，还可以发送文件，这就是 AJAX 文件上传。发送文件以后，通过XMLHttpRequest.upload属性可以得到一个对象，通过观察这个对象，可以得知上传的进展。
主要方法就是监听这个对象的各种事件：loadstart、loadend、load、abort、error、progress、timeout。
--------XMLHttpRequest.abort()
方法用来终止已经发出的 HTTP 请求。调用这个方法以后，readyState属性变为4，status属性变为0。
eg: 在这里插入图片描述

progress事件的监听函数有一个事件对象参数，该对象有三个属性：loaded属性返回已经传输的数据量，total属性返回总的数据量，lengthComputable属性返回一个布尔值，表示加载的进度是否可以计算。
所有这些监听函数里面，只有progress事件的监听函数有参数，其他函数都没有参数。
如果发生网络错误（比如服务器无法连通），onerror事件无法获取报错信息。也就是说，可能没有错误对象，所以这样只能显示报错的提示。
其中，常用的事件有onload、ontimeout、onerror等。
三.Referer
Referer 是 HTTP 请求header 的一部分，当浏览器（或者模拟浏览器行为）向web 服务器发送请求的时候，头信息里有包含 Referer，一定程度上可以防御CSRF。