Ajax技术

前言：

何为Ajax：一种在无需重新记载整个网页的情况下，能够更新部分网页的技术；

简言之：异步JavaScript+XML（创建交互式网页应用的一些列开发技术）

1：web标准XHTML+CSS的表示

2：使用Dom进行动态显示及交互

3：使用XML和XSLT进行数据交换及相关操作

4：使用XMLHttpRequest进行异步数据查询、检索

--------------简单理解为：JavaScript+XMLHttpRequest+CSS+服务器端的集合---------------

内容：

本质：浏览器端的技术

目的：主要用在局部交换客户端及服务器之间的数据

核心：XMLHttprequest，在于能够不重新刷新页面（清刷新）载入整个版面来更新资料；当然与服务器间通过JavaScript来实行

性能：之所以为什么会快？是因为传输的数据量比较小，相比于之前的普通网页请求来说，仅仅需要将请求的数据发送到服务器，而不是整个文档（页面），接收的时候，也不需要从服务器端返回整个页面内容，而仅仅返回需要的数据即可；减少了浏览器渲染的操作。

----------------了解何为“交互式”?势必与普通的网页请求不一样！---------------------------------------------

传统的传输数据操作：

Ajax技术的传输操作：

示例：

              //开始通过AJAX向服务器发送请求.
                var xhr;
                if (XMLHttpRequest) {//表示用户使用的高版本IE，谷歌，狐火等浏览器
                    xhr = new XMLHttpRequest();
                } else {// 低IE
                   xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }
<!------------------------get发送------------------------------------------->
                xhr.open("get", "GetDate.ashx?name=zhangsan&age=12", async(true/false));
                xhr.send();//开始发送

<!------------------------Post发送------------------------------------------->
                //xhr.open("post", "GetDate.ashx", true);
                //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                //xhr.send("name=zhangsan&age=12");//开始发送


                //回调函数:当服务器将数据返回给浏览器后，自动调用该方法。
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {//表示服务端已经将数据完整返回，并且浏览器全部接受完毕。
                        if (xhr.status == 200) {//判断响应状态码是否为200.

                        //如果获得来自服务器的相应，使用XMLHttpRequest对象的responseText活responseXML属性
                            alert(xhr.responseText);
                           
                        }
                    }
                }

后记：

虽然是这么讲解Ajax，但是以后这么用的机会会很少，本篇博客侧重于理论，今后Ajax会和Jquery一块使用的，而且用法也没有这么麻烦，毕竟JQ可是封装了大量的常用的JS函数库的。

$("#btnGet").click(function(){
                $.get("GetDate.ashx", { "name": "lisi", "pwd": "123" }, function (data) {
                    alert(data)
                });

            });

            $("#btnPost").click(function () {
            //因为.aspx的文件，会先执行.aspxz.cs中Page_Load，然后再执行.aspx的HTML文件，所以需要在Page_Load中增加一行代码Response.end();
                $.post("ShowDate.aspx", { "name": "lisi", "pwd": "123" }, function (data) {
                    alert(data)
                })
            });


            $("#btnAjax").click(function () {

                $.ajax({
                    type: "POST",
                    url: "GetDate.ashx",
                    data: "name=John&location=Boston",
                    success: function (msg) {
                        alert("Data Saved: " + msg);
                    }
                });

            });