ajax 原理

Lover_IT

浏览: 16632 次
性别:
来自: 成都

最近访客更多访客>>

kia126

wangzemin

毛毛爱代码

tonyJ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

1、Ajax的全称是Asynchronous Javascript And XML.AJax
2、包含技术：
基于web标准（standards-based presentation）XHTML+CSS的表示；

使用 DOM（Document Object Model）进行动态显示及交互；

使用 XML 和 XSLT 进行数据交换及相关操作；

使用 XMLHttpRequest 进行异步数据查询、检索；

使用 JavaScript 将所有的东西绑定在一起
3、Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 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获取完整的回应数据
创建XMLHttpRequest对象的方法：

    get.htm页面HTML代码如下:

    <body>
        <label for="txt_username">
            姓名:</label>
        <input type="text" id="txt_username" />
        <br />
        <label for="txt_age">
            年龄:</label>
        <input type="text" id="txt_age" />
        <br />
        <input type="button" value="GET" id="btn" onclick="btn_click();" />
        <div id="result">
        </div>
    </body>
function btn_click() {
        //创建XMLHttpRequest对象
        var xmlHttp = new XMLHttpRequest();

        //获取值
        var username = document.getElementById("txt_username").value;
        var age = document.getElementById("txt_age").value;

        //配置XMLHttpRequest对象
        xmlHttp.open("get", "Get.aspx?username=" + username
            + "&age=" + age);

        //设置回调函数
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                document.getElementById("result").innerHTML = xmlHttp.responseText;
            }
        }

        //发送请求
        xmlHttp.send(null);
    }

    新建Get.aspx页,Get.aspx.cs代码如下:

    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();

        string username = Request.QueryString["username"];

        string age = Request.QueryString["age"];

        Response.Write("姓名:'" + username + "'<br/>年龄:" + age + "<br/>时间:'" + DateTime.Now.ToString() + "'");

        Response.End();
    }

分享到：