AJAX基础笔记

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

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

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建XMLHttpRequest对象 variable=new XMLHttpRequest();
var xmlhttp;
if(window.XMLHttpRequest){ //ie7+
 xmlhttp=new XMLHttpRequest();
}else{  //ie5，ie6
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest 对象用于和服务器交换数据。
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);//三个参数：1.method请求类型；GET或POST 2.URL：文件在服务器的位置（可以使任何类型的文件） 3.async:true(异步)或false(同步)
xmlhttp.send(); //可以带一个string参数，仅用于post请求

GET与POST：
GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。
一般来说GET比POST更简单更快并且大部分情况都可以使用。
如果需要像 HTML 表单那样 POST 数据，可以使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
setRequestHeader(header,value) //向请求添加HTTP头。参数：header:规定头的名称，value：规定头的值

通过AJAX，JavaScript无需等待服务器响应，而是：1.在等待响应时执行其他脚本 2.响应就绪后对响应处理

获取服务器响应：XMLHttpRequest 对象的 responseText 或 responseXML 属性
responseText属性：获得字符串形式的响应数据。如果服务器响应不是XML就使用这个属性。
 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML属性：获得XML形式的响应数据如果服务器响应是XML就使用这个属性。
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("title");//返回指定名称的所有元素的NodeList
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;

onreadystatechange 事件：每当请求发送到服务器，就需要执行一些响应任务
xmlhttp.onreadystatechange=function()
  { //每当readystate属性改变时，就会触发onreadystatechange事件
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
onreadystatechange ：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState ：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
  0: 请求未初始化
  1: 服务器连接已建立
  2: 请求已接收
  3: 请求处理中
  4: 请求已完成，且响应已就绪
status ：  200："OK" 404:未找到页面

Callback函数：是一种以参数形式传递给看另一个函数的函数。
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}