AJAX使用步骤总结

2019-10-21 本文已影响0人西瓜鱼仔

AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。也就是我们常听到的“异步加载”。

它的基本工作流程如下：

使用起来也非常简单：

<head>
<script>
function loadXMLDoc()
{
    .... AJAX 脚本执行 ...
}
</script>
</head>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

这样就能实现网页某部分的异步数据加载，重点在于“ AJAX 脚本执行”部分，下面详细说明一下创建一个Ajax 脚本的具体步骤。

创建一个AJAX 脚本分为4个步骤：

1. 创建XMLHttpRequest对象

不同的浏览器使用的异步调用对象有所不同。

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象：

var xmlHttp = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 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();

3. 获取服务器响应

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性来获取来自服务器的响应。

responseText：获取字符串形式的响应数据。
responseXML：获取 XML 形式的响应数据。

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

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

示例2：如果来自服务器的响应是 XML，使用 responseXML 属性，并对XML 对象进行解析。

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

4. 完善AJAX请求

经过上面三步，我们实现了一个完整的AJAX 请求过程。
但是整个过程中还存在瑕疵：我们无法得知服务器响应是否成功。如果响应未成功，那么后面的操作就毫无效果，我们可能还会误以为是自己程序写错了，为了防止这种情况，我们监听一下响应的状态，确保响应成功后才进行后面的操作。

XMLHttpRequest 对象的三个重要的属性:

readyState
从创建XMLHttpRequest对象开始，到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5种状态：

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

onreadystatechange 事件
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
status

200: "OK"

404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

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

（注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。）

到现在，我们已经完成了一个完美的AJAX脚本！
完整代码：

  <script>
    // 1.创建XMLHttpRequest对象
    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.发送服务器请求
    xmlHttp.open("GET","test1.txt",true);
    xmlHttp.send();

   // 3.判断服务器响应是否成功，如果响应成功，进行相关操作
    xmlHttp.onreadystatechange=function()
    {
      if (xmlHttp.readyState==4 && xmlHttp.status==200)
      {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    }  
  </script>

扩展：AJAX CORS 跨域请求

由于所有浏览器都存在“同源策略”，因此跨域请求正常情况下不被允许。

随着技术的发展，现在的浏览器可以主动支持设置从而允许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
前端的代码不用修改，服务端的代码需要修改。