AJAX基础讲解

最新推荐文章于 2025-04-28 19:48:09 发布

天殇月痕

最新推荐文章于 2025-04-28 19:48:09 发布

阅读量471

点赞数

文章标签： ajax xmlhttprequest function asp.net 服务器 string

本文详细解析了XMLHttpRequest对象的使用方法，包括GET和POST请求的区别与应用场景，以及如何通过AJAX实现异步数据交互。通过实例演示了如何通过URL参数传递数据并获取响应结果，同时介绍了XMLHttpRequest对象的常用属性与方法，如readyState、status和responseText等。文章还展示了如何使用XMLHttpRequest对象与服务器进行交互，以及如何解析XML和JSON数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上节课说到了一个简单的例子，并且简单的分析了一下如何创建一个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>

还有 onreadystatechange 只是一个属性名称，而不是函数名称，这里其实是创建了一个匿名函数

readyState：

表示的是当前的对象状态【他有五个值】

0: uninitialized, 【请求未初始化】

1: loading, 【服务器连接已建立】

2: loaded, 【请求已接收】

3: interactive, 【请求处理中】

4: complete。【请求已完成，且响应已就绪】

status：

HTTP响应状态码具体的可以去Google上面找

我简单的举几个例子

403 Forbidden，

404 Not Found，【你懂的】

200正常返回

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

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 头。

下面就是设定-

我们知道，XMLHttpRequest对象是模拟发送请求给服务器，而向服务器发送请求通常有两种方法：GET或者POST，GET请求只能是把东西都放到URL中，类似于 http://xxx.xxx.xxx/xxx.asp?xx=xx 这样子，所以所能发送的最大数据只能是2M，而POST方法是把要发送的东西放到HTTP HEAD里面，这样最大可以发送2G的数据，但用POST方法的时候一定要先使用setRequestHeader方法把Content-Type设置为"application/x-www-form-urlencoded"，怎么回事？form？？？没错，这其实就是在冒充浏览器提交一个表单数据！！

XMLHttpRequest的POST中文表单问题解决方案

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基础的知识我们已经了解的差不多了。谢谢大家支持哦！