Javascript -- ajax

本文详细介绍了Ajax技术的工作原理及其应用场景,包括如何使用XMLHttpRequest对象实现客户端与服务器间的异步交互,展示了智能表单验证等实际案例。

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

使得一个web应用包含数个页面,并且导致用户的体验杂乱而又缺乏连贯性。
远程脚本运行客户端通过js向服务器发送请求,并接受服务器响应的数据,而无须刷新整个页面;同样我们可以实现页面的局部刷新,加载所需部分,而不须重新加载整个web页面
google map:输入一个地点后,主页无须重新加载,该地点的地图将动态加载到页面
google suggest:进行搜索时,显示与关键字相关的,你感兴趣的条目。并且返回搜索该条目的记录条数。

Asynchronous JavaScript + XML(异步js+xml)简称Ajax.可以归结为使用远程脚本来实现客户端/浏览器之间的通信。

XMLHttpRequest对象,打开一个到服务器的HTTP连接,并从服务器上获取XML数据。它是一个window对象的一个子对象,我们只需调用XMLHttpRequest对象的构造函数就行
var oHttp = new XMLHttpRequest();
而对于IE浏览器还是根据ActiveX控件对象来实现

一旦创建了XMLHttpRequest对象,我们就可以准备向服务器发送请求并获得数据。这一步需调用对象的open()方法
oHttp.open(requestType,url,async);
requestType:表示请求类型的字符串,可选值为GET/POST
url:目标服务器的URL
async:为true表示按照异步方式发送

send()方法向服务器发送请求,只接受一个参数,通常是一个字符串,作为请求体的一部分发送到目标服务器,当用GET方式时,并不需将数据作为请求的一部分进行发送,这时必须传入一个null.

XMLHttpRequest对象有一个status属性,表示目标服务器HTTP的响应状态,如果在目标服务器上请求未找到,返回代码404,如果成功则返回的HTTP响应代码是200

异步请求
处理异步请求的关键在于使用XMLHttpRequest对象的onreadystatechange事件处理器。当请求是异步方式,XMLHttpRequest对象提供一个readyState属性。属性的值是一个数值表示:
0:XMLHttpRequst对象创建,但未调用Open()方法
1:open()方法已经调用,但未向服务器发送请求
2:已经将请求发送到目标服务器
3:已经接受来自服务器的响应
4:从服务器返回的http响应已经被完全接受

当readyState=4 并且 status=200时表示响应成功

智能表单
在用户提交表单之前,告诉用户它所申请的用户名是否可用
最简单的方法就是提供一个超链接以发起一个目标服务器的HTTP请求,以检查用户申请的用户名等信息是否可用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值