ajax

本文深入浅出地讲解了AJAX的核心原理,包括XMLHttpRequest对象的使用、GET与POST请求的区别,以及如何利用JavaScript、DOM和CSS实现服务器数据的异步更新。重点介绍了状态变化和错误处理,是前端开发者必备的AJAX入门指南。

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

Asynchronous JavaScript and XML (异步的 JavaScript 和XML)

AJAX 不是新的编程语言,而是一种使用现有标准的新方法,最大的优点是在不重新家在整个页面情况下,可以与服务器交换数据并更新部分页面内容。

XMLHttpRequest 是AJAX 的基础。

    <script>
        // 现代浏览器(IE7, Firefox, Chrome, Safari 以及Opera)均内建XMLHttpRequest 对象
        variable = new XMLHttpRequest()
        // 老版本的Internet Explorer(IE5 和IE6)使用ActiveX 对象
        variable = new ActiveXObject("Microsoft.XMLHTTP");
    </script>

 AJAX 是一种在无需重新加载整个网页情况下,能够更新部分网页技术

AJAX 是基于现有Internet 标准,并且联合使用它们:

XMLHttpRequest 对象异步的与服务器交换数据
JavaScript/DOM信息显示/交互
CSS给数据定义样式
XML作为转换数据的格式

XMLHttpRequest 对象用于和服务器交换数据

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

open(method,url,async)规定请求的类型、URl 以及是否一步处理请求
  • method: 请求的类型;GET 或POST
  • url:文件在服务器上的位置
  • async:true(异步)或false(同步)
send(string)将请求发送到服务器(string:仅用于POST 请求)

GET or POST

GET 更简单也更快,并且大部分情况下都能使用

但在以下情况下,请使用POST 请求:

无法使用缓存文件(更新服务器上的文件或数据库)

向服务器发送大量数据(POST 没有数据量限制)

发送包含未知字符的用户输入时,POST 比GET更加稳定也可靠

服务器响应

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

responseText: 获得字符串形式的响应数据

responseXML:获得XML 形式的响应数据

onreadystatechange 事件

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

onreadystatechange存储函数(或函数名),每当readyState 属性改变时,就会调用该函数
readyState存在XMLHttpRequest 的状态,从0 到4 发生变化
  • 0:请求末初始化
  • 1:服务器连接已建立
  • 2: 请求已接收
  • 3:请求处理中
  • 4:请求已完成,且响应已就绪
status
  • 200:服务器响应正常
  • 304:该资源在上次请求之后没有任何改变
  • 400:无法找到请求的资源
  • 401:访问资源的选前不够
  • 403:没有权限访问资源
  • 404:需要访问的资源不存在
  • 405:需要访问的资源被禁止
  • 407:访问的资源需要代理身份验证
  • 414:请求的URL 太长
  • 500:服务器内部错误
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值