Ajax基础

面试之Ajax基础

什么是Ajax？
Ajax是异步Javascript和xml，是一种用于创建快速动态网页的技术，通过后台与服务器进行少量数据交换，ajax 可以使网页异步刷新，这意味着可以在不重新加载整个网页的的情况下，对网页的某部分进行更新。

工作原理：
浏览器：事件触发，创建xmlHttpRequest对象，发送httpRequest—>服务器：处理httpRequest,创建响应并把数据返回到浏览器----->浏览器：使用Js处理数据，更新页面内容

创建xmlHttpRequest的方法：
xmlhttp=new XmLHttpRequest()，
当然也有ie6和ie5的，这里我就不说了

如需把请求发送到服务器，我们使用XMLHttpRequest对象的open和send方法

xmlhttp.open(method,url,async)

Method 请求的方法 是get还是post
url则是文件放在服务器的位置
async异步还是同步
Xmlhttp.send(string)
string是仅限于使用post方法，把请求发送到服务器

使用post还是get？
与post相比，get更简单也更快，大部分情况下都能用get，但是在以下情况下最好使用post
1.在无法使用缓存文件的情况下（更新服务器上的文件或数据库）
2.向服务器发送大量数据（post无数据量的限制）
3.发送包含未知字符串，post比get更稳定也更可靠

如果XMLHttpRequest对象要用于AJax的话，async必须设置异步，
xmlhttp.setRequestHeader(header,value)
向请求添加表头Header，规定头的名称 value–>规定头的值

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

• ResponseText：获得字符串形式的响应数据
• ResponseXML：获得XML形式的响应数据

如果是来自服务器响应并非XML,请使用responseText属性，您可以这么使用，document.getElementById("myDiv").innerHTML=xmlhttp.responseText
如果响应是resonseXML,而且需要作为XML对象进行解析，请使用responseXML属性，对xml进行解析，元素，属性，节点等等。

Onreadystatechange事件：

• 当请求发送到服务器时，我们需要执信一些基于响应的任务。
• 每当readystate发生改变的时候，就会触发onstatechange事件
• Readystate属性存有XMLHttpRequest的状态信息，下面时XMLHttpReuqest最重要的三个属性。

1.onreadystatechange：函数（函数名称），当readystate发生改变时，触发改函数
2.Readystate
存有XMLHttpRequest的状态。从0到4发生变化
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应就绪
3.Status
200：”ok”
404:未找到页面

在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执信的任务。
当readystate等于4且状态为200，表示响应已就绪。
注意：onreadystatechange事件触发4次，0-1,1-2,2-3,3-4.
如果网站存在多个ajax任务，那么最好为XMLHttpRequest编写一个标准的函数，并为每个ajax任务调用函数。下面附上一个使用回调函数的Ajax实例，这是回调函数中的直接把匿名函数作为参数传递到另一个函数中，就是当服务器响应就绪执信的函数（cfunc）。

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 myFunction()
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}