不依赖JQuery的入门Ajax代码

今天看了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 = ; i <= ; 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;

            }

        }

    }

效果如下：

源码下载

喜欢就推荐下吧，您的支持是我的动力！

巴特西

不依赖JQuery的入门Ajax代码

最新文章

热门文章