Ajax JavaScript的异步提交

 

1. 我们用bootstrap来布局就不用写样式，所以我们先引入bootstrap框架，放一个div类名为container，再在里面写form表单，在表单里我们先放四个div分别放姓名，性别和地址还有按钮，并且给他们两个相同的类为form-group form-row，有了这两个类就把样式都写好了。
2. 在每个的div中放一个label标签（除了放按钮的div），我们把文本放在label标签内，并且给label标签三个相同的类form-check-label col-1 text-center。
3. 在姓名的div内再放一个input标签，让它里面的type属性为text，name属性为name，id为name，class为form-control col-11。
4. 在性别的div内再放一个select标签，让它里面的name属性为sex，id为sex，class为form-control col-11，在select标签里面放三个option标签，里面的文本分别为请选择，男，女，并且他们对应的value值分别为0，男，女。
5. 在地址的div内再放一个text area标签，让它里面的name属性为address，id为address，class为form-control col-11。
6. 在最后一个div内再放八个button标签，他们的id分别为btnAjax，btnAjaxPost，btnGet1，btnGet2，btnPost1，btnPost2，btnGetJson1，btnGetJson2，其他样式都差不多，就是颜色不同 。注：οnsubmit="return false;" 禁止表单自动提交，from表单有这个属性只有JavaScript的方法才能实现手动提交，jQuery不能，反之都能实现手动提交

 

首先我们来写一个用Ajax从控制器中获取数据。

1. 我们给第一个button按钮一个点击事件，再到里面声明一个变量ajax但是不赋值，我们要创建一个XMLHttpRequest对象，但是有一些浏览器它没有这个对象所以在这里我们要进行一个判断，如果浏览器有XMLHttpRequest对象就把new XMLHttpRequest();赋值给ajax，否则就把new ActiveXObject("Microsoft.XMLHTTP");赋值给ajax。

判断完了我们就来发送请求，用ajax里面的open方法来写，在open方法里面有三个参数，第一个是提交方式，第二个是提交的路径，第三个是判断是否是异步发送的请求，如果为true表示异步，如果是false表示同步，请求完了就用ajax里面的send方法来发送，open里的路径是我们在控制器里写的一个方法，

public ActionResult index2()

{

string str = "{\"name\":\"丁总\",\"sex\":\"女\",\"address\":\"江西丰城\"}";

            return Content (str);

            //return json(str,JsonRequestBehavior.AllowGet);   

  }

1. 在发送请求后我们要用一个方法来接收数据，所以我们要在点击事件里面再写一个事件，onreadystatechange：这个事件为存储函数（或函数名），每当readyState属性发生改变时触发。然后在里面写一个判断，如果当readyState=4且status==200时，表示响应已就绪。
2. readyState :存有XMLHttpRequest的状态。从0到4发生变化

                    0:请求未初始化

                    1：服务器连接已建立

                    2：请求已接收

                    3：请求处理中

                    4：请求已完成，且响应已就绪

4.我们先声明一个变量ajax2将从json格式的字符串转化成js对象赋值给他，var ajax2 = JSON.parse(ajax.responseText);里面的responseText属性为获得字符串形式的响应数据是XMLHttpRequest对象里的其中一个属性，这个对象里面还有另一个属性responseXML :获得XML形式的响应数据，这样我们就能获取控制器中的数据了，我们现在要做的是将获取的数据在表单中显示出来，所以我们要获取表单中的value值并把我们获取的值赋值给它，document.getElementById("name").value = ajax2.name;

document.getElementById("sex").value = ajax2.sex;

document.getElementById("address").value = ajax2.address;这样我们就写完了Ajax的获取。下次我们再来写post提交。