本文将介绍Ajax和JSONP这两种使用原生JavaScript进行数据请求的方法。

Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下与服务器进行数据交互的技术。它可以实现异步加载数据，提高用户体验。通过使用原生JavaScript提供的XMLHttpRequest对象，我们可以发送HTTP请求到服务器，并在请求完成后处理服务器返回的数据。

JSONP（JSON with Padding）则是一种通过动态创建script标签，从而绕过浏览器的同源策略限制进行跨域请求的方法。通常，在需要跨域访问数据的场景中，我们可以利用这种技术来获取远程服务器返回的数据。

下面我们将通过举例来说明如何使用原生JavaScript实现Ajax和JSONP。

Ajax示例：

<script>
function loadData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 在这里处理服务器返回的数据
} else {
console.error('请求失败');
}
}
};
xhr.open('GET', 'https://example.com/api/data', true);
xhr.send();
}
loadData();
</script>

上述代码中，我们首先创建了一个XMLHttpRequest对象xhr，并设置了其onreadystatechange事件处理函数。然后，我们使用xhr.open方法指定了请求的方法和URL，并使用xhr.send方法发送了一个GET请求。最后，在xhr.onreadystatechange事件的处理函数中，我们根据xhr.readyState和xhr.status来判断请求是否完成，如果完成并且成功，我们可以通过xhr.responseText来获取服务器返回的数据。

需要注意的是，由于Ajax使用了异步加载数据的方式，因此需要在请求的时候设置xhr.open方法的第三个参数为true，表示异步请求。如果设置为false，则会变为同步请求，会导致页面的阻塞。

JSONP示例：

<script>
function handleResponse(data) {
// 在这里处理服务器返回的数据
}
function loadData() {
var script = document.createElement('script');
script.src = 'https://example.com/api/data?callback=handleResponse';
document.body.appendChild(script);
}
loadData();
</script>

上述代码中，我们首先定义了一个名为handleResponse的函数，该函数用于处理服务器返回的数据。然后，我们创建了一个script标签，并通过设置其src属性来指定请求的URL，将callback参数设置为handleResponse函数的名称。最后，我们将script标签添加到页面的body元素中，浏览器会自动加载并执行该script标签内的内容，从而触发handleResponse函数来处理服务器返回的数据。

需要注意的是，由于JSONP是通过动态创建script标签来请求数据的方式，因此并不受浏览器的同源策略限制。通过在URL中添加callback参数，服务器返回的数据会被包裹在该函数的调用中，从而使得我们可以在本地脚本中获取到服务器返回的数据。

综上所述，通过使用原生JavaScript可以轻松实现Ajax和JSONP。Ajax适用于在同一域名下进行数据请求，而JSONP适用于跨域场景下通过动态创建script标签来获取数据。根据具体的需求和场景，我们可以选择适合的方法来实现数据交互，提升用户体验。