原生JS实现AJAX与JSONP异步请求

"原生JS发送异步数据请求的主要方式是AJAX和JSONP，这两种技术可以帮助开发者在不刷新整个页面的情况下获取并更新局部数据。本文将重点介绍如何使用原生JavaScript实现这两种异步请求方法，并提供了一个简单的AJAX请求的代码示例。" 在JavaScript中，发送异步数据请求通常是为了提升用户体验，避免页面因为数据加载而频繁刷新。当没有依赖任何框架时，我们可以利用浏览器内置的XMLHttpRequest对象或者JSONP技术来实现这一功能。 1. AJAX（Asynchronous JavaScript and XML）是异步数据请求的一种常见方式，它利用XMLHttpRequest对象与服务器进行通信。以下是一个简化的AJAX请求过程： - 创建XMLHttpRequest对象：首先，我们需要创建一个XMLHttpRequest实例，对于现代浏览器，我们直接使用`new XMLHttpRequest()`；对于老版本的IE，则使用`new ActiveXObject('Microsoft.XMLHTTP')`。 - 打开连接：调用`open()`方法，传入请求类型（GET、POST等）、URL以及是否异步（通常是true，表示异步）。 - 发送请求：使用`send()`方法发送数据。对于GET请求，通常不需要传递额外参数；对于POST请求，数据作为参数传递。 - 处理响应：通过监听`onreadystatechange`事件，当`readyState`属性变为4（表示请求完成）且`status`属性为200（表示成功）时，读取`responseText`或`responseXML`属性获取响应数据。如果请求失败，可以定义错误处理函数。 给出的代码示例中，`ajaxJSON`函数接受一个参数`params`，其中包含了请求类型、数据、缓存处理等信息。它首先检查请求类型，然后格式化数据，接着创建XMLHttpRequest对象并设置其回调函数。当请求完成后，根据请求成功与否调用用户提供的success或error回调。 2. JSONP（JSON with Padding）是另一种跨域数据请求的解决方案，主要用于解决同源策略限制。JSONP的基本原理是动态创建`<script>`标签，将回调函数名和请求的URL拼接成一个动态生成的脚本，服务器端返回数据时会将数据包裹在指定的回调函数中。由于`<script>`标签不受同源策略限制，因此可以实现跨域请求。然而，JSONP只支持GET请求，且安全性较低，因为它无法处理错误。 原生JavaScript中的AJAX和JSONP都是实现异步数据请求的重要手段，各有优缺点。在实际开发中，为了提高可维护性和兼容性，开发者往往会使用jQuery、axios等库进行封装，但理解原生实现方式对于深入理解网络请求和浏览器工作原理至关重要。