Ajax的原理及实现过程

　　介绍

这篇文章主要介绍”Ajax的原理及实现过程”,在日常操作中,相信很多人在Ajax的原理及实现过程问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答“Ajax的原理及实现过程”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

<强> 1。什么是Ajax吗?

AJAX全称为“异步JavaScript和XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。它使用:

使用XHTML + CSS来标准化呈现;
使用XML和XSLT进行数据交换及相关操作,
使用XMLHttpRequest对象与Web服务器进行异步数据通信;
使用JavaScript操作文档对象模型进行动态显示及交互;
使用JavaScript绑定和处理所有数据。

<强> 2. AJAX的工作原理

AJAX的工作原理相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给AJAX引擎自己来做,只有确定需要从服务器读取新数据时再由AJAX引擎代为向服务器提交请求。

, AJAX:异步JavaScript和XML,实现了客户端与服务器进行数据交流过程。使用技术的好处是:不用页面刷新,并且在等待页面传输数据的同时可以进行其他操作。

这就是异步调用的很好体现。首先得了解什么是异步和同步的概念。

,,举个例子:比如你去图书馆借某种书,可惜图书馆此书被借完。这时可以采用两种做法。

第一种做法:在图书馆一直等待,直到有人还书,然后再去吃饭睡觉。

第二种做法:直接跟图书馆管理员约定,若是有人还书,直接通知你。你则该忙什么忙什么。到时候会通知你。

而第一种做法就是同步的表现,必须等待别人还书(等待服务器返回信息)才进行其他事情,至死方休。

而第二种做法就是异步的表现,不耽误时间,合理利用时间高效率做事。

<强>遇到这种情况,你会采用那种办法呢?

选择第一种,哈哈,说明你太执着啦,选择第二种,说明你灵活变通,合理安排自己的人生。你自己看着办吧。

<强>,那Ajax是如何从浏览器发送Http请求到服务器呢?

,这就得使用一个重要的对象XMLHttpRequest。

,那首先了解一下XMLHttpRequest对象的属性和方法。

<强>,主要的属性:

readyState属性有五个状态值。

0:是未初始化,未初始化。已经创建了XMLHttpRequest对象但是未初始化。
1:是装载时,发送的请求而不是。已经开始准备好要发送了。
2:是加载,发送,标题和地位。已经发送,但是还没有收到响应。
3:是互动,下载响应,但responseText alt=" Ajax的原理及实现过程">

<强>测试代码如下:

,,,,<>强创建xmlHttpRequest对象:

function  createXMLHttpRequest (), {//表示当前浏览器不是即如ns, firefox 　　如果(window.XMLHttpRequest), { 　　时间=xmlHttp  new  XMLHttpRequest (); 　　},else  if  (window.ActiveXObject), { 　　时间=xmlHttp  new  ActiveXObject (“Microsoft.XMLHTTP"); 　　} 　　,} 　　,,客户端事件触发:,, 　　,,function 验证(字段){ 　　,,如果(修剪(field.value) . length !=0) 　　,,{ 　　,//创建XMLHttpRequest 　　,createXMLHttpRequest (),; 　　,var  url=皍ser_validate.jsp ?用户id=? +,修剪(field.value) +“, timestampt=? new 日期().getTime (); 　　,//警报(url); 　　,xmlHttp.open (“GET", url,,真的); 　　,//方法地址。处理完成后自动调用,回调。 　　,xmlHttp.onreadystatechange=callback ; 　　,xmlHttp.send (null);//将参数发送到Ajax引擎 　　其他,},{,. getelementbyid (“userIdSpan") .innerHTML =,,,,,},, 　　以前,}

<强>结果返回操作:

function 回调(){ 　　,{,, 　　,警报(xmlHttp.readyState); 　　,如果(xmlHttp.readyState==4) {,//Ajax引擎初始化 　　,如果(xmlHttp.status==200) {,//http协议成功 　　,//警报(xmlHttp.responseText); 　　,. getelementbyid (“userIdSpan") .innerHTML =,“& lt; font 颜色=& # 39;红色# 39;在“,+,xmlHttp.responseText  +,“& lt;/font>“; 　　其他,} 　　,,{ 　　,,,警报(“请求失败,错误码=? xmlHttp.status); 　　,,},,,, 　　,} 　　以前,}

注意:

,,,,,>到此,关于“Ajax的原理及实现过程”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

Ajax的原理及实现过程