第四章 Ajax与jQuery

一、Ajax简介

在传统的Web应用中，每次请求服务器都会生成新的页面，用户在提交请求后，总是要等待服务器的响应。如果前一个请求没有响应，则后一个请求就不能发送，在等待期间新的页面没有生成，整个浏览器都是一片空白。对于用户而言，是一种不好的不连续的体验。

Ajax应用使用了JavaScript异步发送请求，不是每次请求都重新加载页面，发送请求时可以继续其他的操作，在服务器完成响应后，再使用JavaScript将响应展示给用户。

1. 什么是Ajax

Ajax(Asynchronous JavaScript and XML)并不是一种全新的技术，而是由JavaScript,XML,CSS等几种现有的技术整和而成。

Ajax的执行流程是: 用户界面触发事件调用JavaScript,通过Ajax引擎—XMLHttpRequest对象异步发送请求到服务器，服务器返回XML,JSON或HTML等格式的数据，然后利用返回的数据使用DOM和CSS技术更新用户界面。

2. 异步刷新的好处

1：之更新部分页面，有效利用宽带。

2：提供连续用户的体验。

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

3. 传统的Web开发和Ajax技术的区别

相同点：无论使用哪种开发技术，流程都是由客户端发送HTTP请求，然后由服务器对请求生成响应。

不同点：1.发送请求的方式不同。（传统的Web通过浏览器(form)发送请求，而Ajax则是通过JavaScript的XMLHttpRequest对象）

2.服务器响应不同。（传统的Web应用服务器响应一个完整的页面，而ajax服务器只响应需要的数据）

3.客户端处理的响应方式不同。（传统的Web应用发送请求后，浏览器将等待服务器响应完成后重新加载整个页面。Ajax不再空闲的等待响应，而是通过JavaScript动态更新页面中需要更新的部分）

二、XMLHttpRequest

XMLHttpRequest对象可以在不刷新当前页面的情况下向服务端发送异步请求，并接收服务端的响应结果，从而实现局部更新当前页面的功能。它可以接收JSON或HTML等格式的文件。

1. 创建XMLHttpRequset对象

语法：

老版本IE（IE5和IE6）

XMLHttpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

新版本IE和其他大部分浏览器

XMLHttpRequest = new XMLHttpRequest();

2. XMLHttpRequest对象常用的属性和方法

XMLHttpRequest的常用方法
方法名称	说明
Open(String method,String url,boolean async,String user,String password)	用于创建一个新的HTTP请求参数method:设置HTTP请求的方法，如POST、GET等，对大小写不敏感。参数url：请求的URL地址。参数async:可选，指定此请求是否为异步方法，默认为true。参数user:可选，如果服务器需要验证，此处需要用户名，否则会弹出验证窗口。参数password:可选，验证信息中的密码，如果用户名为空，此值将被忽略。
send(String data)	发送请求到服务器。参数data:字符串类型，通过此请求发送的数据。此参数值取决于open方法中的method参数。如果method为“POST”，可以指定该参数，如果method为“GET”，该参数值为null。
abort()	取消当前的请求。
setRequestHeader(String header,String value)	单独设置请求的某个HTTP头信息。参数header:指定HTTP头名称。参数value:指定头名称对应的值。
getResponseHeader(String header)	从响应中获取指定的HTTP头信息。参数header:获取指定HTTP 头。
getAllResponseHeaders()	获取响应的所有HTTP头信息。

XMLHttpRequest常用的属性
属性名称	说明
onreadystatechange	设置回调函数
readystate	返回请求的当前状态。 0— 未初始化 1— 开始发送请求 2— 请求发送完成 3— 开始读取响应 4— 读取响应结束
ststus	返回当前请求的HTTP状态码 200—正确返回 404—找暴怒到访问对象 500—服务器内部错误 403—没有访问权限
statusText	返回当前请求的响应行状态
responseText	以文本形式获取响应值
responseXML	以XML形式获取响应值，并解析成DOM对象返回

三、使用Ajax发送GET请求和POST请求

下面两个示例分别展示使用ajax发送请求的JavaScript（js）代码。

1、示例一：发送GET请求

//1.创建XMLHttpRequest对象

