温馨提示:在学习本教程前,请先了解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请求:
so easy