首先,我们需要创建一个 XMLHttpRequest 对象,这是实现原生 Ajax 的基础。在发送 Ajax 请求之前,我们可以使用一系列的参数来配置我们的请求。其中,最常用的参数包括 URL、method、async、data 和 headers。
首先是 URL 参数,用于指定请求的目标地址。例如,我们想要从服务器获取一条新闻的内容,可以使用如下的代码:
var xhr = new XMLHttpRequest(); xhr.open("GET", "http://example.com/news", true); xhr.send();
在这个例子中,我们将 URL 参数设置为 "http://example.com/news",表示我们向这个地址发送了一个 GET 请求。接下来是 method 参数,用于指定请求的方法。常见的方法有 GET 和 POST。GET 用于获取数据,而 POST 用于提交数据。例如,如果我们要向服务器提交一个表单,可以使用如下的代码:
var xhr = new XMLHttpRequest(); xhr.open("POST", "http://example.com/submit", true); xhr.send(formData);
在这个例子中,我们将 method 参数设置为 "POST",表示我们要向服务器提交数据。
接下来是 async 参数,用于指定请求是否是异步的。异步请求不会阻塞浏览器,并且可以在请求发送后继续执行其他操作。如果我们希望在接收到服务器响应后执行某些操作,可以将 async 参数设置为 true。例如:
var xhr = new XMLHttpRequest(); xhr.open("GET", "http://example.com/data", true); xhr.onload = function() { // 请求完成后的回调函数 console.log(xhr.responseText); }; xhr.send();
在这个例子中,我们将 async 参数设置为 true,表示请求是异步的。当服务器响应返回后,我们通过设置 xhr.onload 属性来指定一个回调函数,在这个函数中可以处理服务器返回的数据。
data 参数用于指定请求的数据,通常用于 POST 请求。我们可以将需要提交的数据按照一定的格式传递给服务器。例如,我们要向服务器提交一个 JSON 对象,可以使用如下的代码:
var xhr = new XMLHttpRequest(); xhr.open("POST", "http://example.com/submit", true); xhr.setRequestHeader("Content-Type", "application/json"); var data = { username: "john", password: "password123" }; xhr.send(JSON.stringify(data));
在这个例子中,我们使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串,并将它作为请求的数据发送给服务器。
最后,headers 参数用于设置请求头信息。请求头可以包含一些额外的信息,比如用户身份验证信息、语言偏好等。我们可以通过调用 xhr.setRequestHeader() 方法来设置请求头。例如:
var xhr = new XMLHttpRequest(); xhr.open("GET", "http://example.com/data", true); xhr.setRequestHeader("Authorization", "Bearer token123"); xhr.send();
在这个例子中,我们设置了一个 Authorization 请求头,用于传递用户的访问令牌。
通过以上示例,我们了解了原生 Ajax 中常用的几个参数。URL 参数用于指定请求的目标地址,method 参数用于指定请求的方法,async 参数用于指定请求是否是异步的,data 参数用于指定请求的数据,headers 参数用于设置请求头信息。通过合理地使用这些参数,我们可以灵活地控制我们的 Ajax 请求,实现各种不同的功能。