原生js实现ajax请求和JSONP跨域请求操作示例

下面我将详细讲解"原生js实现ajax请求和JSONP跨域请求操作示例"的完整攻略。

AJAX请求

简介

AJAX（Asynchronous JavaScript And XML），是一种无需重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。AJAX 主要由三个部分组成：XMLHttpRequest 对象、JavaScript 和 DOM。

实现步骤

1. 创建 XMLHttpRequest 对象。
2. 通过 XMLHttpRequest 对象的 open() 方法设置请求的方式、地址和是否异步。
3. 通过 XMLHttpRequest 对象的 send() 方法发送请求。
4. 监听 XMLHttpRequest 对象的 readyState 和 status 属性，当 readyState 值发生变化时执行对应的操作，当 status 值为200时表示请求成功，执行回调函数并处理服务端返回的数据。

示例说明

GET请求

下面是一个使用原生JS实现的AJAX GET请求的示例。

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

//设置请求的方式和地址，true表示异步请求
xhr.open('GET', 'http://www.example.com/api/data', true);

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

//监听 readyState 和 status 值的变化，当 status 值为200时表示请求成功
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    //处理服务端返回的数据
    console.log(xhr.responseText);
  }
};

POST请求

下面是一个使用原生JS实现的AJAX POST请求的示例。

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

//设置请求的方式和地址，true表示异步请求
xhr.open('POST', 'http://www.example.com/api/data', true);

//设置请求头部信息
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

//发送请求
xhr.send('name=admin&password=123456');

//监听 readyState 和 status 值的变化，当 status 值为200时表示请求成功
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    //处理服务端返回的数据
    console.log(xhr.responseText);
  }
};

JSONP跨域请求

简介

JSONP（JSON with Padding），是一种跨域请求的方式，它的原理是利用 script 标签的跨域性质，在客户端动态创建 script 标签，然后通过 script 标签的 src 属性访问带有 JSON 数据的服务端地址，服务端返回的数据会自动执行回调函数。

实现步骤

1. 创建 script 标签。
2. 设置 script 标签的 src 属性，将请求地址和回调函数作为参数传递。
3. 在客户端定义回调函数，确保函数名称与传递给服务端的回调函数名称一致。
4. 在服务端定义回调函数，处理要返回的数据，并将数据作为参数传递给回调函数。
5. 服务端返回的数据会自动执行客户端定义的回调函数。

示例说明

下面是一个使用原生JS实现的JSONP跨域请求的示例。

//创建 script 标签
var script = document.createElement('script');

//定义回调函数
function handleResponse(data) {
  //处理返回的数据
  console.log(data);
}

//设置 script 标签的 src 属性，将请求地址和回调函数作为参数传递
script.src = 'http://www.example.com/api/data?callback=handleResponse';

//将 script 标签添加到文档中
document.head.appendChild(script);

注意：服务端返回的JSON数据，需要包含一个回调函数参数，其名称应该与客户端定义的回调函数名称一致。假设我们在客户端定义了一个回调函数handleResponse，服务端返回的数据应该类似于handleResponse({"name":"张三","age":20});。

以上就是"原生js实现ajax请求和JSONP跨域请求操作示例"的完整攻略。