AJAX的一些相关知识

AJAX的学习

概念:是一种在不需要重新加载整个网页的情况下,能够更新部分网页的技术

ajax=异步JavaScript+XML

意义

通过在后台与服务器进行少量的数据交换,实现网页的异步更新,这也就意味这种技术能够快速地创建动态网页.

AJAX is not a programming language.

It is just a technique for creating better and more interactive web applications.

XMLHttpRequest 是 AJAX 的基础。

1.创建XMLHttpRequest对象

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

2.AJAX - 向服务器发送请求

使用XMLHttpRequest对象的open()和send()方法.

open(method,url,async);

·method:请求的类型:GET或者是POST

·url:文件在服务器上的位置

·async :true(异步)或者是false(同步)

send(string):将请求发送到服务器

·string:仅用于POST请求

关于异步和同步的关系:

对于web开发人员来说:发送异步请求简直是一件美事.

因为在服务器执行过程中,是相当费时的,有可能应用程序就会挂掉.

通过AJAX, JavaScript无需等待服务器的响应.而是:

·在等待服务器响应时执行其他脚本

·当响应就绪后对响应进行处理.

当使用 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();

当使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

xmlhttp.open(“GET”,”test1.txt”,false);

xmlhttp.send();

document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

3.AJAX - 服务器响应

获取来自服务器的响应,对应的使用responseText和responseXMl

responseText:获得字符串形式的响应数据

responseXMl:获得XML形式的响应数据

4.AJAX - onreadystatechange 事件

当请求被发送到服务器时,需要执行一些基于响应的任务

每当readyState发生改变,就会触发onreadystatechange事件

readyState属性存有XMLHttpRequest的状态信息;

下面是 XMLHttpRequest 对象的三个重要的属性：

onreadystatechange:存储函数,每当readyState属性改变时,就会调用该函数

readyState:存有XMLHttpRequest的状态,从0到4发生变化

· 0:请求初始化

· 1:服务器连接已建立

· 2:请求已接收

· 3:请求处理中

· 4:请求已完成,且响应已就绪

status:200:”OK”

404:未找到页面.