在JavaScript中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。而JSONP（JSON with Padding）则是解决浏览器同源策略限制，实现跨域数据交互的一种机制。在某些场景下，原生JavaScript实现AJAX和JSONP比使用库如jQuery更轻量级，也更有助于理解其工作原理。
让我们详细解析原生JavaScript实现AJAX的过程：
1. **实例化XMLHttpRequest对象**：
在所有现代浏览器中，可以通过`new XMLHttpRequest()`来创建一个XMLHttpRequest对象。对于旧版IE（IE6及以下），我们需要使用ActiveXObject来创建，例如`new ActiveXObject('Microsoft.XMLHTTP')`。
2. **配置请求**：
通常，我们需要定义请求的类型（GET或POST）、URL、数据以及是否异步。这些参数可以通过一个配置对象params来传递，并在函数内部处理。
3. **监听状态变化**：
使用`onreadystatechange`事件监听XMLHttpRequest对象的`readyState`属性变化。当`readyState`等于4时，表示请求已完成。此时，我们可以检查`status`属性，判断是否为成功状态（通常200到299之间的HTTP状态码）。
4. **处理响应数据**：
根据HTTP响应头中的`Content-type`，可以判断返回的数据类型。如果是XML，我们可以获取`responseXML`；如果是JSON，使用`JSON.parse()`解析`responseText`；其他情况，直接返回`responseText`。
5. **发送请求**：
对于GET请求，`open`方法的第三个参数为true表示异步请求，然后在URL后面拼接查询字符串`params.data`，最后通过`send(null)`发送请求。POST请求则需要在`open`之后设置请求头，然后通过`send(params.data)`发送数据。
现在，我们转向JSONP的实现：
JSONP的原理是利用`<script>`标签不受同源策略限制的特点，通过动态创建`<script>`元素，并设置其`src`属性指向服务器提供的带有回调函数的JavaScript脚本。服务器返回的数据会执行这个回调函数，从而在客户端处理数据。
1. **创建回调函数**：
在客户端，我们需要定义一个全局函数，作为服务器返回数据的接收者。
2. **构建请求URL**：
JSONP请求的URL中包含一个回调函数名，通常是一个动态生成的函数名，例如`callback=?`。服务器会将返回的JSON数据包装在这个函数中。
3. **动态插入`<script>`标签**：
创建`<script>`元素，设置其`src`为带回调函数名的URL，然后将其添加到DOM中。浏览器会自动发送请求，并执行返回的脚本。
4. **处理返回数据**：
当服务器返回的脚本执行时，会调用预先定义的回调函数，传入JSON数据。我们在回调函数内部处理这些数据。
总结，原生JavaScript实现AJAX和JSONP需要对XMLHttpRequest对象有深入理解，同时掌握异步请求的处理和跨域请求的机制。虽然使用库可以简化这些操作，但了解原生实现有助于更好地控制和优化数据交互过程。在实际开发中，根据项目需求和性能考虑，可以选择合适的方法来实现异步数据请求。
