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

相关推荐
腥臭腐朽的日子熠熠生辉23 分钟前
解决maven失效问题(现象:maven中只有jdk的工具包,没有springboot的包)
java·spring boot·maven
ejinxian24 分钟前
Spring AI Alibaba 快速开发生成式 Java AI 应用
java·人工智能·spring
杉之30 分钟前
SpringBlade 数据库字段的自动填充
java·笔记·学习·spring·tomcat
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
俏布斯1 小时前
算法日常记录
java·算法·leetcode
27669582921 小时前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿
爱的叹息1 小时前
Java 连接 Redis 的驱动(Jedis、Lettuce、Redisson、Spring Data Redis)分类及对比
java·redis·spring
程序猿chen1 小时前
《JVM考古现场(十五):熵火燎原——从量子递归到热寂晶壁的代码涅槃》
java·jvm·git·后端·java-ee·区块链·量子计算
松韬2 小时前
Spring + Redisson:从 0 到 1 搭建高可用分布式缓存系统
java·redis·分布式·spring·缓存
绝顶少年2 小时前
Spring Boot 注解:深度解析与应用场景
java·spring boot·后端