第四章 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.绑定事件
<td colspan="4"><input type="text" name="email" id="email" onblur="check();"/></td>
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("用户名可以使用！");
}
}