安全第三天 -- AJAX,XMLHttpRequest

同步JavaScript和异步JavaScript

在说这个之前我们要知道JavaScript的单线程模型，即在我们的JavaScript代码运行时，一次只有一个主线程在运行，这个原因是因为在浏览器设计之初，为了避免线程之间的冲突和竞争，所以所有的任务都在同一个线程中运行。

同步JavaScript就是当我们有很多任务需要执行时，我们只能先执行完当前执行的任务才能去执行后续任务列表中的任务，但是这样也会有一个问题，就是如果说单个任务的执行时间太长，那么这个任务将会堵塞整个浏览器，使用户的体验感变得很差。

异步JavaScript就很大程度上缓解上面的问题。异步JavaScript可以让我们的程序在等待服务器响应时执行其他操作。但是实际上，当有多个代码同时执行时，他们并不会真正的并行执行。

如何形象的理解异步JavaScript

1. 假设你有2个女朋友（当然你也可以幻想有n个女友），在学校有一个，社会上有一个，今天一天快乐生活假设为是你今天的任务。
2. 当你的学校女友在学校时，你只能陪学校女朋友去食堂、图书馆、小树……，而另外的那个女友可以理解为放到一个任务队列中。
3. 下午，学校女朋友说我要回一趟家，今天下午不在你身边，你不可以鬼混。
4. 你小子反手打电话带着社会上的女朋友去看电影，……
5. 当你快乐看电影的时候，你的学校女朋友突然微信给你发消息说，我马上回来了。此时你慌的一批，告诉社会女朋友说学校有点事需抓紧回去交一份资料，你先自己看待会回来找你，于是你趁机将学校女朋友接到学校以后，你又以交资料为由返回电影院，继续正经的看新播出《阿凡达》。 -- 快乐而又刺激的一天。

XML

XML(Extensible Markup Language)是一种常用的标准化的可扩展的标记语言。XML的设计宗旨是可以让不同的应用程序之间的信息交换更加方便。

XML的格式和HTML类似，都是使用标签来表示数据。

示例：

上面的XML文档表示了一个名为"ikun"，年龄为2.5岁，电子邮件地址为"ikun@163.com"的用户。XML还可以表示数组。例如，下面是一个表示用户列表的XML文档：

JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换。它基于JavaScript对象表示法，但是JSON格式可以被其它语言读取。

JSON的格式非常简单，是一个用大括号括起来的键值对的形式。例如，下面是一个表示用户信息的JSON对象：

上面的JSON对象表示了一个名为"ikun"，年龄为2.5岁，

电子邮件地址为“ikun@163.com”的用户。

JSON还可以表示数组。例如，下面是一个表示用户列表的JSON数组：

上面的JSON数组表示了两个用户的信息。

JSON常用于在Web应用中传递数据。例如，使用Ajax技术可以在浏览器和服务器之间交换JSON格式的数据。

JSON与XML比较起来，更加简单和轻量，因此在Web应用中越来越流行。

Ajax -- （异步JavaScript 和 XML）

Ajax是一种用于在浏览器和服务器之间交换数据的技术。它使用JavaScript在浏览器中执行异步HTTP请求，并在收到服务响应时更新网页。这种异步更新能够改善用户体验，因为它可以在不重新加载整个页面的情况下更新部分内容。

举个例子，我们在使用在线聊天应用时，每次发送消息都要刷新整个页面，这将会很烦人。使用Ajax，我们就可以在发送消息后进更新聊天窗口，而不是整个页面。

Ajax使用XMLHttpRequest对象来执行异步HTTP请求。XMLHttpRequest对象来执行异步HTTP请求。XMLHttpRequest对象是大多数浏览器都支持的一种对象，它使用JavaScript可以在后台与服务器进行通信，而不会影响页面的性能。

Ajax也可以使用其他的数据格式，例如JSON，而不是XML来交换数据。然而，AJAX的名称仍然保留了这个历史，即使他现在使用的并不仅仅是XML。

Ajax的使用步骤

1. 创建XMLHttpRequest对象：XMLHttpRequest对象是Ajax的核心，用于向服务器发送请求和接受响应。
2. 初始化XMLHttpRequest对象：使用XMLHttpRequest对象的open()方法初始化请求
3. 设置回调函数：使用XMLHttpRequest对象的onreadystatechange事件来设置回调函数，当服务器响应就绪时调用该函数。
4. 发送请求：使用XMLHttpRequest对象的send()方法发送请求。
5. 处理响应：当服务器响应就绪时，调用回调函数并使用XMLHttpRequest对象的respondseText属性获取响应数据。

