11.Ajax与jQuery

Ajax

1. 为什么使用Ajax?
   1. 无刷新：不刷新整个页面，只刷新局部
   2. 无刷新的好处
      • 只更新部分页面，有效利用带宽
      • 提供连续的用户体验
      • 提供类似C/S的交互效果，操作更方便

 

Ajax与jQuery

1. 问题分析1：整体开发思路

系统开发步骤

1. 问题分析2：界面交互设计

界面交互设计的原则

1. 问题分析3：技术分析

技术实现中需要考虑的问题

1. • • 采用Ajax技术后对于页面导航需求和页面构建的调整
     • 采用Ajax技术后对于响应数据结构的调整
     • 采用Ajax技术后对于Servlet中功能实现的调整
2. 难点分析：技术实现
   1. 使用动态拼接SQL的方式合并查询所有新闻和按主题查询新闻功能
   2. 使用Ajax技术实现分页
   3. 使用Ajax技术加载添加/修改主题的操作界面
3. 开发计划

1. 用例2：添加主题

可以实现对动态HTML元素的事件绑定

扫描二维码关注公众号，回复： 8984387 查看本文章

 

 

 

1. 传统Web与Ajax的差异

异步引擎对象:

有我们的js封装好的一个对象,利用这一个对象,给我们的服务器发送一次请求.

Ajax发送的请求就是异步请求 .

1. Ajax简介

Ajax：异步刷新技术

 

1. Ajax工作流程

1. XMLHttpRequest 3-1
   1. 整个Ajax技术的核心
   2. 提供异步发送请求的能力
   3. 常用方法

 

1. XMLHttpRequest 3-2
   1. 事件
      • onreadystatechange：指定回调函数
   2. 常用属性
      • readyState：XMLHttpRequest的状态信息

 

1. XMLHttpRequest 3-3

常用属性（续）

1. 1. status：HTTP的状态码

1. 1. statusText：返回当前请求的响应状态
   2. responseText：以文本形式获得响应的内容
   3. responseXML：将XML格式的响应内容解析成  DOM对象返回

 

1.  GET请求和POST请求的区别

 

1. 使用jQuery实现Ajax

传统方式实现Ajax的不足

1. 1. 步骤繁琐
   2. 方法、属性、常用值较多不好记忆
   3. 处理复杂结构的响应数据（如XML格式）比较烦琐
   4. 浏览器兼容问题

注意:

jQuery将Ajax相关操作都进行了封装

 

 

 

1. $.ajax()简介2-1

语法:

$.ajax( [settings] );

 

常用属性参数

url:发送请求到~的地址

 

1. $.ajax()简介2-2

常用函数参数

 

1. 使用$.ajax()发送异步请求

 

1. 认识JSON
   1. JSON（JavaScript  Object  Notation）
      • 一种轻量级的数据交换格式
      • 采用独立于语言的文本格式
      • 通常用于在客户端和服务器之间传递数据
   2. JSON的优点
      • 轻量级交互语言
      • 结构简单
      • 易于解析
2. 定义JOSN

定义JSON对象-----定义JSON数组

1. 在Ajax中使用JSON数据格式

使用Ajax技术改造管理员首页

1. 1. 使用Ajax技术初始化加载全部新闻
   2. 使用JSON格式封装新闻信息
2. 总结