使用原生ajax进行提交实例详解
时间: 2023-05-08 12:00:16 浏览: 126
Ajax (Asynchronous JavaScript and XML) 是一种在不刷新整个页面的情况下,使用 JavaScript 发起异步请求,获取或提交数据的技术。原生 Ajax 是指不依赖任何 JavaScript 框架或库,纯粹使用原生 JavaScript 实现 Ajax。下面是一个使用原生 Ajax 进行提交的实例详解。
首先需要创建一个 XMLHttpRequest 对象:
```
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+、Firefox、Chrome、Opera、Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6、IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
```
然后设置请求方式和请求地址:
```
var url = "submit.php"; // 提交的处理程序
var method = "POST"; // 提交的方式,可以是 GET 或 POST
xmlhttp.open(method, url, true); // true 表示异步请求
```
接着设置请求头:
```
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
```
这里使用了 application/x-www-form-urlencoded 格式。如果需要提交 JSON 格式的数据,则设置为:
```
xmlhttp.setRequestHeader("Content-type", "application/json");
```
接下来设置回调函数:
```
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 请求成功,处理返回的数据
console.log(this.responseText);
}
};
```
当 readyState == 4 时,表示请求已完成;status == 200 表示请求成功。这里只是简单地输出了返回的数据,可以根据具体情况进行处理。
最后发送请求,提交数据:
```
var data = "name=John&age=18"; // 提交的数据,可以是表单数据或 JSON 数据
xmlhttp.send(data);
```
这里提交了两个字段,name 和 age,可以根据实际情况修改。当使用 GET 方式提交时,数据需要拼接到 URL 中,例如:
```
var url = "submit.php?name=John&age=18";
xmlhttp.open("GET", url, true);
xmlhttp.send();
```
以上就是使用原生 Ajax 进行提交的实例详解。需要注意的是,原生 Ajax 还需要处理一些兼容性和安全性问题,例如 IE6、7 下不能并发多个 Ajax 请求,跨域请求需要使用 JSONP 或设置 CORS 等。因此,如果条件允许,建议使用现代的 JavaScript 框架或库来简化 Ajax 的操作。