Ajax入门

Ajax是一种无需重新加载整个网页的情况下,能够更新部分网页的技术。例如在Google的搜索栏中输入搜索内容时,会根据当前输入内容出现提示列表,这里就用到了Ajax技术。

Ajax技术是对传统Web应用的一种补充与改善,提高了用户的顺畅体验,用户不需要繁琐的刷新等待即可获取新数据。

Ajax = Asynchronous JavaScript and XML 即异步的JavaScript 和XML,Ajax不是新的编程语言, 而是一种使用现有标准的新方法。Ajax的核心内容是XMLHttpRequest对象,Ajax使用XMLHttpRequest异步发送请求,并使用XMLHttpRequest对象的responseText或responseXML来获取服务器相应,在通过DOM操作将服务器响应动态加载到当前页面中。

所以主要任务分为创建XMLHttpRequest对象,使用XMLHttpRequest对象异步发送请求,并设置响应函数监听服务器的响应。

1. 创建XMLHttpRequest对象

var xmlhttp;

在IE5、IE6浏览器中,创建XMLHttpRequest对象

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"):

在IE7+、Chrome、Firefox、Opera等浏览器中,则用如下方式

xmlhttp = new XMLHttpRequest();

所以,总的创建方式如下

var xmlhttp;

if(window.XMLHttpRequest){

xmlhttp = new XMLHttpRequest();

}else{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

2. 使用XMLHttpRequest对象异步发送请求

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

假设我们服务器中有一个返回当前时间的接口,地址相对当前网页为getTime,方法为GET

则可以用

xmlhttp.open("GET","getTime",true);

xmlhttp.send();

xmlhttp的open方法的第一个参数是请求类型GET或POST,第二个参数为请求url,和from中的action类似,第三个参数为是否异步发送,绝大部分情况下为true

3.设置响应函数

XMLHttpRequest的readyState属性为XMLHttpRequest的状态。从0到4发生变化。0 :请求未初始化 1:服务器连接已建立 2:请求已接收 3:请求处理中 4:请求已完成,且响应已就绪。XMLHttpRequest的status为返回结果代码, 200 : "OK" 404 : 未找到页面

XMLHttpRequest的onreadystatechange属性用于存储函数,当readyState属性改变时,就会调用该函数。

我们设置请求已完成且响应已就绪即readyState ==4 ,且状态为200时,改变id为myDiv的div中的内容为服务器返回的内容。可以使用XMLHttpRequest对象的responseText属性或responseXML属性来获得服务器的响应。

如果来自服务器的相应并非XML,则使用responseText属性。如果来自服务器的响应是XML,且要需要作为XML对象进行解析,则使用repsonseXML属性;

在本例中,将服务器返回的时间加载到id为myDiv的div区域中

xmlhttp.onreadystatechange = function(){

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

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

}

}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高级Java进阶之路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值