示例：使用Ajax向服务器发送GET请求并处理响应的示例代码

XMLHttpRequest

XMLHttpRequest是用于在浏览器和服务器之间发送HTTP请求的对象。他是用于是实现Ajax技术的基础。XMLHttpRequest对象是Ajax的主要接口，尽管他的名字中有XML和HTTP，但是它实际上可以使用多种协议，比如file和ftp，发送任何格式的数据，包括字符串和二进制。这就好比虽然我是ikun，但是我也会调侃吴亦凡。

XMLHttpRequest对象有以下常用方法：

open(method,url,async)	初始化请求。method表示请求的HTTP方法（例如GET和POST），url表示请求的地址，async表示是否使用异步请求。
send(data)	发送请求。data表达要发送的请求数据。
setRequestHeader(header,value)	设置请求头。header表示响应头的名称，value表示请求头的值。
getResponseHeader(header)	获取响应头。header表示响应头的名称
getAllResponseHeaders()	获取所有响应头

XMLHttpRequest的readyState

XMLHttpRequest对象有以下常用方法：

onreadystatechange	当readyState属性发生改变时触发
onload	当数据加载完成时触发
onerror	当发生错误时触发

XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。他可能返回以下值。

0	表示XMLHttpRequest对象已经生成，但是对象的open方法还没有调用，我们叫他UNSENT
1	表示open()方法已经被调用，但是对象的send()方法还没有被调用，仍然可以使用对象的setRequestHeader()方法设置HTTP请求头信息，我们可以使用OPENED。
2	表示示例的send()方法已经调用，并且服务器的返回的头信息和状态码已经收到，我们也可以使用HEADERS_RECEIVED
3	表示正在接收服务器传来的数据体(body)。此时，如果对象的responseType属性等于text或者空字符串，respondText属性就会包含已经收到的部分信息，我们也可以使用LOADING。
4	表示服务器返回的数据已经被完全接受，或者本意接收已经失败，我们可以使用DONE。

在通信过程中，每当对象发生状态变化，他的readyState属性的值就会发生改变。这个值每一次变化，都会触发readyStateChange事件，现在就好理解onreadystatechange

XMLHttpRequest.reponseType

XMLHttpRequest.reponseType属性只是一个只读的字符串，表示服务器返回的数据的类型。这个属性可以设置为以下值：

arraybuffer	返回一个ArrayBuffer对象，表示服务器返回二进制数组
blob	返回一个Blob对象，适合二进制对象，比如图片文件
document	返回一个Document，适合返回HTML/XML文档
json	返回一个JavaScript对象（通过JSON.parse解析得到）
text	返回一个字符串，适用于大多数情况

我们可以使用这个属性来设置XMLHttpRequest对象期望服务器返回的数据类型，这样可以确保浏览器正确地处理服务器返回的数据

比如：

var xhr = new XMLHttpRequest();

xhr.responseType = 'json';

注意：在发送请求之前设置reponseType属性是有效的。

注意：如果我们设置为JSON，那么我们的浏览器和服务器都做了哪些操作呢？（以PHP为例）

当我们后端请求到数据以后，PHP将会使用json_encode将数据转换成JSON格式

示例：

当然我们的PHP也可以将JSON字符串转换成PHP数组

示例：

当数据通过JSON格式传递到前端的时候，我们的浏览器将通过JSON.parse将一个JSON字符串转换为JavaScript对象，之后再通过浏览器渲染出来

示例：

同样的，JavaScript也可以使用JSON.stringify()方法将一个JavaScript对象转换成JSON字符串

示例:

XMLHttpRequest事件监听属性

XMLHttpRequest 对象有多个事件监听属性，可以用来跟踪请求的状态和处理响应数据。

1. XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数
2. XMLHttpRequest.onprogress：progress事件（正在发送和加载数据）的监听函数
3. XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了`abort()`方法）的监听函数

注意：abort()方法用于中止当前的异步HTTP请求，当我们使用该方法后，不会触发onload回调函数，也不会触发任何其他回调函数。如果我们需要在请求中止时进行弹窗提示，可以在调用abort()方法前设置好回调函数。

示例：

1. XMLHttpRequest.onerror：error 事件（请求失败）的监听函数
2. XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数
3. XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数
4. XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数

如何看自己当前有没有被木马感染。

首先我们要知道，如果我们感染了木马，如果对方想要控制我们的电脑，一定需要对我们进行连接。连接就会有三次握手。我们最快速的方法是通过shell界面看有没有陌生链接。

当然我们也可以通过杀毒软件扫描文件/  -进程，但是基本都是跑病毒特征。’