原生Ajax理解（1）

Ajax用来解决什么问题？

AJAX解决的问题就是“无刷新更新页面”，用传统的HTML表单方式进行页面的更新时，每次都要将请求提交到服务器，服务器返回后再重绘界面，这样界面就会经历：提交→变白→重新显示这样一个过程，用户体验非常差，使用AJAX则不会导致页面重新提交、刷新。

Ajax的技术核心是XMLHttpRequest对象（简称XHR）;

XHR为向服务器发送请求和解析服务器响应提供了流畅的接口；能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据；

虽然名字中包含XML的成分，但Ajax通信鱼数据格式无关；这种技术就是无刷新页面即可从服务器取得数据，但不一定是XML数据；

使用Ajax发送请求需要如下几步：
1、创建XMLHttpRequest对象
2、准备发送
3、执行发送动作
4、指定回调函数

如下是一个简单的AJAX请求模板，后面将进行简单的封装以实现浏览器的兼容性

            // 使用Ajax发送请求需要如下几步：
            // 1、创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 2、准备发送
            xhr.open('get','./data.php?username='+username+'&password='+password,true); //username及password为需要请求或者提交的数据
            // 3、执行发送动作
            xhr.send(null);
            // 4、指定回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        var data = xhr.responseText;
                    }
                }
            }

1.新建一个XMLHttpRequest对象

XMLHttpRequest不支持低版本的ie浏览器，可以使用ActiveXObject来支持对低版本的浏览器的兼容性；
我们将此进行简单的封装：

            var xhr = null;
            //判断浏览器的兼容性
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();//标准
            }else{
                xhr = new ActiveXObject("Microsoft");//IE6
            }

2.发送

使用XHR对象，要调用的第一个方法是open()，接收三个参数
参数一：请求方式（get获取数据；post提交数据）
参数二：请求地址URL
参数三：同步(true)或者异步(false)标志位，默认是true表示异步，false表示同步

说明：
1.URL相对于执行代码的当前页面（也可以是使用绝对路径）；
2.调用open()方法并不会真正发送请求，而只是启动一个请求以备发送；

2.1 get请求方式

如果是get请求那么请求参数必须在url中传递， encodeURI()用来对中文参数进行编码，防止乱码

            var param = 'username='+username+'&password='+password;
            xhr.open('get','data.php?'+encodeURI(param),true);  //get.php为自定义服务器数据（后面的php文件均为,将不再重复说明）
            // 3、执行发送动作
            xhr.send(null);//get请求这里需要添加null参数

2.2post请求方式

post请求参数通过send传递，不需要通过encodeURI()转码，必须设置请求头信息：

             var param = 'username='+username+'&password='+password;
            xhr.open('post','data.php',false);
            // 3、执行发送动作
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(param);//post请求参数在这里传递，并且不需要转码

3.回调函数

函数调用的条件就是readyState状态发生变化，而onreadystatechange事件则是用来监听每次状态变化后的readyState的值，从而实现响应后的操作；

readyState的状态值:

			1-----------表示已经发送了请求
            2-----------浏览器已经收到了服务器响应的数据
            3-----------正在解析数据
            4-----------数据已经解析完成，可以使用了

通常我们支队readyState值为4的阶段感兴趣，因为这时所有数据都已经就绪；虽然服务器返回的数据已经可以使用了，但是这个数据不一定是正常的；

我们仍然需要通过Http状态码来判断，我们的响应是否成功；

http的常见状态码（ *.status），例子中为 xhr.status

			200表示响应成功
            404没有找到请求的资源
            500服务器端错误

我们通常通过200表判断服务器返回的数据是正常的，不是200的话表示数据是错误的

            // 4、指定回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        alert(xhr.responseText);
                    }
                }
            }
            

此处未研究回调函数返回的数据格式，将在下一篇文章中进行详细分析XML与JSON格式数据；

4.总结

此处做个总结，以post请求方式，将整个Ajax请求过程串联起来：

html部分：

    <form>
        用户名：
        <input type="text" name="username" id="username"><span id="info"></span>
        <br> 密码：
        <input type="text" name="password" id="password">
        <input type="button" value="登录" id="btn">
    </form>

js部分：

  <script type="text/javascript">
    window.onload = function () {
      var btn = document.getElementById('btn');
      btn.onclick = function () {
        var uname = document.getElementById('username').value;
        var pw = document.getElementById('password').value;

        // 1、创建XMLHttpRequest对象
        var xhr = null;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest(); //标准
        } else {
          xhr = new ActiveXObject("Microsoft"); //IE6
        }

        // 2、准备发送
        var param = 'username=' + uname + '&password=' + pw;
        xhr.open('post', 'data.php', true);

        // 3、执行发送动作
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(param); //post请求参数在这里传递，并且不需要转码

        // 4、指定回调函数
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              alert(xhr.responseText);
            }
          }
        }

      }
    }
  </script>