Ajax的简单运用

什么是Ajax?

   Ajax全称Asynchronous JavaScript and XML（异步的JavaScript和XML），它不是某种编程语言，而是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

   Ajax有两种进程：同步与异步

      同步：是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去；

      异步：是指进程不需要一直等待下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

用AJAX—创建XMLHttpRequest对象

XMLHttpRequest对象是用于在后台与服务器交换数据的

创建一个getPersonData()的类，通过XMLHttpRequest对象从控制器中获取person数据，使用ActiveXObject对IE5,IE6进行兼容。

创建一个PersonData，给代码中的xhr获取PersonData中的内容

使用xhr.open获取数据，并用xhr.send()发送数据

用if语句判断，当readyState等于4且status等于200时，表示响应已就绪。将json格式的字符串转换为js对象

getPersonData()完整的代码：

function getPersonData() {

            var xhr;

            if (window.XMLHttpRequest) {

                xhr = new XMLHttpRequest();

            } else {

                xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }

            xhr.open("get", "/Ajax/PersonData", true);

            xhr.send();

            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4 && xhr.status == 200) {

                    var str = xhr.responseText;

                    var person = JSON.parse(str);

                    console.log(person);

                    document.getElementById("txtName").value = person.name;

                    document.getElementById("cboSex").value = person.sex;

                    document.getElementById("txtAddress").value = person.address;

                }

            }

        }

用get方法，通过XMLHttpRequest对象向控制器添加表单数据，用setRequestHeader()指定响应头

function getData() {

            var txtName = document.getElementById("txtName").value;

            var txtSex = document.getElementById("cboSex").value;

            var txtAddress =

document.getElementById("txtAddress").value;

            var strData = "name=" + txtName + "&sex=" + txtSex + "&address=" + txtAddress;

            var xhr;

            if (window.XMLHttpRequest) {

                xhr = new XMLHttpRequest();

            } else {

                xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }

            xhr.open("get", "/Ajax/receiveData", true);

            //指定响应头

            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            xhr.send(strData);

            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4 && xhr.status == 200) {

                    console.log(xhr.responseText);

                }

            }

}

用post方法，通过XMLHttpRequest对象向控制器添加表单数据，用setRequestHeader()指定响应头

function postData() {

            var txtName = document.getElementById("txtName").value;

            var txtSex = document.getElementById("cboSex").value;

            var txtAddress = document.getElementById("txtAddress").value;

            var strData = "name=" + txtName + "&sex=" + txtSex + "&address=" + txtAddress;

 

            var xhr;

            if (window.XMLHttpRequest) {

                xhr = new XMLHttpRequest();

            } else {

                xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }

            xhr.open("post", "/Ajax/receiveData", true);

            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            xhr.send(strData);

            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4 && xhr.status == 200) {

                    console.log(xhr.responseText);

                }

            }

        }