原生JavaScript实现AJAX、JSONP

原生JavaScript实现AJAX

AJAX是Asynchronous JavaScript and XML（异步JavaScript和XML）的简称，是一种通过在后台与服务器进行少量数据交换的方式，实现页面局部更新的技术。

基本原理

AJAX的原理是利用JavaScript向后台服务器发送HTTP请求并接收后台服务器返回的数据，在不刷新页面的情况下对页面进行局部更新。

1. 创建XMLHttpRequest对象
2. 发送HTTP请求
3. 接收HTTP响应
4. 解析响应数据
5. 局部更新页面

示例

发送GET请求

//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//配置请求参数
xhr.open('GET', 'http://example.com/api/data?id=1', true);

//设置响应类型为JSON
xhr.responseType = 'json';

//发送HTTP请求
xhr.send();

//监听readyState变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    //解析响应数据
    var data = xhr.response;

    //局部更新页面
    document.getElementById('data').innerHTML = data;
  }
};

发送POST请求

//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//配置请求参数
xhr.open('POST', 'http://example.com/api/user', true);

//设置请求头部信息
xhr.setRequestHeader('Content-Type', 'application/json');

//设置响应类型为JSON
xhr.responseType = 'json';

//发送HTTP请求
xhr.send(JSON.stringify({
  name: 'Tom',
  age: 20
}));

//监听readyState变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    //解析响应数据
    var user = xhr.response;

    //局部更新页面
    document.getElementById('user').innerHTML = user.name;
  }
};

原生JavaScript实现JSONP

JSONP是一种跨域请求的解决方案，其原理是通过动态创建script标签，通过src属性指向一个可以返回JSON格式数据的URL，返回结果会被自动当做JavaScript代码执行。

基本原理

JSONP的原理是利用