Ajax学习笔记

异步JavaScript和XML
1.无需重载页面，部分更新页面。
2.工作原理：浏览器端产生XMLHttpRequest对象，发送请求
服务器接收到请求创建response返回需要的数据
浏览器端处理数据更新部分页面
3.创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

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

variable=new ActiveXObject("Microsoft.XMLHTTP");

兼容创建：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");
    }

4.GET向服务器发送请求，参数直接URL传值

.open("方法",url,是否异步处理);
  xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
  xmlhttp.send();

5.POST请求的使用情况：
无法使用缓存文件 向服务器发送大量数据 发送未知字符的用户输入
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.html",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    mlhttp.send("fname=Henry&lname=Ford");

6.优势机制：在等待响应时执行其他脚本，响应就绪后再进行处理
7.编写回调函数

.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)//响应就绪，状态ok
      {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    }

8.如果异步同步设置为false，不用编写onreadystatechange 函数
把代码放到 send()语句后面即可；
缺点：脚本会挂起直到服务器返回数据。
9.服务器返回responseText/responseXML
XML文件处理：

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;

10.onreadystatechange事件
readystate：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status：
200：OK
404未找到页面
11.多个Ajax回调下，使用标准函数，回调函数作为参数传入

function loadXMLDoc(url,cfunc) {
        if (window.XMLHttpRequest)
        {// IE7+,Safari 代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// IE6,IE5 代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=cfunc;
        xmlhttp.open("GET",true);
        xmlhttp.send();
    }

12.Ajax数据库通信 php/asp/jsp等后台实现。
13.Ajax XML处理

x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");//获取特定标签
    for (i=0;i<x.length;i++)//遍历

14.相关实例
http://www.w3cschool.cc/ajax/ajax-examples.html