Ajax实现异步和局部刷新的原理

Ajax使得网页可以在不完全刷新的情况下实现局部更新,提升了交互体验。本文介绍了Ajax的基本概念,包括其整合了JavaScript、XML等多种技术,并详细阐述了Ajax的实现原理,从创建XMLHttpRequest对象到处理服务器响应,再到利用JavaScript更新页面数据,实现局部刷新。此外,还提供了一个简单的Ajax通信的源代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、Ajax简介

Ajax(Asynchronous  Javascript  And  XML)=异步   javascript 和XML  可以是网页实现异步更新,就是不重新加载整个页面的情况下,对页面的某部分进行更新(局部刷新),传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页页面。Ajax是一种新的思想,整合之前的多种技术,用于创建快速交互式网页应用的网页开发技术。

 

ajax是一个粘合javascript、xml、、xhtml、dom、xmlhttprequest、css等技术的一个粘合剂;

ajax服务端语言无关的技术. 即可以使用在php、java、.net、asp等网站;

ajax可以给客户端返回文本、xml 、json等格式数据;

ajax是flash、java applet、框架、iframe等无刷新数据交换技术的一种。

2、Ajax的实现原理

1)、使用JavaScript获得浏览器内置的AJAX引擎(XMLHttpRequest对象)。

2)、通过AJAX引擎确定请求路径和请求参数。

3)、通知AJAX引擎发送请求。

AJAX引擎会在不刷新浏览器地址栏的情况下,发送请求。

1)、服务器获得请求参数。

2)、服务器处理请求参数(添加、查询等操作)

3)、服务器响应数据给浏览器。

AJAX引擎获得服务器响应的数据,通过执行javaScript的毁掉函数将数据传递给浏览器页面。

1)、通过设置给AJAX引擎的毁掉函数获得服务器响应的数据。

2)、使用JavaScript在指定的位置,显示响应数据,从而局部修改页面的数据,达到局部刷新目的。

传统动态网页技术(未引入Ajax技术)的浏览器与服务器交互时,请求和响应整个网页,其中包括完全没有变动过的数据、图片、JavaScript等,显然,这是一种很不经济和有效率的操作方式,有时会出新如刷新操作时的冷却及等待响应的假死现象,影响速度、观感和用户体验,特别是当两端资源有限及带宽不够时。

Ajax动态网页技术:局部更新部分网页的原理与过程(附代码)

Ajax技术则不同,只请求和响应需要更新的局部,浏览器在接收到数据后,可以使用Javascript通过DHTML或DOM(Document Object Model)模式来更新特定字段。

Ajax动态网页技术:局部更新部分网页的原理与过程(附代码)

使用ajax与服务器通信的的步骤:

1 客户端(浏览器)创建一个XMLHttpRequest对象(浏览器之间会有语法差异);

var XHR = new ActiveXObjcet('Msxml2.XMLHTTP');(IE);

var XHR = new XMLHttpRequest();(非IE);

2 客户端(浏览器)传送XMLHttpRequestt对象

Ajax动态网页技术:局部更新部分网页的原理与过程(附代码)

3 服务端(服务器端)接收ajax的请求,做相应处理(操作数据库)

4 服务端(服务器端)返回结果给客户端(浏览器)

5 客户端(浏览器)局部刷新当前页面

Ajax动态网页技术:局部更新部分网页的原理与过程(附代码)

附源代码:

var XHR = null;

function startRequest

{

XHR = new XMLHttpRequest(); //非IE

XHR.open('GET','poetry.txt'.true); //连接方式与请求内容

XHR.onreadystatechange = handleStateChange;//事件响应

XHR.send(null);//以post方式传送数据时,需要指定需要传送的参数

}

function handleStateChange()

{

if(XHR.readyState ==4)//判断request是否执行完毕

{

if(XHR.status == 200) //判断request是否执行成功

document.getElementById('span1).innerHTML = XHR.responseText;

//如果是返回的XML文件,使用responseXML属性

else

document.getElementById('span1).innerHTML = '文件开启错误!';

}

}

end!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值