AJAX——初遇

AJAX学习笔记

---

什么是AJAX?

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

AJAX的基础-XMLHttRequest对象

所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。
为了兼顾两者，需要判断是否支持XMLHttpRequest。

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");  }

XMLHttpRequest对象用于和服务器交换数据
向服务端发送请求，使用对象所提供的方法

GET请求
为了避免得到缓存结果，向URL添加唯一的ID

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);xmlhttp.send();

POST请求
如果需要想HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send（）方法中规定你希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Bill&lname=Gates");

open()方法的url参数是服务器上文件的地址：”ajax_test.asp”，该文件可以是任何类型的文件，比如.txt 和 .xml，或者服务器脚本文件,比如.asp和.php
关于同步Async = false异步Async = true的问题
如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
并不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

xmlhttp.open("GET","test1.txt",false);xmlhttp.send();document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

如需使用 async=true ，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","test1.txt",true);xmlhttp.send();

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

AJAX-服务器响应

需要获取来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

responseText属性
responseText属性返回字符串形式的响应：

document.getElementById("myDiv").innerHTML=xmlhttp.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;

AJAX - onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }

注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

使用Callback函数

allback 函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上有多个 AJAX 任务，那么您应该为其创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

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