最基本的Ajax简述

一个html页面,向其中添加一个<script></script>以及页面上一个按钮，连个文本框，内容如下：

 

<script type="text/javascript" language="javascript">
        var xmlHttp = false;
        try
        {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e2)
            {
                xmlHttp = false;
            }
        }
        if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
            xmlHttp = new XMLHttpRequest();
        }
        /*以上经过多次的try...catch主要是不同的浏览器中创建XMLHttpRequest对象的方法不同，
            所以要通过"试"的方法找到适合浏览器的方法*/

        function callServer() {
            var name = document.getElementById("txtSend").value;
            var url = "Default.aspx?msg=" + escape(name);
            xmlHttp.open("GET", url, true);//true为异步数据发送
            xmlHttp.onreadystatechange = showMessage;
            xmlHttp.send(null);
        }

        function showMessage() {
            if (xmlHttp.readyState == 4) {
                var response = xmlHttp.responseText;
                document.getElementById("txtShow").value = response;
            }
        }
    </script>

 

    ...

   <p>
        <input id="btnSubmit" type="button" value="Ajax按钮" οnclick="callServer()"/>
        <input id="txtSend" type="text" />
        <input id="txtShow" type="text" />
    </p>

 

 Default.aspx.cs

      ...

       Response.Write("Ajax发送过来的数据是:"+Request["msg"]);
        Response.End();

      ...

 

程序解释：

   （1）、xmlHttp.open("GET",url,true)方法是XMLHttpRequest对象的方法，它有三个参数:

                   第一个参数表示通过什么方式访问url所指定的资源，主要有两种"GET”和"POST”;

                   第二个参数表示所访问的url地址;

                   第三个参数表示调用方式，true为异步调用，false为同步调用;

            异步调用是ajax的关键，open方法访问url资源是，需要一定的时间，但系统并不会等待open方法执行完毕后再继续向下执行。  也  就是说，当open方法在访问url资源的时候，浏览器并不是一直处于“等待”状态，用户依然可以在浏览器上执行其他javascript程序。

 

  （2）、由于是异步调用，所以用户并不知道open方法什么时候才能将url资源内容获取完毕，所以对于异步方法，通常使用触发事件来通知用户程序。

            onreadystatechange就是通知用户open方法已经将url资源内容获取完毕了的触发事件；在此程序代码中，程序触发的事件函数是showMessage()；

 

  （3）、在showMessage函数中，xmlHttp.readyState==4表示XMLHttpRequest对象当前的状态，只有状态为4时，才可以获取到服务器Response（应答）回来的内容。

 

   （4）、responseText是XMLHttpRequest对象的一个属性，记录着此次Web请求所反馈的文本内容，这里简单使用了responseText属性。

         Ajax中常用的是responseXML属性，要求url资源返回的是一个XML的文档流结构，在网页DOM中对XML文档有多种默认的处理方式，javascript中也有用于XML处理的对象，可以方便程序的后期处理。