AJAX总结

发布时间：2020-12-15 21:41:18 所属栏目：百科来源：网络整理

导读：Ajax原理一、Ajax简介 1、Ajax=Asynchronous JavaScript and XML（异步的JavaScript和XML），是一种在不重新加载整个网页的情况下，实现页面局部更新的艺术，它不是一种编程语言，而是一种使用现有标准的新方法。 2、不使用Ajax的情况下，如果需要更新内容

Ajax原理

一、Ajax简介

1、Ajax=Asynchronous JavaScript and XML（异步的JavaScript和XML），是一种在不重新加载整个网页的情况下，实现页面局部更新的艺术，它不是一种编程语言，而是一种使用现有标准的新方法。
2、不使用Ajax的情况下，如果需要更新内容，必须重载整个页面；Ajax通过在后台与服务器进行进行少量交互实现网页的异步更新。使用Ajax的例子有：新浪微博、Google地图、开心网等。

二、Ajax执行原理（过程）

1、创建XMLHttpRequest对象
(1) 简介：
XMLHttpRequest对象用于在后台与服务器交换数据。现代浏览器基本都支持该对象，其中IE5和IE6使用ActiveXObject对象；IE7+、Firefox、Chrome、Safari以及Opera等内建XMLHttpRequest对象。
(2) 创建方式：

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

2、向服务器发送请求
(1)发送方式：
如果需要向服务器发送请求，我们要使用XMLHttpRequest对象的open()和send()方法，如下代码所示：

xmlhttp.open("GET","test.jsp","true");
xmlhttp.send();

(2)方法及参数介绍：

open(method,url,async)方法：规定请求的类型、URL以及是否异步
– method：请求的类型，GET或POST；
–url：文件在服务器上的位置,该文件可以是任意类型,比如如.txt，.xml，.asp，.php或.jsp等；
– async：true（异步）或false（同步），使用Ajax时必须为true；

xmlhttp.open("GET","test.jsp?name=zhangsan&sno=1101",true);
xmlhttp.send();

send()方法：将请求发送到服务器上
– String：仅用于POST请求；
–使用该方法发送请求时要使用setRequestHeader()方法来添加HTTP请求头，然后再send中添加请求的数据。

xmlhttp.open("POST","test2.jsp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=zhangsan&sno=1101");

(3)Async = true
通过Ajax，JavaScript无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
当使用async=true时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数，即回调函数，如下代码所示：

xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
   {
   document.getElementById("MyDiv").innerHTML = xmlhttp.responseText;
   }
xmlhttp.open("GET","test1.jsp",true);
xmlhttp.send(); 
}

注意：当您使用async=false时，请不要编写onreadystatechange函数，只要把相应的处理代码放到send语句后即可，则JavaScript代码会等到服务器响应就绪时才继续执行，看如下代码：

xmlhttp.open("GET",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

3、服务器响应
如需获得来自服务器的响应，请使用SMLHttpRequest对象的responseText或responseXML属性。
（1）responseText属性：获得字符串形式的响应数据。
如果来自服务器的响应并非XML，请使用responseText属性，使用方法如下：

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

（2）responseXML属性：获得XML形式的响应数据。
如果来自服务器的响应是XML，而且需要作为XML对象进行解析，请使用responseXML属性，如下为请求books.xml文件，并解析响应：

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

4、onreadystatechange事件(其实是XMLHttpRequest对象的属性)
当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当readyState改变时，就会触发onreadystatechange事件，该事件中有两个属性，分别是readyState和status，下面分别作介绍：
（1）onreadystatechange属性
存储函数（或函数名），每当readyState属性的值改变时，就会调用该函数。
（2）readyState:存有XMLHttpRequest的状态，从0到4发生变化

0：请求未初始化
1：服务器连接已经建立
2：请求已连接
3：请求处理中
4：请求已完成，且服务器响应就绪

（3）status：状态

200：“OK”
404：未找到页面
在onreadystatechange事件中，我们规定当服务器响应已经做好被处理的准备时所执行的任务。当readyState等于4且状态为200时，表示响应已就绪，如下代码所示：

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

附加：使用Callback函数（回调函数）
回调函数是一种以参数形式传递给另一个函数的函数，如果您的网站上存在多个AJAX任务，那么您应该为创建XMLHttpRequest对象编写一个标准的函数，并为每个AJAX调用该标准函数，该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务（每次调用的执行可能不尽相同），如下代码所示：

function myFunction() {
loadXMLDoc("ajax_info.txt",function() {
   if(xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
     }
   });
 }

5、综合以上所讲的内容，举一个简单的例子，代码如下所示：

<html>
<head>
<script type="text/javascript"> var xmlhttp; function loadXMLDoc(url,cfunc) { if(window.XMLHttpRequest) {//code for IE7+,Chrom,Safari,Opera xmlhttp = new XMLHttpRequest(); } else {//code for IE5,IE6 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",true); xmlhttp.send(); } function myFunction() { loadXMLDoc("/ajax/test1.jsp",function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } </script>
</head>
<div id="myDiv">
   <h2>Let AJAX change this text</h2>
</div>
<button type="button" onclick="myFunction()">通过AJAX改变内容</button>
</body>
</html>

以上内容是本人在学习Ajax时总结的重点知识，主要的学习辅助资源是W3School，如果您不喜欢W3School中的在线学习法，可以参考本文，其优点在于将W3School中的多个页面浓缩在一篇文章中，方便阅读；其缺点在于代码实例比较少，而且看不到实现的效果，这个我建议您去W3School参考相应的代码，那里可以看到代码的效果展示。如果有什么不足之处，比如表述错误之类的，我也希望能得到大家的指证，以求共同进步。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!