原生js的ajax和解决跨域的jsonp(实例讲解)

关于原生JS的AJAX和JSONP的介绍和实例讲解，我将从以下三个部分来进行详细解答。

1. AJAX的介绍和使用方法

AJAX全称为Asynchronous JavaScript and XML（异步的JavaScript和XML），是一种前端常用数据交换技术，能够实现页面异步刷新，避免了页面重新刷新的效果，减轻服务器对请求的压力。使用AJAX技术可以更好的优化用户体验。

AJAX的核心思路是XMLHttpRequest对象及其API，XMLHttpRequest可以在后台与服务器进行数据交换，无需刷新整个页面。在JS中，通过创建XMLHttpRequest对象来发送HTTP请求和接收HTTP响应。基本使用方法如下：

let xhr = new XMLHttpRequest(); //创建XMLHttpRequest对象
xhr.open("GET/POST", url, async); //初始化请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //设置请求头
xhr.onreadystatechange = function() { //回调函数
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send(data); //发送请求

其中，open()方法用于初始化请求，第一个参数是请求的方法，一般是GET和POST，第二个参数为请求的URL，第三个参数表示是否为异步请求。

setRequestHeader()方法用于设置请求头内容，例如Content-Type等HTTP信息。

onreadystatechange是回调函数，当readyState属性发生变化时，该函数被触发。当readyState为4，而status为200时，表示响应已经就绪，数据也已经成功响应。

send()方法用于向服务器发送请求，参数为要发送的数据。

1. JSONP的介绍和使用方法

JSONP全称是JSON with Padding（含跨域回调的JSON），是解决跨域问题的一种方案，常用于前端与不能CORS的服务器进行数据交换。

JSONP的本质是通过<script>标签的跨域特性实现的。由于<script>标签不受同源策略影响，因此在前端页面中可以动态生成<script>标签，并通过它将一段JS代码插入到当前页面中执行。

JSONP的实现过程中，于服务器端约定一个回调函数，前端通过设置该函数的名称权当做参数传给服务器，服务器在接收到请求后会将JSON数据作为传递给该函数并作为字符串返回给前端。前端页面接收到该字符串后，自动将其当做JS脚本执行，从而达到了跨域获取数据的目的。

JSONP的基本使用方法如下：

function jsonp(url, cb) {
    let script = document.createElement('script');
    script.src = url + '&callback=' + cb;
    document.head.appendChild(script);
}

jsonp('https://www.example.com/data', 'handleData');

function handleData(data) {
    console.log(data);
}

上述代码中，jsonp()函数用于生成请求地址和动态插入<script>标签，接收两个参数：跨域请求URL和回调函数名称。请求URL中将callback参数设置为我们约定的回调函数名称，由于请求的数据不在JS脚本之中，请求时只能使用GET请求。

1. 实例讲解

（1）AJAX示例

当用户在页面上输入关键字搜索时，我们要用AJAX向后端请求相关数据，通过搜索的结果，更新当前页面的内容。示例代码如下：

HTML：

<input type="text" id="search">
<button id="btn">搜索</button>
<div id="result"></div>

JS：

const search = document.querySelector('#search');
const btn = document.querySelector('#btn');
const result = document.querySelector('#result');
let xhr = null;
btn.addEventListener('click', function() {
    let keyWords = search.value.trim();
    if (keyWords === '') {
        return alert('请输入查询关键字！');
    }
    if (xhr !== null) {
        xhr.abort(); //中断上次的请求
    }
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            result.innerHTML = xhr.responseText;
        }
    };
    xhr.open('GET', 'http://www.example.com/search?keyWords=' + encodeURIComponent(keyWords), true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(null);
});

这个示例通过监听click事件实现关键字搜索，点击按钮时通过AJAX向服务器请求数据，并更新页面内容。

（2）JSONP示例

假设我们要跨域获取github用户信息，我们可以利用github提供的API接口实现，该API允许我们通过callback参数设置回调函数，并返回JSONP格式的数据，示例代码如下：

JS：

function jsonp(url, cb) {
    let script = document.createElement('script');
    script.src = url + '&callback=' + cb;
    document.head.appendChild(script);
}
let user = document.querySelector('#user');
let btn = document.querySelector('#btn');

btn.addEventListener('click', function() {
    let username = user.value.trim();
    if (username === '') {
        return alert('请输入Github用户名！');
    }
    jsonp(`https://api.github.com/users/${username}`, 'handleData');
});

function handleData(data) {
    console.log(data);
    alert(`用户名: ${data.login}\n姓名: ${data.name}\nBlog: ${data.blog}\nFollowers: ${data.followers}`);
}

这个示例通过监听click事件实现了跨域获取github用户信息，通过设置URL和回调函数名称实现AJAX获取数据。获取到数据后通过处理函数处理返回的结果，并弹窗显示。