通俗易懂讲解AJAX的工作原理

什么是AJAX?

 AJAX就是异步 JavaScript 和 XML,  它是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页

掌握AJAX的先决条件

需要掌握如下知识:

  • HTML / XHTML
  • CSS
  • JavaScript / DOM

XMLHttpRequest 对象 

XMLHttpRequest(简写为XHR)是AJAX的基础。所有现代浏览器都支持XMLHttpRequest对象(老版本的 Internet Explorer 即IE5 和 IE6使用 ActiveX 对象)。XMLHttpRequest是用于在后台与服务器交换数据。

创建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)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

向服务器发送请求

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

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法描述
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置,该文件可以是任何类型
  • async:true(异步)或 false(同步),XMLHttpRequest对象要用AJAX的话,则必须要设置为异步,不推荐使用同步,但是对于一些小的请求,也是可以使用同步的
send(string)

将请求发送到服务器。

  • string:仅用于 POST 请求

请求类型选择GET 还是 POST

相较于POST方法,GET方法更简单也更加快捷,除了下列情况,在大部分情况下使用的是GET方法:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(GET传递数据的长度限制在2048个字节,而POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠即更安全(在发送密码或者其他敏感数据时,绝对不要使用GET)

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
方法描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值

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

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

服务器响应

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

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

responseText 属性

如果来自服务器的响应并非 XML,请使用 responseText 属性。

responseText 属性返回字符串形式的响应,因此您可以这样使用:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 属性

如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:

请求  books.xml  文件,并解析响应:

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

onreadystatechange 事件

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

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

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

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

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

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

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

200: "OK"

404: 未找到页面

使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

以上都是在学习了W3C上的权威指南后摘要及总结了关于ajax的一些基本的概念,原理以及简单的用法,希望对大家有帮助

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值