Ajax与jQuery

1.Ajax

只更新部分页面,有效利用带宽

提供连续的用户体验

提供类似C/S的交互效果,

操作更方便

2.传统Web与Ajax的差异

|---------------|----------------|---------------------------------------|
| 差异 | 方式 | 说 明 |
| 发送请求方式不同 | 传统****Web | 浏览器发送同步请求 |
| 发送请求方式不同 | Ajax****技术 | 异步引擎对象发送请求 |
| 服务器响应不同 | 传统****Web | 响应内容是一个完整页面 |
| 服务器响应不同 | Ajax****技术 | 响应内容只是需要的数据 |
| 客户端处理方式不同 | 传统****Web | 需等待服务器响应完成并重新加载整个页面后用户才能进行操作 |
| 客户端处理方式不同 | Ajax****技术 | 可以动态更新页面中的部分内容 不影响用户在页面进行其他操作 |

3.XMLHttpRequest常用方法

|-------------------------------------------------------------------------------------------------------------|----------------------------|
| 方 法 | 说 明 |
| open( String method, Stringurl,boolean async, String user, String password**)** | 创建一个新的HTTP请求 |
| send( String data ) | 发送请求到服务器端 |
| abort( ) | 取消当前请求 |
| setRequestHeader**( String header, String value )** | 设置请求的某个HTTP头信息 |
| getResponseHeader**( String header )** | 获取响应的指定HTTP头信息 |
| getAllResponseHeader**( )** | 获取响应的所有HTTP头信息 |

4.XMLHttpRequest事件

传统Web与Ajax的差异onreadystatechange:指定回调函数

常用属性

readyState:XMLHttpRequest的状态信息

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

5.get请求和post请求的区别

|-----------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 步 骤 | 请求方式 | 实 现 代 码 |
| 初始化组件 | GET | xmlHttpRequest.open**( "GET",url, true );** |
| 初始化组件 | POST | xmlHttpRequest.open**( "POST",url, true );** xmlHttpRequest .setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); |
| 发送请求 | GET | xmlHttpRequest.send**(null);** |
| 发送请求 | POST | xmlHttpRequest.send**(** "key=xxx&type=12&year=2016"****); |

  1. 使用jQuery实现Ajax

传统方式实现Ajax的不足

步骤繁琐

方法、属性、常用值较多不好记忆

处理复杂结构的响应数据(如XML格式)比较烦琐

浏览器兼容问题

7.使用$.ajax()发送请求

$.ajax( {

"url" : "url", // 要提交的URL路径

"type" : "get", // 发送请求的方式

"data" : data, // 要发送到服务器的数据

"dataType" : "text", // 指定传输的数据格式

"success" : function(result) { // 请求成功后要执行的代码

},

"error" : function() { // 请求失败后要执行的代码

}

} );

8.定义JSON对象

var JSON对象 = { "name" : value, "name" : value, ...... };

var person = { "name" : "张三", "age" : 30, "spouse" : null };

9.jQuery中的Ajax方法

​​​​​​​$.ajax()

$.get()

$.post()

$.getJSON()

.load()

......

可以省略对应的一部分

相关推荐
新中地GIS开发老师27 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang34 分钟前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_39 分钟前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含43 分钟前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端43 分钟前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm
颜酱2 小时前
用搬家公司的例子来入门webpack
前端·javascript·webpack