原生JS异步提交XMLHttpRequest对象内建函数理解以及使用

 

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。因此我们可以使用该方法去把数据提交到服务器。

XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。这样一来我们就可以获取从服务器反馈回来的信息。并根据这些信息做出某些反应。

要使用XMLHttpRequest这个对象里面的方法，我们就必须声明该对象，对应浏览器版本的不同，该对象分为两种声明方法。

在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。

两种声明方法所达到的效果是相同的,当加上这句判断，无论什么版本的浏览器都能创建出XMLHttpRequest对象，新浏览器用新的创建方法，就浏览器用旧的创建方法。以保证XMLHttpRequest对象成功被声明。

XMLHttpRequest对象成功被声明之后我们就可以使用对象里面的方法了，常用的方法有：onload(提交成功,并且成功返回数据所执行的函数) onerror(提交失败所执行的函数) open(提交方法，以及提交路径) send (提交的内容体)

使用方法格式：xmlhttp.onload=function(){};

思路：获取数据，打包数据，然后使用对象的提交方法去进行提交，使用成功方法，去获取成功之后所要对返回的数据进行操作，使用失败方法则能知道，是否成功提交，或服务器是否响应，

下面是使用实例

使用实例:

这里的代码是先声明一个盛放数据的变量，用FormData对象来接收，然后往对象里面添加数据，数据的存放格式是以json格式来进行存储，第一个变量是，服务器接收数据的字段（键），第二个变量是获取的数据，这些数据我已经声明但没有放出来，其实是已经声明了的。

数据有了，就创建XMLHttpRequst方法来进行对数据的提交了，提交过来的结果如下图.

可以看到数据都能对应得上，因为传过来的数据的键对上了服务器所接收的字段，这样数据就能准确的匹配了，数据成功传递，也就代表用XMLHttpRequst方法来提交数据是完全没有问题的，在不依赖任何的插件前提下，我们也可以进行数据的提交，XMLHttpRequst分工明确，可以直观明了地知道数据地走向，以及异步提交数据，这样的方法不但可以在不用刷新页面地前提下对数据进行提交。