22
2013
10

不依赖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 = 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;
            }
        }
    }
复制代码

效果如下:

源码下载

喜欢就推荐下吧,您的支持是我的动力!

« 上一篇下一篇 »

评论列表:

1.海棠秋客  2013/11/4 16:01:38 回复该留言
学习一下

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。