使用script的src实现跨域和类似ajax效果

使用script的src属性实现跨域和类似ajax效果，是一种常见的解决网页数据获取和展示的方式。下面就具体讲解如何实现。

利用script的src属性解决跨域问题

当在网页中使用script的src属性加载跨域资源时，会受到同源策略的限制，无法直接获取资源。但我们可以通过一些技巧来绕过同源策略的限制，从而实现跨域。

JSONP

JSONP是一种常用的跨域解决方案。它利用script的src属性可以加载跨域资源的特点，将跨域获取的数据作为一个回调函数参数返回到当前页面中。具体实现步骤如下：

1. 在需要获取跨域数据的页面中，定义一个全局函数(callback)，用于接收跨域数据并处理。
2. 使用script的src属性加载跨域资源，其中src属性值为跨域接口的URL，同时将callback函数名作为参数拼接在URL地址后面。
3. 在跨域接口中，使用参数(callback)将需要传递的数据作为回调函数的参数传回当前页面。

示例代码：

<!-- 在当前页面中定义全局函数callback -->
<script>
  function callback(data) {
    console.log(data);
  }
</script>
<!-- 使用script的src属性加载跨域资源，并传递callback函数名作为参数 -->
<script src="http://example.com/data?callback=callback"></script>

// 跨域接口返回数据，通过callback函数将数据传回到当前页面
callback({name: "Tom", age: 25});

CORS

CORS是一种新的跨域解决方案，它允许服务器在响应头中添加一些信息，告诉浏览器当前资源可以被访问。与JSONP相比，CORS具有更好的安全性和灵活性。具体实现步骤如下：

1. 在服务器端，设置响应头Access-Control-Allow-Origin为允许访问的域名。
2. 在客户端，使用XMLHttpRequest对象发送跨域请求，浏览器会自动识别该请求为CORS请求并添加一些额外的请求头。
3. 浏览器收到跨域响应后，会判断响应头中Access-Control-Allow-Origin的值是否为当前请求的域名。如果是，则将跨域响应内容交给XMLHttpRequest对象处理。

示例代码：

• 服务器端

// Node.js代码示例
const http = require('http');

http.createServer((req, res) => {
  // 设置响应头允许跨域访问
  res.writeHead(200, {
    "Access-Control-Allow-Origin": "http://localhost:8000",
    "Access-Control-Allow-Methods": "PUT"
  });
  res.end('Hello CORS');
}).listen(3000);

• 客户端

// 发送CORS请求
var xhr = new XMLHttpRequest();
xhr.open('PUT', 'http://example.com/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({name: 'Tom', age: 25}));

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

利用script的src属性实现类似ajax效果

使用script的src属性可以加载一个JS文件，同时也可以借助这个JS文件中的函数或变量来实现类似ajax的效果。具体实现步骤如下：

1. 准备一个JS文件，其中包含了需要使用的函数或变量。
2. 在需要调用该函数或变量的页面中，使用script的src属性加载该JS文件。
3. 在页面中就可以使用该JS文件中的函数或变量实现类似ajax的效果了。

示例代码：

• 数据文件（data.js）

// 定义需要使用的变量或函数
var data = [1, 2, 3, 4];

function getData() {
  return data;
}

• 页面文件

<!-- 使用script的src属性加载数据文件，同时通过变量和函数实现类似ajax的效果 -->
<script src="data.js"></script>
<script>
  console.log(getData());
  data.push(5);
  console.log(getData());
</script>

以上就是使用script的src属性实现跨域和类似ajax效果的完整攻略。