Ajax的学习——get和post请求

要点：

1、AJAX的简单介绍
2、传统网页请求响应模式和AJAX模式的对比
3、AJAX的优点和缺点
4、AJAX的基本使用

---

AJAX的简单介绍

AJAX（ Asynchronous JavaScript and XML）AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。本质上是一种浏览端的技术。

---

传统网页请求响应模式和AJAX模式的对比

传统网页请求响应模式

AJAX请求模式

对比：在传统模式下，用户一旦向服务器发送了请求，则用户在界面不能进行其他操作，必须等服务器把数据处理完，返回给浏览器，才能进行其他的操作，非常影响用户体验。但是在AJAX的请求模式下，向服务器发送了请求，而用户可以继续留在当前页面进行操作，不影响用户的使用，体验比传统模式下有较大的提升。

---

AJAX的优点和缺点

1、Ajax在本质上是一个浏览器端的技术
2、Ajax技术之主要目的在于局部交换客户端及服务器间之数据
3、Ajax主要依靠XMLHttpRequest 的特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)
4、与服务器之间的沟通，完全是透过Javascript 来实行
5、使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序
6、AJAX 就是运用Javascript 在后台去跟服务器请求资料，最后再由Javascript 或DOM 来呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，对于用户来说，体验会更加好。

---

AJAX的基本使用

注意：

• 为XMLHttpRequest对象设置请求参数
  1.GET方式
  xhr.open(“GET”, “url?id=12&name=hello”, true);//使用异步传输
  xhr.open(“GET”, “url?data”, false);//不使用异步传输
  xhr.setRequestHeader(“If-Modified-Since”, “0”); //请求可以设置浏览器不使用缓存

  2.POST方式：
  xhr.open(“POST”, “url”, true);//使用异步传输
  xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);//添加请求头
  xhr.send(“id=1&num=123”);//POST方式

• 异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件. 在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。 如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。 如果已经准备好，就继续往下执行；

前台JS代码

            //AJAX的Get请求
            document.getElementById("GetDateTime").onclick = function()
            {
                var xhr;
                if(XMLHttpRequest)
                {
                    xhr = new XMLHttpRequest();
                }
                else {
                    //旧版本IE的创建方法
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open("get", "GetDate.ashx?name=123", true);
                xhr.send();

                xhr.onreadystatechange=function()
                {
                    if(xhr.readyState == 4 && xhr.status == 200)
                    {
                        alert(xhr.responseText);//在GetDate.ashx中返回当前时间
                    }

                }

            }
            //AJAX的post请求
            document.getElementById("PostQuery").onclick = function () {
                var xhr;
                if (XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                }
                else {
                    //旧版本IE的创建方法
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open("post", "GetName.ashx", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send("name=tom&pwd=456465");
                xhr.onreadystatechange = function ()
                {
                    if(xhr.readyState == 4 && xhr.status == 200)
                    {
                        alert(xhr.responseText);//在GetName.ashx中返回传过去的name
                    }
                }
            }
        }

XMLHTTPRequest常用方法

异步对象常用属性

readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
0：未初始化。对象已经创建，但还未初始化，即还没调用open方法；
1：已打开。对象已经创建并初始化，但还未调用send方法；
2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
4：已加载。所有数据接收完毕

---

PS:博文中如有什么不对的地方恳请大家指出，谢谢~