不依赖JQuery的入门Ajax代码

22

2013
10

今天看了head first ajax这本书里ajax的实例，讲的很好，这本书觉着很不错，推荐下。

Ajax （Asynchronous Javascript and XML）即异步Javascript和XML，但不定非要使用js和xml才能称为Ajax，简单说，Ajax是设计和构建web页面的一种方法，使之像桌面应用一样具有响应性和交互性，而其中的异步就是指浏览器像服务器发出请求而无需用户等待响应。

创建一个Ajax的简单代码要分以下几步走（本实例是使用MVC4 +VS2013 创建的）：

1、创建View页面，即html页面

2、初始化页面

3、创建请求对象

4、服务端响应请求代码

5、显示到界面

下面开始逐一介绍，使用vs创建mvc4空项目。

1、创建view页面

在视图文件夹添加Index.cshtml，输入如下html代码,div是用来显示新闻列表的，button按钮用来触发Ajax事件

        <div id="newsList">
        </div>
        <input type="button"  value="获取新闻"  id="btnNews"/>

2、 初始化页面

在页面加载完后，给button绑定调用Ajax事件

    window.onload = initPage;    function initPage() {        var btn = document.getElementById("btnNews");
        btn.onclick = function () {
            getNews();
        };
    }

3、创建请求对象

针对各种浏览器，我们建立一个初始化XMLHttpRequest请求对象的方法。

    var request;    function createRequest() {        try {
            request = new XMLHttpRequest();//这里创建一个请求对象 但不适用于所有浏览器        }        catch (msXml) {            try {
                request = new ActiveXObject("MSxml2:XMLHTTP");//第一种方法失败，尝试是不是IE6浏览器            }            catch (ms) {                try {
                    request = new ActiveXObject("Microsoft:XMLHTTP");//又失败了，再来尝试是不是IE5                }                catch (failed) {
                    request = null;
                }
            }
        }        return request;
    }

创建完请求后，我们开始向服务端执行请求

    function getNews() {        var request = createRequest();        var newsCount = 0;        if (document.getElementsByTagName("li") != null) {
            newsCount = document.getElementsByTagName("li").length;
        }        var url = "default/GetNews?newsid=" + newsCount;
        request.open("GET", url, true);
        request.onreadystatechange = displayNews; //回调函数，每次状态改变时 浏览器都会运行回调函数。
        request.send(null);

    }

4、服务端响应请求代码接着我们要在服务端写代码进行响应请求，添加控制器DefaultController，添加GetNews方法，返回类型为string

       public string GetNews(int newsid)
        {            string responseText = @"<ul>";            for (int i = 1; i <= 10; i++)
            {
                responseText += string.Format("<li>这是第{0}条新闻</li>", i + newsid);
            }
            responseText += "</ul>";            return responseText;
        }

5、显示到界面XMLHttpRequest对象有一个onreadystatechange 属性，该属性用来告知浏览器执行回调函数，服务器在接受到请求对象后，会更新readyState（表示请求对象当前状态）属性，每次这个属性发生变化时，浏览器就会调用onreadystatechange这个属性指定的函数。

    function displayNews() {        if (request.readyState == 4) ////服务器接收到请求时 为1 ，在处理请求时值为2或3，处理完请求后 修改值为4        {            if (request.status == 200) //http状态码 200代表成功，404代表所请求的页面不存在或链接错误。            {                var divNews = document.getElementById("newsList");
                divNews.innerHTML += request.responseText;
            }
        }
    }

效果如下：