原生js jquery ajax请求以及jsonp的调用方法

下面是详细讲解“原生js jquery ajax请求以及jsonp的调用方法”的完整攻略：

原生js ajax请求

原生js的ajax请求可以通过XMLHttpRequest对象实现。以下是ajax请求的基本流程：

1. 创建一个XMLHttpRequest对象。

var xhr = new XMLHttpRequest();

1. 发送请求。

xhr.open(method, url, async);
xhr.send();

其中，method表示请求方法，可以是"GET"、"POST"等；url表示请求的URL；async表示是否为异步请求，默认值为true。

1. 监听状态变化。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}

在状态变化时会触发onreadystatechange函数，通过xhr.readyState可以获取当前的状态，通过xhr.status可以获取请求的状态码，200表示请求成功。

jquery ajax请求

使用jquery发起ajax请求可以简化代码，并且兼容性更好。以下是jquery ajax请求的基本流程：

1. 发送请求。

$.ajax({
  url: url,
  type: method,
  dataType: dataType,
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, errorType, error) {
    console.log(error);
  }
});

其中，url表示请求的URL；type表示请求类型，可以是"GET"、"POST"等；dataType表示响应数据的类型，可以是"json"、"xml"等。success是请求成功时的回调函数，data是返回的数据；error是请求失败时的回调函数。

1. 监听状态变化。

jquery的ajax函数也支持在发送请求时监听状态变化，通过xhr参数可以获取XMLHttpRequest对象，并进行操作。

$.ajax({
  url: url,
  type: method,
  dataType: dataType,
  xhr: function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystateChange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    };
    return xhr;
  }
});

jsonp请求

jsonp请求是一种跨域请求方式，是通过动态添加script标签实现的。以下是jsonp请求的基本流程：

1. 创建script元素。

var script = document.createElement('script');

1. 设置src属性，并发送请求。

script.src = url;
document.head.appendChild(script);

其中，url指向的是一个返回数据的接口地址，由于跨域不能使用XMLHttpRequest对象，因此需要使用<script>标签加载。以GET方法为例，返回的是一个JavaScript脚本，其中包含一个以参数形式返回的回调函数，例如：

callback({ "status": "success", "data": { "user": "admin", "pwd": "123456" }});

1. 定义回调函数。

在返回的JavaScript脚本中有一个类似于callback({ "status": "success", "data": { "user": "admin", "pwd": "123456" }});的语句，其中的callback就是约定的回调函数名。因此，在发送jsonp请求时需要定义对应的回调函数：

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

在jsonp请求中，回调函数名通常是由客户端自己生成的一个唯一的随机字符串。

示例1：使用原生js实现ajax请求

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.github.com/users', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

示例2：使用jquery实现ajax请求

$.ajax({
  url: 'https://api.github.com/users',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, errorType, error) {
    console.log(error);
  }
});

示例3：使用jsonp实现跨域请求

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

var script = document.createElement('script');
script.src = 'https://api.github.com/users?callback=callback';
document.head.appendChild(script);