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了。