原生JavaScript实现AJAX是一种创建动态网页的技术，它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本文将详细介绍如何使用原生JS实现AJAX以及处理跨域请求的问题。
实现AJAX的基本步骤如下：
1. **获取XMLHttpRequest对象**：这是AJAX的核心，它提供了一个与服务器通信的接口。在JavaScript中，可以通过`new XMLHttpRequest()`来创建一个新的XMLHttpRequest实例。
2. **设置状态监听函数**：通过`onreadystatechange`属性，我们可以定义一个函数来监听XMLHttpRequest对象的状态变化。当`readyState`属性值变为4（表示请求已完成）且`status`属性值为200（表示请求成功）时，说明数据已准备好接收。
```javascript
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
// 请求成功后的处理代码
}
};
```
3. **打开一个连接**：使用`open`方法来初始化一个请求。通常格式为`open(method, url, async)`，其中`method`是HTTP请求方法（如GET或POST），`url`是请求的地址，`async`是一个布尔值，表示是否异步执行请求。
```javascript
ajax.open("GET", "h51701.json", true);
```
4. **发送请求**：通过`send`方法发送请求。如果不需要发送数据，可以传入`null`。
```javascript
ajax.send(null);
```
5. **接收响应数据**：在状态监听函数中，可以使用`responseText`或`responseXML`属性来获取服务器返回的数据。如果是JSON格式，可能需要使用`JSON.parse`将其转换为JavaScript对象。
```javascript
if (ajax.readyState == 4 && ajax.status == 200) {
var response = JSON.parse(ajax.responseText);
// 使用response处理数据
}
```
接下来，我们讨论AJAX的跨域请求。由于浏览器的安全策略，同源策略限制了不同源之间的HTTP请求。为了实现跨域，我们可以采取以下方法：
1. **后台设置CORS**：在服务器端（如PHP）设置响应头`Access-Control-Allow-Origin`，指定允许哪些来源的请求。`*`表示允许所有源。
```php
header("Access-Control-Allow-Origin:*");
```
2. **JSONP**：JSONP（JSON with Padding）是一种绕过同源策略的方法。利用`<script>`标签可以跨域请求资源的特性，将回调函数名和JSON数据一起返回，由前端调用回调函数处理数据。
- **后台返回**：服务器返回一个包含回调函数和JSON数据的脚本，例如`callBack({"key": "value"})`。
- **前端设置回调**：在前端页面预先定义好回调函数，如`callBack`，当`<script>`标签加载完返回的脚本后，会自动执行该回调函数。
```javascript
function callBack(data) {
console.log(data);
}
// 创建script标签并设置src
var script = document.createElement('script');
script.src = 'http://127.0.0.1/json.php';
document.head.appendChild(script);
```
3. **jQuery的AJAX与JSONP**：jQuery提供了更方便的API来实现JSONP。设置`dataType`为`'jsonp'`，jQuery会自动处理回调函数名的传递和调用。
```javascript
$.ajax({
url: 'http://127.0.0.1/json.php',
dataType: 'jsonp',
success: function(data) {
console.log(data);
}
});
```
总结，原生JavaScript实现AJAX包括创建XMLHttpRequest对象、监听状态变化、打开连接、发送请求以及接收响应。而处理跨域问题则可通过后台设置CORS或使用JSONP方法。理解这些基础知识对于开发交互丰富的Web应用至关重要。
