ajax

最新推荐文章于 2025-07-29 18:00:39 发布

Lo-ra

最新推荐文章于 2025-07-29 18:00:39 发布

阅读量91

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yana_loo/article/details/116474960

本文深入浅出地讲解了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:服务器内部错误