Ajax与JQuery

一、认识Ajax

1.1 web2.0的特点

  • 用户贡献内容
  • 内容聚合RSS
  • 更丰富的用户体验

1.2 Ajax的优势

无刷新:不刷新整个业务,只刷新局部

无刷新的好处:

  • 只更新部分页面,有效利用带宽
  • 提供连续的用户体验
  • 提供类似C/S的交互效果,操作更方便

1.3 传统web与Ajax的区别

1.4 Ajax工作流程

二、XMLHttpRequest

步骤:

  1. 创建XMLHttpRequest对象
  2. 调用open方法设置请求类型和url
  3. 调用send方法发送请求参数
  4. 调用回调函数,根据就绪状态和响应码判断请求响应是否成功
  5. 如果成功,则解析服务器端相应的数据,对客户端进行动态渲染
  • 整个Ajax技术的核心
  • 提供异步发送请求的能力
  • 常用方法

2.1 事件

onreadystatechange:指定回调函数

2.2 常用属性

readyState:XMLHttpRequest的状态信息

|-----------|---------------------------------|
| 就绪状态码 | 说 明 |
| 0 | XMLHttpRequest****对象未完成初始化 |
| 1 | XMLHttpRequest****对象开始发送请求 |
| 2 | XMLHttpRequest****对象的请求发送完成 |
| 3 | XMLHttpRequest****对象开始读取响应 |
| 4 | XMLHttpRequest****对象读取响应结束 |

status:HTTP的状态码

|---------|---------------|
| 状态码 | 说 明 |
| 200 | 服务器正确返回响应 |
| 404 | 请求的资源不存在 |
| 500 | 服务器内部错误 |
| 403 | 没有访问权限 |
| ... | ...... |

就绪状态是4且状态码是200,表示正确完成

statusText:返回当前请求的响应状态

responseText:以文本形式获得响应的内容

responseXML:将XML格式的相应内容解析为DOM对象

2.3 get请求和post请求的区别

三、使用jQuery实现Ajax

3.1 传统方式实现Ajax的不足

  • 步骤繁琐
  • 方法、属性、常用值较多不好记忆
  • 处理复杂结构的响应数据(如XML格式)比较繁琐
  • 浏览器兼容问题

3.2 $.ajax()简介

javascript 复制代码
$.ajax([settings]);

常用参数属性

常用函数参数

四、JSON

相关推荐
都叫我大帅哥31 分钟前
深入浅出 Resilience4j:Java 微服务的“免疫系统”实战指南
java·spring cloud
Cao_Shixin攻城狮3 小时前
Flutter运行Android项目时显示java版本不兼容(Unsupported class file major version 65)的处理
android·java·flutter
Dcs5 小时前
还在用 Arrays.hashCode?Java 自己也能写出更快的版本!
java
fouryears_234177 小时前
Spring,Spring Boot 和 Spring MVC 的关系以及区别
java·spring boot·spring·mvc
阿葱(聪)8 小时前
java 在k8s中的部署流程
java·开发语言·docker·kubernetes
浮生带你学Java8 小时前
2025Java面试题及答案整理( 2025年 7 月最新版,持续更新)
java·开发语言·数据库·面试·职场和发展
板板正8 小时前
SpringAI——提示词(Prompt)、提示词模板(PromptTemplate)
java·spring boot·ai·prompt
板板正8 小时前
SpringAI——对话记忆
java·spring boot·ai
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
李长渊哦9 小时前
深入理解Java中的Map.Entry接口
java·开发语言