ajax的应用原理及基本用法

ps:错误的地方或者不足的地方请大家多多指教

1. ajax 是干什么的？

以前我们登录一个网页，输入帐号和密码，通过提交按钮向服务器发送请求，然后客户端页面进行刷新，我们进入到正式的网站页面。但是，如果网站的访问量过大，页面进行刷新的时候就会特别慢，会造成用户体验不佳。
ajax能帮我们解决这个问题 。
按照百度上的解释：
1、AJAX 是一种用于创建快速动态网页的技术。
2、通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
3、传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
这里我们通过一个例子来解释上面的意思。
登录到我要自学网，这个时候你还处于未登录的状态。

登陆后

对比两张图，你会发现登录前后在页面没有整体刷新的情况下， 只有页面最顶上那一栏发生了变化。这就ajax的作用，不需要刷新整个页面就可以动态更改页面上的数据。
这个例子可能有问题。因为在登录的过程中会有一个跳转页面出现，不过我觉得这个跳转页面可能是js代码的效果，并不是向服务器发出请求数据的结果

2. ajax的基本写法

<script type="text/javascript">
        //第一步，创建对象
        var xhr = new XMLHttpRequest();
        //第二步，连接服务器
        xhr.open('GET',url,true);//“GET”表示请求的方式。URL指向服务器请求数据的路径。true表示异步处理。
        //第三步，向服务器发送请求
        xhr.send(null);
        /*
        我们先了解一下readyState的属性。
        readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。这是 readyState 属性可能的值：状态 描述 
        0 请求未初始化（在调用 open() 之前） 
        1 请求已提出（调用 send() 之前） 
        2 请求已发送（这里通常可以从响应得到内容头部） 
        3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） 
        4 请求已完成（可以访问服务器响应并使用它）
        */
        //第四步 请求完成，响应准备就绪。
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4) {//表示请求已完成
               if (xhr.status==200) {//xhr.status==200表示数据获取成功。
                   alert(xhr.responseText);//页面输出返回的数据。responseText可以获取服务器返回的数据。
               }else{
                   alert(xhr.statusText);//未能成功获取数据则输出该结果。
               }
            }
        }

（大家可以看我下一篇ajax实例代码，会有实例代码和效果展示）
这是ajax的 套路写法。

3、ajax的应用原理。

页面通过后台js代码向服务器发送请求，服务器返回数据到这段代码中。这段会对数据进行处理，动态改变页面的某一部分，这样避免了页面的重新刷新。
简单点来说就是我要更新页面的某一部分，但是没有向服务器重新请求页面，而是后台的js代码与服务器进行交流，js代码获取数据后动态修改页面。
【我的下一篇会具体发布ajax应用的实例代码】