Ajax 入门笔记

小鱼儿 2023-06-04 05:57 5阅读 0赞

**AJAX =A*synchronous *J*avascript + *X*ML，*是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。**

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest 是 AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1：创建 XMLHttpRequest 对象

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
    if (window.XMLHttpRequest)
      {
         // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {
         // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

2：向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();

<table style="width:567px;"> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>open(<em>method</em>,<em>url</em>,<em>async</em>)</td> 
   <td> <p>规定请求的类型、URL 以及是否异步处理请求。</p> 
    <ul> 
     <li><em>method</em>：请求的类型；GET 或 POST</li> 
     <li><em>url</em>：文件在服务器上的位置</li> 
     <li><em>async</em>：true（异步）或 false（同步）</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>send(<em>string</em>)</td> 
   <td> <p>将请求发送到服务器。</p> 
    <ul> 
     <li><em>string</em>：仅用于 POST 请求</li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

3：服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

<table style="width:507px;"> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>responseText</td> 
   <td>获得字符串形式的响应数据。</td> 
  </tr> 
  <tr> 
   <td>responseXML</td> 
   <td>获得 XML 形式的响应数据。</td> 
  </tr> 
 </tbody> 
</table>

**responseText 属性**

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

**responseXML 属性**

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

请求 books.xml 文件，并解析响应：

xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;

4:onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

<table style="width:648px;"> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onreadystatechange</td> 
   <td>存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。</td> 
  </tr> 
  <tr> 
   <td>readyState</td> 
   <td> <p>存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。</p> 
    <ul> 
     <li>0: 请求未初始化</li> 
     <li>1: 服务器连接已建立</li> 
     <li>2: 请求已接收</li> 
     <li>3: 请求处理中</li> 
     <li>4: 请求已完成，且响应已就绪</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>status</td> 
   <td> <p>200: "OK"</p> <p>404: 未找到页面</p> </td> 
  </tr> 
 </tbody> 
</table>

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }

转载于:https://www.cnblogs.com/qwj-sysu/p/3842930.html