AJAX异步-向服务器提交数据

这篇文章是AJAX异步文章的附加一：

主要是讲向服务器提交数据，发送数据之后，服务器接收到响应之后他要做一个处理，上一次我们把提交的地址改到了PersonData()这个需要转义的方法里面，它主要是返回一个josn格式的字符串回去，返回回去的字符串则是通过XMLHttpRequest对象里面的responseText属性去接收，要在onreadystatechange事件里面去接收，而这个事件是由readyState的一个属性里面的值改变则去触发。

这里还需注意一个status这个属性，他表示整个响应的一个状态码，比如说，状态码是200则表示这个响应是成功的，如果状态码是404则表示未找到某个方法或某个页面

图表 1

图表1是通过XMLHttpRequest对象从控制器中获取person数据

图表1是获取数据，下面讲的是通过XMLHttpRequest对象向我们的控制器中提交表单数据

提交表单数据有两种方式，我们先来讲一下第一种方式：

第一种方式：需要指定响应头只能接收post提交的数据

之前我们在button按钮上面定义了一个postData()的方法，这次我要通过post提交数据

通过XMLHttpRequest对象提交不管通过那种方式提交，都要创建对象（见图表2）注意浏览器兼容性问题

图表 2

XMLHttpRequest对象有一个open（）的方法，里面有三个参数，open(method, URL, async)规定请求的类型、URL以及是否异步处理

1、method：请求的类型：get或post

2、URL：文件在服务器上的位置

3、async：true（异步）或false（同步）

然后在来一个send()的方法，提交数据，你要提交数据这里要指明

我们在去控制器里面定义一个接收参数的方法，接收数据的方式提交表单的四种方法都能接收数据，我们这里用第一种方式通过形参的方式接收数据

你要提交数据，你要提交什么数据，是不是提交你页面上填的数据，点击post提交，它就把数据提交到控制器我们刚刚新建接收数据的方法里面（注意断点）。

在postData()方法里面我们还没有去获取数据，那我们就要在提交之前要把这个数据获取到

这就跟之前的表单提交不一样了，之前的表单填什么就提交什么

这里我们就要获取数据，获取我们在页面上把我们要填写的文本框获取到，数据获取完之后，先定一个变量，把我们获取到的元素进行一个拼接，然后把获取到的数据放到send()里面去提交

注意：在发送请求之前要设置一个相应头，不然则接收不到数据（见图表3）注意：两边的的命名要一样，不然会报错

图表 3

通过post方法把数据提交到新建接收数据的方法里面，数据提交并且有一个返回值，它有返回值了我们就去接收数据

这里接收数据和之前接收数据一样，通过onreadystatechange事件去接收

如果readyState等于4并且status等于200，就直接把接收的值直接输入到控制台里面（全部代码见图表4）

图表 4

这个方法里面就是把我们页面上的数据获取到，然后在提交到控制器里面的一个方法，然后这个方法对字符串进行一些处理

第二种方式：通过创建一个FormData（）

先获取数据

在通过XMLHttpRequest对象来进行响应，注意浏览器的兼容性

再是open和send（open和send与第一种方式一样，要么通过post，要么通过get）

Send（）还可以通过创建一个FormData（），然后把FormData放到send里面，通过这种方式他就不需要设置一个响应头的

前面获取了数据，我们是要把数据通过send（）提交过去，之前我们是把数据拼接成一个字符串，现在我们要把他放在一个FormData里面

之前我们说过有两种方式，一个是拼接到url后面[url?name=zhangdan & sex=nan]

除了拼接到url后面，我们之前还学过formData（）的方式

先来一个formData的变量，在通过new的关键字去创建一个formData（），创建这个对象，再把我要传递过去的数据通过一个append（）的方法，append（）的方法他可以设置两个参数，第一个参数是你要传递过去的键，第二个参数就是一个值，通过键值对的形式把数据全部放到formData（）里面，再把formData放到send（）里面提交过去

把数据提交过去则有一个返回在通过onreadystatechange事件去接收，接收的方式与第一种接收数据的方式一样

（见图表5和图表6）

图表 5

图表 6

这两种方式都是通过post去提交的，这两种方式一个是把传递的参数通过字符串进行一个拼接然后提交过去，字符串这样拼接则需要设置一个响应头，另一种方式，则不需要设置响应头，把数据放在formData里面，然后把我要提交的数据放在send里面提交过去