快速学习AJAX之二 Ajax基础扩展

上节课说到了一个简单的例子，并且简单的分析了一下如何创建一个XMLHttpRequest对象。

这节课，我们在详细的说明一下XMLHttpRequest对象

大家首先看一下上节课遇到的 xmlHttp.send(); 方法。这个 send(string) 是可以带一个参数的，但是，必须 “POST”的模式下。我上面的截图中，应该写成 xmlHttp.send(null);

大家可以试一下，结果正确吗？

那么大家可能有一个问题？POST和GET都在什么情况下使用呢？

首先，我们知道提交Form表单有这两种方式，呵呵，那么我们就可以用提交表单的方式去理解这两种方式啊。

GET:毫无疑问速度比POST快。并且可用的范围广。

POST:

以下的情况下，建议用POST

1》向服务器发送大量数据。

2》发送密码什么的。为什么？安全性高。

继续咱们昨天的例子：我们昨天细心的园友可能发现一个问题，就是我们“单击显示时间” 假如浏览器没有关闭，重新打开，那么我们的到得时间总是一个时间，这是为什么呢？

因为您可能得到的是缓存的结果。解决这个现象也很简单，呵呵，我想玩过ASP.NET的程序员，应该有个习惯解决这个问题。

好了，不卖关子了，大家可以在上面例子中的URL上面添加一个参数

function getAjax() {
       xmlHttp.open("GET", "Ajax.ashx?i="+Math.random(),true);
       xmlHttp.onreadystatechange = function () {
           if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
               alert(xmlHttp.responseText);
           }
       }
       xmlHttp.send();
       
   }

再试一下有木有效果呢？结果还是相同的吗？

哦了，下面给大家写一个例子，这个例子，有兴趣的童鞋可以自己写个登陆出来，还有我因为是基于ASP.NET的原生态AJAX所以大家可能，所以我例子中的有些代码是基于ASP.NET的。

所以大家可能需要注意一下。

首先先修改一下，Ajax.ashx【这个一般处理程序的代码】

public void ProcessRequest(HttpContext context)
      {
          context.Response.ContentType = "text/html";
          string name = context.Request["name"].ToString();
          string sex = context.Request["sex"].ToString();
          context.Response.Write(string.Format("大家好我是{0},我是{1}",name,sex));
      }

好了，修改好了，下面是Ajax1.htm的页面代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var xmlHttp = false;  //这个声明成什么都无所谓啦
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                xmlHttp = false;
            }
        }
        if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
            xmlHttp = new XMLHttpRequest();

        }
        function getAjax() {
            xmlHttp.open("GET", "Ajax.ashx?name=KinDZ&sex=Man",true);
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    document.getElementById('getText').innerHTML = xmlHttp.responseText;
                }
            }
            xmlHttp.send();
            
        }
    </script>
</head>
<body>
  <input type="button"  value="单击我就显示我是谁？" onclick="getAjax();" />
  <div id="getText"></div>
</body>
</html>

好了，该做的准备我们已经做好了，这回大家可以看到了吧

xmlHttp.open("GET", "Ajax.ashx?name=KinDZ&sex=Man",true); 这句明白了吗？呵呵，GET方法是可以带参数的。

下面给大家一个上面例子的POST版本

function getAjax() {
         xmlHttp.open("POST", "Ajax.ashx", true);
         xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
         xmlHttp.onreadystatechange = function () {
             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                 document.getElementById('getText').innerHTML = xmlHttp.responseText;
             }
         }
         xmlHttp.send("name=KingDZ&sex=Man");
         
     }

记住上面的

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 这个是必须要设置的， setRequestHeader() 来添加 HTTP 头。

下面就是设定----以后我们慢慢讲解。

setRequestHeader(头名称,值);

好了，这节课的最后我们再来说明一下 xmlHttp.open("POST", "Ajax.ashx", true); 这里面的这个 “true”;

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

注：async：true（异步）或 false（同步）

当使用 async=true 时，我们就可以使用 onreadystatechange 事件中的就绪状态时来执行的函数

就是我们之前用到的例子。

当您使用 async=false 时，就不要使用 onreadystatechange 函数

把我们执行的代码放到 send() 语句后面即可

呵呵，大家可以具体在找一下这个资料。不过，对于新手来说，记住设置成 true 使用AJAX即可。

function getAjax() {
      xmlHttp.open("POST", "Ajax.ashx", false);
      xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xmlHttp.send("name=KingDZ&sex=Man");
      document.getElementById('getText').innerHTML = xmlHttp.responseText;
  }

好了，我们下面说一下 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

常用：

responseText：
获得字符串形式的响应数据。

responseXML：
获得 XML 形式的响应数据。

不常用：【就不细讲了】

responseBody :

获得 unsigned byte数组形式的响应数据

responseStream

获得IStream 形式的响应数据。

我们上面一直使用的是 responseText 。

下面我们稍微说一下 responseXML ，以后用到在慢慢细讲。

首先我们需要准备一个XML文件 Ajax1.xml

<?xml version="1.0" encoding="utf-8" ?>
<Ajaxstudent>
  <student name="KindDZ">
    <sex>21</sex>
    <chinesename>哈哈</chinesename>
  </student>
  <student name="WDZ">
    <sex>22</sex>
    <chinesename>呵呵</chinesename>
  </student>
  <student name="ADZ">
    <sex>22</sex>
    <chinesename>嘻嘻</chinesename>
  </student>
</Ajaxstudent>

好了，下面修改一下

function getAjax() {
        xmlHttp.open("GET", "Ajax1.xml", true);
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                xmlDoc = xmlHttp.responseXML; //读取 Ajax1.xml文件
                 getxml = "";
             chinesename = xmlDoc.getElementsByTagName("chinesename");
                //这个是我们XML文件中的某个节点。
               for (i = 0; i < chinesename.length; i++) {
                    getxml =   getxml + chinesename[i].childNodes[0].nodeValue + "<br />";
                }
                document.getElementById("getXml").innerHTML = getxml;
            }
        }
        xmlHttp.send();
    }

好了，修改完了，修改一下 HTML代码

<body>
    <input type="button" value="单击我就显示XML文件中的chinesename？" onclick="getAjax();" />
    <div id="getXml">
    </div>
</body>

OK结束了

到这里，AJAX基础的知识我们已经了解的差不多了。谢谢大家支持哦！

posted @ 2011-08-01 09:01 KingDZ 阅读(1865) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

ASP.NET自学博客

体验编程的快乐，创造最有价值的网站

创意灵感经验 Money 俗

快速学习AJAX之二 Ajax基础扩展

公告

ASP.NET自学博客

体验编程的快乐，创造最有价值的网站 创意 灵感 经验 Money 俗

快速学习AJAX之二 Ajax基础扩展

公告

体验编程的快乐，创造最有价值的网站

创意灵感经验 Money 俗