基于js原生和ajax的get和post方法以及jsonp的原生写法实例

了解您的要求后，我将详细讲解基于js原生和ajax的get和post方法以及jsonp的原生写法实例。具体攻略如下：

1. 基于JS原生的get方法

JS原生的get方法可以通过XMLHttpRequest对象来发送GET请求，以下是一个简单的示例代码。

function sendGetRequest(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };

  xhr.send();
}

我们定义了一个函数sendGetRequest，它有两个参数：URL和callback回调函数。在函数体内，我们创建了一个XMLHttpRequest对象，并将其打开。如果xhr的状态值为4（请求已完成）且状态码为200（请求成功），那么就调用回调函数，并将服务器的响应结果作为参数传递给它。

2. 基于JS原生的post方法

JS原生的post方法和get方法有点类似，唯一的区别就是它们打开URL的方式不同。以下是一个基于JS原生的post请求的示例代码。

function sendPostRequest(url, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", url);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };

  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(data);
}

我们定义了一个函数sendPostRequest，它有三个参数：URL、data和callback回调函数。在函数体内，我们创建了一个XMLHttpRequest对象，并将其打开。如果xhr的状态值为4（请求已完成）且状态码为200（请求成功），那么就调用回调函数，并将服务器的响应结果作为参数传递给它。

我们还设置了请求头信息并将数据发送给服务器。data需要以字符串的形式传递，因此可以使用JSON.stringify()方法将JavaScript对象转换为JSON字符串。

3. 基于Ajax的get方法

为了简化JavaScript代码，我们可以使用jQuery提供的Ajax方法。以下是一个使用Ajax发送GET请求的示例代码。

$.ajax({
  url: url,
  type: "GET",
  success: function(data) {
    callback(data);
  }
});

我们使用了jQuery的$.ajax()方法，并传递了一个配置对象作为参数。在这个对象中，我们指定了URL和请求类型，并在请求成功时调用回调函数并将服务器的响应结果作为参数传递给它。

4. 基于Ajax的post方法

和上面的示例代码类似，以下是一个使用Ajax发送POST请求的示例代码。

$.ajax({
  url: url,
  type: "POST",
  data: data,
  success: function(data) {
    callback(data);
  }
});

我们使用了jQuery的$.ajax()方法，并传递了一个配置对象作为参数。在这个对象中，我们指定了URL、请求类型、数据，并在请求成功时调用回调函数并将服务器的响应结果作为参数传递给它。

5. 基于jsonp的原生写法实例

JSONP是一种跨域访问的技术，它通过动态地添加一个<script>标签来实现。以下是一个使用jsonp的原生写法实例。

function sendJSONPRequest(url, callback) {
  var script = document.createElement("script");
  script.src = url + "&callback=" + callback;
  document.body.appendChild(script);
}

我们定义了一个函数sendJSONPRequest，它有两个参数：URL和callback回调函数。在函数体内，我们创建了一个<script>标签并将其添加到HTML页面中。为了让服务器知道我们期望获取的是jsonp格式的数据，我们在URL中添加了一个callback函数名的参数，并将回调函数的名字作为值传递给它。服务端在处理完请求后，会根据callback参数的值来返回一段JavaScript代码，这段代码会调用我们传入的回调函数并将数据作为参数传递给它。

以上是关于基于js原生和ajax的get和post方法以及jsonp的原生写法的完整攻略。如果您有任何疑问或需要更多的帮助，请随时回复。