AJAX 讲解

原创 2013年12月01日 22:50:26

什么是 AJAX ?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

XMLHttpRequest 是 AJAX 的基础对象,基本用的就这一个。

创建 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 :

var xmlhttp;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

向服务器发送请求

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

服务器响应

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

属性描述
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。


onreadystatechange 事件

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

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

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

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

属性描述
onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status

200: "OK"

404: 未找到页面

实例:
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>

史上最全ajax全套讲解

ajax简介 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax不是一种新的编程...
  • u013766533
  • u013766533
  • 2016年08月25日 14:53
  • 3851

AJAX 缓存问题的两种解决方法(IE)

做一个项目用到Ajax,开始觉得挺好,后来发现一个问题,例如删除一项,恢复之后就不能再接着删除, 必须要等一段时间,后来知道是IE缓存的问题 AJAX缓存页面是一个刚接触AJAX的人一定会遇到的问...
  • yaoyaoopen
  • yaoyaoopen
  • 2013年12月23日 16:56
  • 1446

JavaWeb中Ajax 对 Json 格式的解析

Ajax 对 Json 格式的解析        一、JSON介绍         JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,...
  • zolalad
  • zolalad
  • 2013年12月30日 19:43
  • 3042

Ajax讲解,dwr配置

  • 2009年12月31日 13:01
  • 1.85MB
  • 下载

从javascript编写者角度讲解ajax的原理

  • 2007年07月17日 14:04
  • 249KB
  • 下载

jsp+ajax源码项目及ppt讲解

  • 2008年11月13日 18:05
  • 1.76MB
  • 下载

ajax应用讲解

  • 2011年12月10日 15:45
  • 45KB
  • 下载

AJAX技术入门讲解.pdf

  • 2013年07月20日 14:11
  • 4.61MB
  • 下载

ajax简单入门讲解

  • 2011年03月29日 00:13
  • 8.59MB
  • 下载

ajax简单入门讲解

  • 2007年05月31日 16:48
  • 8.59MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX 讲解
举报原因:
原因补充:

(最多只允许输入30个字)