AJAX学习

ajax： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。ajax不是新的编程语言，而是一种使用现有标准的新方法。AJAX的好处在于不重新加载整个页面的情况下，就可以与服务器交换数据，更新局部网页内容。

AJAX实现的关键是XMLHttpRequest对象

variable = new XMLHttpRequest();

// 支持校验

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

AJAX向服务器发送请求
open和send方法

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

open(method,url,async异步还是同步)
制作请求

send发送请求

Get比POST好使

POST使用场景

• 无法使用缓存文件，需要更新服务器的文件或数据库
• 向服务器发送大量数据，POST没有数据量限制

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

  GET请求

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

POST请求
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

setRequestHeader(header,value)

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

异步通过 AJAX，JavaScript 无需等待服务器的响应，而是：

• 在等待服务器响应时执行其他脚本
• 当响应就绪后对响应进行处理

当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

AJAX服务器响应
xmlhttp.onreadystatechange=function()
onreadystatechange事件，用来监听服务器状态返回。

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

responseText属性
xmlhttp.responseText

responseXML属性

  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      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;
    }
  }

onreadystatechange 事件
每当 readyState 改变时，就会触发 onreadystatechange 事件。
* XMLHttpRequest 对象的三个重要的属性：*

• onreadystatechange每当 readyState 属性改变时，就会调用该函数。
• readyState 0-请求未发生 1-服务器连接已建立 2-请求已接收 3-请求处理中 4-请求已完成，且响应已就绪

• status 200-“OK” 404-未找到页面

  onreadystatechange里面写服务器响应后要处理的事情。
  xmlhttp.readyState==4 响应完毕&&xmlhttp.status==200正常返回，这才表示响应已就绪。

使用回调函数
当AJAX任务，变多时

var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 // 此处是回调函数 
 // 这里等于一个参数，而参数是一个函数;这样写就不至于写死。
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction1()
{
// 这里将处理参数化，更加规范清楚。
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}

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

AJAX ASP/PHP 实例
这里说了些服务器端的处理实例，暂不考虑。

AJAX Database 实例
主要是服务器端得数据库查询，暂不考虑。

AJAX XML实例
AJAX 可用来与 XML 文件进行交互式通信。

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

用AJAX进行一次 HEAD 请求

document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();

用AJAX进行一次指定的 HEAD 请求

document.getElementById('p1').innerHTML="Last modified: " + xmlhttp.getResponseHeader('Last-Modified');

至此，AJAX我就看完了，以后我可以说我会AJAX了。