温馨提示：在学习本教程前，请先了解HTML，CSS，javascript
概念分析
什么是AJAX：
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
特点：
最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
注意：
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。所以学起来very easy！
主要职责剖析：
JavaScript ：利用DOM与HTML页面交互，比如更新页面信息；
XMLHttpRequest： AJAX的主要对象，负责与服务器交互，比如向服务器发送请求；
XML或者JSON ：作为交换数据的格式，比如服务器返回的数据可以是JSON；
开始coding
创建对象
对于现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均支持 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的浏览器（IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
var xmlhttp;
if(window.XMLHttpRequest){
//IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=newXMLHttpRequest();
}else{
//IE6, IE5 浏览器执行代码
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
就这样，我们完成了第一步
发送请求
发送请求的主要方法
当我们发送POST请求的时候，需要设置一下请求头：
设置请求头的方法
1、当我们发送GET请求的时候，其代码可以为：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
2、当我们发送POST请求的时候，其代码可以为：
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
就这样，我们完成了第二步
响应处理
在发送亲求前，我们先定义一下当请求正在处理，直到请求完成这个过程的代码；
XMLHttpRequest请求的onreadystatechange、readyState、status
onreadystatechange：用于存储函数，每当 readyState 属性改变时，就会调用该函数。
readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化分别为：
0: 请求未初始化；
1: 服务器连接已建立；
2: 请求已接收；
3: 请求处理中；
4: 请求已完成，且响应已就绪；
status：存有服务器返回的响应码主要有：
200: 一切"OK";
404: 未找到页面;
所以，我们可以这样处理返回结果：
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
//在这里处理响应结果
}
}
发送请求后，服务器可以有返回结果，其结果放在XMLHttpRequest的以下属性中：
返回结果
1、如果是XML格式的数据，直接用使用responseXML就可以了；
2、如果是JSON格式的数据，就需要用到JSON.parse()方法将JSON字符串形式的responseText转换为javascript对象；
就这样，我们完成了第三步
练练手
我们可以将上面的代码整合起来，发送一个GET请求：
GET请求例子
so easy
网友评论