JavaScript 学习笔记— —Ajax

Ajax 应用程序所用到的基本技术：

HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。
DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。

Ajax 世界中的请求/响应

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

所以我们先从XMLHttpRequest讲起，来看看它的工作原理。

XMLHttpRequest这个对象的属性：

onreadystatechange 每次状态改变所触发事件的事件处理程序。

responseText 　　从服务器进程返回数据的字符串形式。

responseXML 从服务器进程返回的DOM兼容的文档数据对象。

status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

status Text 伴随状态码的字符串信息

readyState 对象状态值

　　　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

　　　　1 (初始化) 对象已建立，尚未调用send方法

　　　　2 (发送数据) send方法已调用，但是当前的状态及http头未知

　　　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

　　　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

现在我们介绍了 Ajax，对 XMLHttpRequest 对象以及如何创建它也有了基本的了解。如果阅读得很仔细，您可能已经知道与服务器上的 Web 应用程序打交道的是 JavaScript 技术，而不是直接提交给那个应用程序的 HTML 表单。

还缺少什么呢？到底如何使用 XMLHttpRequest。因为这段代码非常重要，您编写的每个 Ajax 应用程序都要以某种形式使用它，先看看 Ajax 的基本请求/响应模型是什么样吧。

发出请求

您已经有了一个崭新的 XMLHttpRequest 对象，现在让它干点活儿吧。首先需要一个 Web 页面能够调用的 JavaScript 方法（比如当用户输入文本或者从菜单中选择一项时）。接下来就是在所有 Ajax 应用程序中基本都雷同的流程：

从 Web 表单中获取需要的数据。
建立要连接的 URL。
打开到服务器的连接。
设置服务器在完成后要运行的函数。
发送请求。

示列：

function ajax(url, fnSucc, fnFaild)
{
    //1.创建Ajax对象
    var oAjax=null;
    
    if(window.XMLHttpRequest)
    {
        oAjax=new XMLHttpRequest();
    }
    else
    {
        oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }

    /*
    2.连接服务器
    request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。
    url：要连接的 URL。
    asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。
    */
    oAjax.open('GET', url, true);
    
    //3.发送请求
    oAjax.send();
    
    //4.接收服务器的返回
    oAjax.onreadystatechange=function ()
    {
        /*
            0：请求没有发出（在调用 open() 之前）。
            1：请求已经建立但还没有发出（调用 send() 之前）。
            2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
            3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
            4：响应已完成，可以访问服务器响应并使用它。
        */
        if(oAjax.readyState==4)
        {
            //status  HTTP 状态代码 401：未经授权 403：禁止 404：没找到 200：一切正常
            if(oAjax.status==200)
            {
                fnSucc(oAjax.responseText);//从服务器返回的数据保存在responseText 属性中
            }
            else
            {
                if(fnFaild)
                    fnFaild(oAjax.status);
            }
        }
    };
}

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
    <script src="ajax.js"></script>
<script>
window.onload=function(){
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        //ajax('abc.txt',function(data){
        ajax('abc.txt?t='+new Date().getTime(),function(data){//?t='+new Date().getTime() 阻止缓存
            alert(data)
        })
    }
}
</script>
</head>
<body>
<button id="btn">读取文件</button>
</body>
</html>

abc.txt文件中的内容是一串文本形式。

参考：http://blog.csdn.net/daydring/article/details/37507345

posted @ 2015-04-11 10:03 eaysun 阅读(195) 评论(0) 编辑收藏举报

刷新页面返回顶部

Eaysun

JavaScript 学习笔记— —Ajax

Ajax 世界中的请求/响应

发出请求

公告