当需要通过Javascript与服务器进行异步数据交互时，就需要使用AJAX技术。本篇攻略将提供一个基本的AJAX请求代码示例以及一个带参数的AJAX请求代码示例。
AJAX通过XMLHttpRequest对象与服务器进行数据交互。在Javascript中，可以通过以下代码创建XMLHttpRequest对象：
var xhr = new XMLHttpRequest();
设置请求参数，包括请求方式、请求地址、请求是否异步等等。以下代码展示了GET方式请求一个JSON数据的示例：
xhr.open('GET', 'http://example.com/json', true);
xhr.responseType = 'json';
使用XMLHttpRequest对象的send方法来发送异步请求，以下是一个完整的AJAX请求示例：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/json', true);
xhr.responseType = 'json';
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.response);
} else {
console.error('请求出错');
}
};
xhr.send();
以上示例展示了一个基本的AJAX请求的步骤，包括创建XHR对象、设置请求参数和发送请求。在XHR对象的onload事件中，分别判断请求是否成功，如果成功则输出响应结果。
在实际应用场景中，通常需要传递参数给服务器，以下是一个使用POST方式请求带参数的AJAX请求示例：
同样需要创建XMLHttpRequest对象，使用以下代码创建：
var xhr = new XMLHttpRequest();
设置请求参数，包括请求方式、请求地址、请求是否异步等等。以下代码展示了POST方式请求一个JSON数据的示例：
xhr.open('POST', 'http://example.com/json', true);
xhr.setRequestHeader('Content-Type', 'application/json');
在设置请求参数时，还需要设置请求头部信息，因为是 POST 请求，需要设置请求头部的 Content-Type 值为 application/json。当传递的参数为 JSON 类型时，Content-Type 必须设定为 application/json，否则无法解析参数。
在发送请求前，还需要首先将传递的参数序列化为 JSON 字符串，然后在调用send方法时传入该字符串。以下是一个完整的AJAX请求示例：
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/json', true);
xhr.setRequestHeader('Content-Type', 'application/json');
var data = {
"name": "小明",
"age": 22
};
xhr.send(JSON.stringify(data));
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.response);
} else {
console.error('请求出错');
}
};
以上示例展示了一个POST方式的AJAX请求的步骤，包括创建XHR对象、设置请求参数（包括设置请求头部）和发送请求（传入 JSON 字符串）。在XHR对象的onload事件中，分别判断请求是否成功，如果成功则输出响应结果。
本文链接：http://task.lmcjl.com/news/10955.html