一、ajax实例及详解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest) //返回当前浏览器XMLHttpRequest请求（值：true | false）
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest(); //实例化一个XMLHttpRequest对象
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //实例化一个XMLHttpRequest对象
}
xmlhttp.onreadystatechange=function() //每当 readyState 属性改变时，就会调用该函数。
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) // readyState，释义：返回XMLHTTP请求的当前状态；status,释义：返回XMLHTTP与后台交互时的一个状态码。
{
//获取div并将获取的字符按HTML标记语言格式取出；responseText：获得字符串形式的响应数据。若为：responseXML：获得 XML 形式的响应数据
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); // open(method,url,async) ： 规定请求的类型、URL 以及是否异步处理请求。
xmlhttp.send(); //send(string ) 将请求发送到服务器。
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" οnclick="loadXMLDoc()">修改内容</button>
</body>
</html>
二、相关变量及参数说明
1. 创建 XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
2. onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
（1）、onreadystatechange事件：存储函数，每当readyState改变时会调用这个函数。
（2）、readyState释义：返回XMLHTTP请求的当前状态。
变量，此属性只读，状态用长度为4的整型表示.定义如下：
|
0 （未初始化）
|
对象已建立，但是尚未初始化（尚未调用open方法）
|
|
1 （初始化）
|
已调用send()方法，正在发送请求
|
|
2 （发送数据）
|
send方法调用完成，但是当前的状态及http头未知
|
|
3 （数据传送中）
|
已接收部分数据，因为响应及http头不全，这时通过responseXML和responseText获取部分数据会出现错误，
|
|
4 （完成）
|
数据接收完毕，此时可以通过通过responseXML和responseText获取完整的回应数据
|
（3）、常用状态码（status）及其含义：
- 200：服务器响应正常。
- 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
- 400：无法找到请求的资源。
- 401：访问资源的权限不够。
- 403：没有权限访问资源。
- 404：需要访问的资源不存在。
- 405：需要访问的资源被禁止。
- 407：访问的资源需要代理身份验证。
- 414：请求的URL太长。
- 500：服务器内部错误。
XMLHttpRequest status = 0 问题。（这部分为copy来的：详细请看：http://blog.csdn.net/iaiti/article/details/42192659）
xmlhttp.readyState =4的时候，一直xmlhttp.status ！= 200。便随手输出，发现xmlhttp.status=0，http协议里可是没这个状态码的。
最后翻啊翻啊，找啊找啊，最后找到一个XMLHttpRequest的说明：http://www.w3.org/TR/XMLHttpRequest/ 。
The status attribute must return the result of running these steps:
status的值一定会返回运行这些步骤的结果。
1、If the state is UNSENT or OPENED, return 0.（如果状态是UNSENT或者OPENED，返回0）
2、If the error flag is set, return 0.（如果错误标签被设置，返回0）
3、Return the HTTP status code.（返回HTTP状态码）
如果在HTTP返回之前就出现上面两种情况，就出现0了
3、 服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
responseText：获得字符串形式的响应数据；
responseXML：获得 XML 形式的响应数据。
// 对XML 对象进行解析
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var xmlDoc=xmlhttp.responseXML;
var txt="";
var x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++){
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
}
4、向服务器发送请求
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
send(string)
将请求发送到服务器。string:禁用于post请求
get 还是 post？
与 post相比，get更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 post请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（post没有数据量限制）
- 发送包含未知字符的用户输入时，post 比 get 更稳定也更可靠.
以上文本纯属自己收集，如有雷同请谅解，如有不妥望指出，谢谢！
------ZhuHuarun
289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
