一、什么是AJAX

AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

　　简单的说就是，AJAX是用来做异步刷新的。

二、最简单的AJAX

　　我们通过一个小demo，用最简单的代码，实现使用原生的Javascript代码，从服务端动态获取时间

　 1.服务端代码

　　这段服务端代码我是使用.NET来写的，这是一个一般处理程序　　

public class TimeHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Write(DateTime.Now.ToLongTimeString());
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

　 2.客户端代码

　　本段JS代码的工作是，当点击一个id为”btnTime"的按钮时，发出AJAX请求，获取服务器时间，如果获取到，就把时间显示到一个H2标签中

<script type="text/javascript">
    window.onload = function () {
        var btn = document.getElementById("btnTime");
        btn.onclick = function () {
            //1.创建异步对象XMLHttpRequest
            var xhr = new XMLHttpRequest();
            //2.打开异步对象，并设置参数
            xhr.open("get", "TimeHandler.ashx", true);
            //3.设置回调函数
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var h2 = document.getElementById("time");
                    h2.innerHTML = xhr.responseText;
                }
            }
            //4.发送异步请求
            xhr.send(null);
        }
    }
</script>

　 3.代码详细说明

　　这是摒去细节属性的，最简单的，原生Javascript版的AJAX调用。下面详细说明代码作用

　　1. XMLHttpRequest对象是AJAX技术的核心对象，正是通过这个对象发出异步请求的，不管是“get”还是“post”方式

　　2. xhr.open(string method, string url , bool async)。这是open方法的原型，该方法需要3个参数

　　　method : http请求方式，比如“get”，“post”

　　　url ：要请求的地址

　　　async：是否使用异步方式，可选值 true / false。正常情况都是选用true，话说如果不用异步方式发出请求，写这坨JS代码岂不是吃饱了撑的。

　　3. onreadystatechange本身是个事件，它是异步对象最重要的一个API。这个事件字面意思就是“当就绪状态发生改变时”触发。

　　　那么首先就要了解什么叫就绪状态（readystate）。

　　 readystate，类似于http的响应状态码。响应状态码是用来标识服务器对于客户端浏览器请求的响应情况，这个 readystate是异步对象XMLHttpRequest从创建，到完整的获取到服务端返回的报文，在此完整过程中的状态；我们可以简单的做个比喻，就好比我们在电商网站上下个订单，然后从下单那1刻起，直到我们接收到货物，我们这个购买活动，都会经历一个：下单 --> 配货 --> 发货 -->待收 --> 已签收，这样5个状态。我们给每个状态都使用1个整数来代表，这样程序就可以根据这个就绪状态readystate，来判断此次异步请求已经走到哪一个步骤了。不过更多情况下，我们通过这个readystate来判断异步请求是否走到了最后1步，也就是XMLHttpRequest对象是否拿到了完整的响应报文。

　　 readystate一共有5个状态，分别是0,1,2,3,4.分别代表的意思如下：　

　　　　 0：未初始化。未调用open()方法

　　　　1：启动。已经调用open()方法，未调用send()方法

　　　　2：发送。已经调用send()方法，未接收到响应

　　　　3：接收。已经接收到部分数据

　　　　4：完成。已经接收到全部数据，可以在客户端使用

　　所以，从这个意义上讲，onreadystatechange就像一个监听程序，它在不停的监听XMLHttpRequest对象的readystate属性，只要该属性一发生变化，此事件就会被触发。

很显然，我们只能在拿到完整的响应报文后，才能做后续的操作（把报文内容，按预定方式展示到浏览器中），因此，我们在该事件的注册响应函数中有以下判断语句：

　　　　if (xhr.readyState == 4 && xhr.status == 200)

　　　其中 xhr.readyState == 4 是用来判断异步对象的就绪状态是不是4，换句话说也就是看是否接收到完整的响应报文了。

　　　但仅仅做这样的判断是不够的，因为不能保证这个报文一定是正确的，比如：服务器返回404错误，这个时候客户端也拿到了完整的响应报文，但显然这个报文不是正确的报文。所以这个if判断条件还需要再加上 xhr.status == 200 。这样表示，获取到的响应报文是服务器响应正确的，并且是完整的获取到了，这样的报文才有意义。

　　4.xhr.send(null)表示发出请求。其实第4步和第3步的代码位置是可以互换的，效果相同。

　　 send函数中null表示这次请求不需要传递参数，记好了，即使不传递参数，也要写个null。

不过话又说回来了，“get”请求方式，即使要传参，也不在send函数中传。这个是后话了，下次再说吧。

AJAX（一）初识AJAX

一、什么是AJAX

二、最简单的AJAX

1.服务端代码

2.客户端代码

3.代码详细说明

猜你喜欢