AJAX个人笔记

AJAX = 异步 JavaScript 和 XML，在不重新加载整个网页的情况下更新网页一部分的数据

第一步：创建XMLHttpRequest对象

var xhr=new XMLHttpRequest();         //第一步：创建XMLHttpRequest对象

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

var xhr=new ActiveXObject("Microsoft.XMLHTTP");    //IE5和IE6才用这种方式

兼容性写法

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

var xhr;             
if (window.XMLHttpRequest)             //如果支持XMLHttpRequest 对象则运行
  {                                // 这段用在 IE7+, Firefox, Chrome, Opera, Safari 
  xhr=new XMLHttpRequest();        //创建XMLHttpRequest对象
  } 
else 
  {                                                // 这段用在 IE6, IE5 
  xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
  }

第二步：向服务器发送请求

这个放在哪个位置都可以，放在末尾会清晰明了一点

xhr.open(method,url,async);
        
xhr.send();

--------------------------------
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）

• 向服务器发送大量数据（POST 没有数据量限制）

• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

第三步：服务器响应

由于 HTTP 响应是由服务端发出的，并且服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理

document.getElementById("myDiv").innerHTML=xhr.responseText;       //返回的是字符串形式的数据

我们根据要返回的数据形式来作选择
-------------------------------
responseText:获得字符串形式的响应数据
responseXML:获得 XML 形式的响应数据

XHR readyState

xhr.onreadystatechange=function()          //每当readyState改变时，就会触发onreadystatechange事件，共触发5次
  { 
  if (xhr.readyState==4 && xhr.status==200)      //当readyState等于4且状态为200时，表示响应已就绪,然后执行下面的操作
    { 
    document.getElementById("myDiv").innerHTML=xhr.responseText; 
    } 
  }


-------------------------------
XHR.readyState状态的变化如下：

0：请求未初始化，还没有调用 open()。 
1：请求已经建立，但是还没有发送，还没有调用 send()。  
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。  
3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。  
4：响应已完成；您可以获取并使用服务器的响应了

总结

简单写法

var xhr = new XMLHttpRequest();          //第一步：创建XMLHttpRequest对象

xhr.onreadystatechange=function()         //第三步：服务器作出响应
{
  if(xhr.readtState==4 && xhr.status==200)          //就绪状态为400和返回状态为200时执行
    {
    document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
}
              //第二步：向服务器作出请求，放在哪个位置都行，但放最下面会比较清晰
xhr.open("GET","/statics/demosource/ajax_info.txt",true);    //用GET方式请求，true表示异步
xhr.send();

兼容性写法

var xhr;
if(window.XMLHttpRequest)             //支持就运行
  {
  xhr = new XMLHttpRequest();         //创建XMLHttpRequest对象
  }
else
  {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");        //兼容IE5和IE6的写法
  }

xhr.onreadtstatechange = function()          //当服务器准备完成时作出响应
  {
  if(xhr.readyState == 4 && xhr.status == 200)
    {
    document.getElementById("myDiv").innerHTML=xhr.responseText;        //XML类型的文件就用responseXML
    }
  }

xhr.open('GET',URL,'true');           //作出请求的方式
xhr.send();