if(window. XMLHttpRequest){ //返回为true时说明是最新版本的浏览器

xmlHttpRequest=new XMLHttpRequest();

}else{ //返回为false说明时旧版本的IE5或IE6浏览器

xmlHttpRequest=new ActiveXObject(“Microsoft.XMLHTTP”);

}

//2.设置回调函数

xmlHttpRequest.onreadystatechange=callBack;//只有函数名即可，不带方法括号()

//3.初始化XMLHttpRequest组件

var url=”userServlet?name=”+name;//服务端URL地址，name为用户文本框javaScript获得的值。

xmlHttpRequest.open(“GET”,url,true);//创建一个请求

//4.发送请求

xmlHttpRequest.send(null);//”GET”请求方式参数为空

//回调函数callBack()处理服务器的响应

function callBack(){

if(xmlHttpRequest.readyState ==4 && xmlHttpRequest.status ==200){

var data=xmlHttpRequest.responseText;// 以文本形式获取响应值

if(data==”true”){ //data获取的数据类型包括String,int,boolean等基本数据类型，还有JSON;

$(“#show”).html(“用户名已经被使用！”);

}else{

$(“#show”).html(“用户名可以使用！”);

}

2、示例二：发送POST请求

//1.创建XMLHttpRequest对象

if(window. XMLHttpRequest){ //返回为true时说明是最新版本的浏览器

xmlHttpRequest=new XMLHttpRequest();

}else{ //返回为false说明时旧版本的IE5或IE6浏览器

xmlHttpRequest=new ActiveXObject(“Microsoft.XMLHTTP”);

}

//2.设置回调函数

xmlHttpRequest.onreadystatechange=callBack;//只有函数名即可，不带方法括号()

//3.初始化XMLHttpRequest组件

var url=”userServlet”;//服务端URL地址,不带参数

xmlHttpRequest.open(“POST”,url,true);//创建一个请求

xmlHttpRequest.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);//指定header值

//4.发送请求

var data=”name=”+name;//需要发送的数据信息，name为用户文本框javaScript获得的值。多个值使用&符号连接

xmlHttpRequest.send(data);//”POST”请求方式带参数

//回调函数callBack()处理服务器的响应

function callBack(){

if(xmlHttpRequest.readyState ==4 && xmlHttpRequest.status ==200){

var data=xmlHttpRequest.responseText;// 以文本形式获取响应值

if(data==”true”){ //data获取的数据类型包括String,int,boolean等基本数据类型，还有JSON;

$(“#show”).html(“用户名已经被使用！”);

}else{

$(“#show”).html(“用户名可以使用！”);

}

四、使用jQuery实现Ajax

引言：前面介绍了如何使用原生态JavaScript实现Ajax技术，但是原生态实现Ajax相对比较复杂，而且还要考虑浏览器的兼容性问题。

而jQuery将Ajax都进行了封装，只要简单的调用一个方法即可完成请求发送和复杂格式结果的解析。相比而言，使用jQuery实现Ajax更加简洁方便而且结构清晰。

1、$.ajax()方法

$.ajax()可以通过发送HTTP请求加载远程数据，是jQuery最底层的Ajax实现，具有较高的灵活性。

语法：$.ajax([settings]);

参数settings是$.ajax()方法的参数列表，用于配置ajax请求的键值对集合。

$.ajax()方法参数settings常用配置参数
参数	类型	说明
url	String	发送请求的地址，默认为当前地址
Type	String	请求方式(POST或GET，默认为GET),1.9.0之后的版本可以使用method代替type
data	PlainObject或 String或Array	发送到服务器的数据
dataType	String	预期服务器返回的数据类型，可用类型有XML、HTML、Script、JSON、JSONP、TEXT。
beforeSend	Function(jqXHR jqxhr,PlainObject settings)	发送请求前调用的函数，可用于设置请求等，返回false将终止请求。参数jaxhr:可选，jaxhr是XMLHttpRequest的超集参数settings:可选，当前ajax()方法的settings对象
success	Function(任意类型 result,String textStatus,jqXHR jqxhr)	请求成功后调用的函数参数result:可选，由服务器返回的数据参数textStatus:可选，描叙请求状态的字符串参数jqxhr:可选
error	Function(jqXHR jqxhr,String textStatus,String errorThrown)	请求失败时调用的函数参数jqxhr:可选参数textStatus:可选，错误的信息参数errorThrown:可选，文本描叙的HTTP状态`
complete	Function(jqXHR jqxhr,String textStatus)	请求完成后调用的函数（请求失败或成功均调用）参数jqxhr:可选参数textStatus:可选，描述请求状态的字符串
timeout	Number	设置请求超时时间
global	Boolean	默认为true,表示是否触发全局ajax事件

2、$.ajax()方法使用实例

1.导入jQuery的js文件

2.绑定事件

3.编写触发事件的js文件

function check(){

var email=$("#email").val();//获得文本框的值

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

alert("用户名不能为空！");

}else{

$.ajax({

"url":"Train1Servlet",

"type":"POST",//或"type":"GET",

"data":"email="+email,//发送的参数

"dataType":"text",//返回的数据类型

"success":callback,//请求成功后执行的函数

"error":function(){//请求错误后执行的函数

alert("系统错误！");

}

});

}

function callback(data){

if(data=="true"){

alert("用户名已被使用！");

}else{

alert("用户名可以使用！");

}

五、处理JSON格式的响应数据

引言：前面的ajax实现中，服务器响应内容是一些含义简单的文本，对于更多应用而言这是远远不够的。例如，电商网站中动态加载商品评论等复杂的文本，就需要用到一些结构化的数据表示方式，比如JSON。

1、JSON简介

JSON(JavaScript Object Nation)是一种轻量级的数据交互格式。

它是基于javaScript的一个子集，采用完全独立于语言的文本格式。

JSON类似于实体类对象，通常用来在客户端和服务器之间传递数据。

JSON的优点：

1、轻量级

2、结构简单

3、解析容易

2、定义JSON

定义JSON对象语法：var JSON对象=｛name:value,name:value…｝;

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

示例：var person=[{“name”:”张胜男”,”age”:30}，{“name”:”张胜”,”age”:39}];

3、展示JSON

$(document).ready(function() {

//1、定义JSON格式的user对象，并在div中输出

var user = {

"id" : 1,

"name" : "张三",

"pwd" : "000"

};

$("#objectDiv").append("ID：" + user.id + "<br>")

.append("用户名：" + user.name + "<br>")

.append("密码：" + user.pwd + "<br>");

//2、定义JSON格式的字符串数组，并在ul和select中输出

var ary = [ "中", "美", "俄" ];

var $ary = $(ary);//转换成jQuery对象

var $ul = $("#arrayUl"); // 展示数据的ul元素

var $sel = $("#arraySel"); // 展示数据的select元素

$ary.each(function() { $ul.append("<li>"+this+"</li>"); });

$ary.each(function(i) {

$sel.append("<option value='"+(i+1)+"'>"+this+"</option>");

});

//3、定义JSON格式的user对象数组，并使用<table>输出

var userArray = [ {

"id" : 2,

"name" : "admin",

"pwd" : "123"

}, {

"id" : 3,

"name" : "詹姆斯",

"pwd" : "11111"

}, {

"id" : 4,

"name" : "梅西",

"pwd" : "6666"

} ];

var $table = $("<table border='1'></table>").append(

"<tr><td>ID</td><td>用户名</td><td>密码</td></tr>");

$(userArray).each(function() {

$table.append("<tr><td>" + this.id + "</td><td>"

+ this.name + "</td><td>"

+ this.pwd + "</td></tr>");

});

$("#objectArrayDiv").append($table);

});

4、JSON的实际应用

1、servlet部分代码

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

req.setCharacterEncoding("UTF-8");

resp.setContentType("text/htl;charset=UTF-8");

String email=req.getParameter("email");

StringBuffer used=new StringBuffer("{\"result\":");

if(email.equals("777@qq.com")) {

used.append("1");

}else {

used.append("0");

}

used.append("}");

PrintWriter out=resp.getWriter();

out.print(used);

out.flush();

out.close();

}

2、js事件代码

function check(){

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

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

alert("用户名不能为空！");

}else{

$.ajax({

"url":"Train1Servlet3",

"type":"POST",//"type":"GET",

"data":"email="+email,

"dataType":"json",

"success":callback,

"error":function(){

alert("系统错误！");

}

});

}

function callback(data){

var i=data;//返回i = Object {result: 0}

var t=data.result;//返回 t = 0

if(data.result==1){//t==1

alert("用户名已被使用！");

}else{

alert("用户名可以使用！");

}