Ajax的用法

Ajax本质是一个浏览器端的技术，主要目的用户客户端和服务器端之间的数据交换。主角是XMLHttpRequest。

一般分为四个步骤：1创建对象；2创建请求；3注册时间；4发送请求。

1.创建XMLHttpRequest对象；

        //创建XMLHttpRequest 对象
        function createXHR() {
            var request;
            if (XMLHttpRequest) {
                request = new XMLHttpRequest(); //Chrome firefox
            } else {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return request;
        }

2.创建请求；

window.onload = function () {
            document.getElementById("btnLogin").onclick = function () {

                var inputName = document.getElementById("txtName");//得到用户名
                var inputPwd = document.getElementById("txtPwd");//得到用户的密码
                    var xhr = createXHR();                    //1创建异步对象
                    xhr.open("post", "AjaxLogin.aspx", true); //2设置请求参数
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //添加请求头

3.设置回调函数

                    xhr.onreadystatechange = function () {    //3设置回调函数
                        if (xhr.readyState == 4) {
                            if (xhr.status == 200) {//如果服务器发回的状态码为200，则代表服务器正常
                                var res = xhr.responseText; //获取服务器发回的文本
                                if (res == "OK") {
                                    window.location = "index.aspx";
                                } else if (res == "error") {
                                    showMsg("用户名和密码错误");
                                } 
                            }
                        }

4.发送请求

  xhr.send("userName=" + inputName.value + "&userPwd=" + inputPwd.value);

一般Ajax是以json的形式进行数据的发送的。json一般分为一下两种的方式存在。

在json中有两种存数据的形式：对象和数组。
1对象：  var o={"lw":"ad","dsd","asdgf"};
2数组：var json=[{"asdf":"234","adsf":23434},{"asdf":"234","adsf":23434},{"asdf":"234","adsf":23434}]

全部的代码如下：

<script type="text/javascript">
        window.onload = function () {
            document.getElementById("btnLogin").onclick = function () {

                var inputName = document.getElementById("txtName"); //获得文本框里边的值
                var inputPwd = document.getElementById("txtPwd");


                function createXHR() {                                 //创建XMLHttpRequest 对象
                    var request;
                    if (XMLHttpRequest) {
                        request = new XMLHttpRequest(); //Chrome firefox
                    } else {
                        request = new ActiveXObject("Microsoft.XMLHTTP"); //IE浏览器
                    }
                    return request;
                }

                var xhr = createXHR();                    //1创建异步对象
                xhr.open("post", "AjaxLogin.aspx", true); //2设置请求参数
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //添加请求头
                xhr.onreadystatechange = function () {    //3设置回调函数
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {          //如果服务器发回的状态码为200，则代表服务器正常
                            var res = xhr.responseText;   //获取服务器发回的文本
                            if (res == "OK") {
                                window.location = "index.aspx";
                            } else if (res == "error") {
                                showMsg("用户名和密码错误");
                            }
                        }
                    }
                    xhr.send("userName=" + inputName.value + "&userPwd=" + inputPwd.value); //发送请求
                }
            }
        }     
    </script>