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

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

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

1

大家首先看一下上节课遇到的  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【这个一般处理程序的代码】

 

sasa

 

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 @   KingDZ  阅读(1870)  评论(1)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示