javascript原生ajax写法分享

下面是“javascript原生ajax写法分享”的完整攻略：

什么是ajax？

Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，利用异步传输数据，实现网页无需刷新就能实现获取和更新数据。它最大的优点就是在不刷新页面的情况下与服务器端进行通信，提高用户的交互体验。

原生ajax实现步骤

步骤一：创建XMLHttpRequest对象

在Javascript中，原生提供了XMLHttpRequest对象，用于与服务器交换数据。创建请求的第一步就是创建一个XMLHttpRequest对象。XMLHttpRequest包含了从服务器请求数据的方法和属性。

var xhr = new XMLHttpRequest();

步骤二：向服务器发送请求

在创建好XMLHttpRequest对象后，我们需要通过open()方法来设置如何发送请求以及请求的目标地址。open()方法接受三个参数，第一个参数是http method，第二个参数是请求的url，第三个参数指定请求是否为异步模式。

xhr.open('GET', '/api/data', true);

步骤三：处理响应

在得到服务器响应后，我们需要对响应进行处理，通常是将返回的数据展示在页面中。回调函数会在接收到服务器响应并且状态码正确（比如200）的时候被触发。

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

步骤四：发送请求

所有的参数设置和处理函数设置完毕后，使用send()方法向服务器发送请求。

xhr.send();

示例1：使用原生ajax获取json数据

下面是一个使用XMLHttpRequest获取服务器上存储在JSON文件中的数据的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

示例2：使用原生ajax提交表单数据

下面是一个使用XMLHttpRequest将表单数据提交到服务器的示例：

var form = document.getElementById('myForm');
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/form');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(new FormData(form));

以上就是如何使用原生的ajax进行数据交互的详细攻略。希望能够对你有所帮助！