目录
Ajax与jQuery
Ajax
传统Web与Ajax的差异
Ajax简介
Ajax的作用
如何使用Ajax?
Ajax工作流程
XMLHttpRequest
使用Ajax验证用户名
GET请求和POST请求的区别
对AJAX的总结
使用jQuery实现Ajax
$.ajax()简介
使用$.ajax()发送异步请求
JSON
定义JSON对象
Ajax与jQuery
Ajax
为什么要使用Ajax：无刷新：不刷新整个页面，只刷新局部
无刷新的好处：
只更新部分页面，有效利用带宽
提供连续的用户体验
提供类似C/S的交互效果，操作更方便
传统Web与Ajax的差异
| 差异 | 方式 | 说 明 |
|---|---|---|
| 发送请求方式不同 | 传统Web | 浏览器发送同步请求 |
| 发送请求方式不同 | Ajax技术 | 异步引擎对象发送请求 |
| 服务器响应不同 | 传统Web | 响应内容是一个完整页面 |
| 服务器响应不同 | Ajax技术 | 响应内容只是需要的数据 |
| 客户端处理方式不同 | 传统Web | 需等待服务器响应完成并重新加载整个页面后用户才能进行操作 |
| 客户端处理方式不同 | Ajax技术 | 可以动态更新页面中的部分内容不影响用户在页面进行其他操作 |
Ajax简介
Ajax：异步刷新技术
Asynchronous 异步的 JavaScript And Xml
Ajax是什么?
Ajax是一种使用现有技术集合，技术内容包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
用于浏览器与服务器之间使用异步数据传输(HTTP 请求),做到局部请求以实现局部刷新
Ajax的作用
1.不刷新页面而更新网页(局部刷新) 2.在页面加载后从服务器请求数据 3.在页面加载后从服务器接收数据 4.在后台向服务器发送数据
如何使用Ajax?
1.创建XMLHttpRequest对象
2.使用open方法设置和服务器的交互信息
3.设置requestHeader() request.setRequestHeader(属性名称, 属性值);
4.send() 设置发送的数据，开始和服务器端交互
5.取得响应，注册事件
Ajax工作流程
XMLHttpRequest
整个Ajax技术的核心
提供异步发送请求的能力
常用方法
| 方 法 | 说 明 |
|---|---|
| open( String method, String ur, boolean async, String user, String password ) | 创建一个新的HTTP请求 |
| send( String data ) | 发送请求到服务器端 |
| abort( ) | 取消当前请求 |
| setRequestHeader( String header, String value ) | 设置请求的某个HTTP头信息 |
| getResponseHeader( String header ) | 获取响应的指定HTTP头信息 |
| getAllResponseHeader( ) | 获取响应的所有HTTP头信息 |
事件
onreadystatechange：指定回调函数
常用属性
readyState：XMLHttpRequest的状态信息
| 就绪状态码 | 说 明 |
|---|---|
| 0 | XMLHttpRequest对象未完成初始化 |
| 1 | XMLHttpRequest对象开始发送请求 |
| 2 | XMLHttpRequest对象的请求发送完成 |
| 3 | XMLHttpRequest对象开始读取响应 |
| 4 | XMLHttpRequest对象读取响应结束 |
status：HTTP的状态码
| 状态码 | 说 明 |
|---|---|
| 200 | 服务器正确返回响应 |
| 404 | 请求的资源不存在 |
| 500 | 服务器内部错误 |
| 403 | 没有访问权限 |
| … | …… |
statusText：返回当前请求的响应状态
responseText：以文本形式获得响应的内容
responseXML：将XML格式的响应内容解析成DOM对象
使用Ajax验证用户名
实现无刷新用户名验证
当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在
如果已经存在提示 “用户名已被使用”，如果不存在则提示 “用户名可以使用”
使用文本框的onBlur事件
使用Ajax技术实现异步交互
创建XMLHttpRequest对象
通过XMLHttpRequest对象设置请求信息
向服务器发送请求
创建回调函数，根据响应状态动态更新页面
编写服务器端处理客户端请求
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" ); |
对AJAX的总结
AJAX是异步的JavaScript和XML; AJAX是一种用于创建更好更快以及交互性更强的Web应用程序的技术; AJAX是一种独立于Web服务器软件的浏览器技术; AJAX不是一种新的编程语言，而是一种技术; AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据（前端后端交互）; AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求）。
使用jQuery实现Ajax
传统方式实现Ajax的不足
步骤繁琐
方法、属性、常用值较多不好记忆
处理复杂结构的响应数据（如XML格式）比较烦琐
浏览器兼容问题
$.ajax()简介
封装Ajax请求
参数以JSON格式出现
$.ajax( [settings] );
常用属性参数
| 参 数 | 类 型 | 说 明 |
|---|---|---|
| url | String | 发送请求的地址，默认为当前页地址 |
| type | String | 请求方式，默认为GET |
| data | PlainObject或 String或Array | 发送到服务器的数据 |
| dataType | String | 预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text |
| timeout | Number | 设置请求超时时间 |
| global | Boolean | 表示是否触发全局Ajax事件，默认为true |
常用函数参数
| 参 数 | 类 型 | 说 明 |
|---|---|---|
| beforeSend | Function ( jqXHR jqxhr, PlainObject settings ) | 发送请求前调用的函数 |
| success | Function( 任意类型 result, String textStatus, jqXHR jqxhr) | 请求成功后调用的函数参数result：可选，由服务器返回的数据 |
| error | Function ( jqXHR jqxhr, String textStatus, String errorThrown ) | 请求失败时调用的函数 |
| complete | Function ( jqXHR jqxhr, String textStatus) | 请求完成后（无论成功还是失败）调用的函数 |
使用$.ajax()发送异步请求
$.ajax( {
"url" : "url", // 要提交的URL路径
"type" : "get", // 发送请求的方式
"data" : data, // 要发送到服务器的数据
"dataType" : "text", // 指定传输的数据格式
"success" : function(result) { // 请求成功后要执行的代码
},
"error" : function() { // 请求失败后要执行的代码
}
} );JSON
JSON（JavaScript Object Notation）
一种轻量级的数据交换格式
定义和访问
一种轻量级的数据交换格式
采用独立于语言的文本格式
通常用于在客户端和服务器之间传递数据
JSON的优点
轻量级交互语言
结构简单
易于解析
定义JSON对象
var JSON对象 = { "name" : value, "name" : value, …… };
var person = { "name" : "张三", "age" : 30, "spouse" : null };
var JSON数组 = [ value, value, …… ];
var countryArray = [ "中国", "美国", "俄罗斯" ];
var personArray = [ { "name":"张三", "age":30 },
{ "name":"李四", "age":40 } ];
