Ajax与jQuery

认识Ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1] 

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

 

为什么使用Ajax

 

无刷新：不刷新整个页面，只刷新局部

 

无刷新的好处

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

提供连续的用户体验

提供类似C/S的交互效果，操作更方便

 

传统Web与Ajax的差异

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

 

Ajax工作流程

 

 

XMLHttpRequest

整个Ajax技术的核心

提供异步发送请求的能力

常用方法

方     法	说      明
open( String method,  String url,             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	没有访问权限

注：就绪状态是4 且状态码是200，表示正确完成

 

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

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

responseXML：将XML格式的响应内容解析成  DOM对象返回

 

 

使用Ajax发送GET请求及处理相应

 

使用XMLHttpRequest对象发送GET请求到服务器端，并处理文本式相应的步骤

1、创建XMLHttoRequest对象

2、设置回调函数

3、初始化XMLHttoRequest对象

4、发送请求

例如：

<script type="text/javascript">

function validate() {

var name = $("#name").val();

if (name == null || name == "") {

$("#nameDiv").html("用户名不能为空！");

} else {

//1.创建XMLHttpRequest对象

xmlHttpRequest = createXmlHttpRequest();

//2.设置回调函数

xmlHttpRequest.onreadystatechange = callBack;

//3.初始化XMLHttpRequest组件

var url = "userServlet?name=" + name;//服务器端URL地址,name为用户名文本框获取的值

xmlHttpRequest.open("GET", url, true);

//4.发送请求

xmlHttpRequest.send(null);

//Ajax 回调函数

function callBack() {

if (xmlHttpRequest.readyState == 4

&& xmlHttpRequest.status == 200) {

var data = xmlHttpRequest.responseText;

if (data == "true") {

$("#nameDiv").html("用户名已被使用！");

} else {

$("#nameDiv").html("用户名可以使用！");

}

}

}//end of callBack()

}

}//end of validate()

 

/*

 *创建XMLHttpRequest对象

 */

function createXmlHttpRequest() {

if (window.XMLHttpRequest) {//返回值为true时说明是新版本IE或其他浏览器

return new XMLHttpRequest();

} else {//返回值为false时说明是老版本IE浏览器（IE5和IE6）

return new ActiveXObject("Microsoft.XMLHTTP");

}

}

</script>

 

使用Ajax发送POST请求及处理相应

 

<script type="text/javascript">

function validate() {

var name = $("#name").val();

if (name == null || name == "") {

$("#nameDiv").html("用户名不能为空！");

} else {

xmlHttpRequest = createXmlHttpRequest();

xmlHttpRequest.onreadystatechange = callBack;

var url = "userServlet";//服务器端URL地址

xmlHttpRequest.open("POST", url, true);

xmlHttpRequest.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");

var data = "name=" + name;//需要发送的数据信息,name为用户名文本框获取的值

xmlHttpRequest.send(data);

        

//Ajax 回调函数

function callBack() {

if (xmlHttpRequest.readyState == 4

&& xmlHttpRequest.status == 200) {

var data = xmlHttpRequest.responseText;

if (data == "true") {

$("#nameDiv").html("用户名已被使用！");

} else {

$("#nameDiv").html("用户名可以使用！");

}

}

}//end of callBack()

}

}//end of validate()

 

/*

 *创建XMLHttpRequest对象

 */

function createXmlHttpRequest() {

if (window.XMLHttpRequest) {//返回值为true时说明是新版本IE或其他浏览器

return new XMLHttpRequest();

} else {//返回值为false时说明是老版本IE浏览器（IE5和IE6）

return new ActiveXObject("Microsoft.XMLHTTP");

}

}

</script>

 

 

 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" );

 

使用jQuery实现Ajax

 

传统方式实现Ajax的不足

步骤繁琐

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

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

浏览器兼容问题

 

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

 

$.ajax()简介

 

语法：

$.ajax([settubgs]);

常用属性参数

 

参  数	类  型	说      明
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 };

 

定义JSON数组

语法：var JSON数组 = [ value,  value,  …… ];

例如：

var countryArray = [ "中国",  "美国",  "俄罗斯" ];

var personArray = [ { "name":"张三",  "age":30 },

                { "name":"李四",  "age":40 } ];

 

访问JSON数组

$( JSON数组 ).each( function() { this.name } );