Ajax和jQuery
认识Ajax
传统的Web开发技术和Ajax技术有什么区别?
无论使用哪种开发技术,流程都是先由客户端发送HTTP请求,然后由服务器对请求生成响应.但传统的Web开发技术和Ajax技术之间还是存在很多差异.
差异1:发送请求不同.
传统Web应用通过浏览器发送请求,而Ajax技术则是通过JavaScript的XMLHttpRequest对象.
差异2:服务器响应不同
针对传统Web应用,服务器的响应是一个完整的页面,而采用Ajax技术后,服务器的响应只是需要的数据.
差异3:客户端处理的响应方式不同
传统的Web应用发送请求后,浏览器将等待服务器响应完成后重新加载整个页面.而采用Ajax技术后,浏览器不再空闲等待请求的响应,而只是通过JavaScript动态更新页面中需要更新的部分
Ajax简介
Ajax(Asynchronous JavaScript and XML),是由JavaScript,XML,CSS等几种现有技术整合而成,Ajax的执行流程是,用户界面触发事件调用JavaScript,通过Ajax引擎——XMLHttpRequest对象异步发送请求到服务器,服务器返回XML,JSON或HTML等格式的数据,然后利用返回的数据使用DOM和CSS技术局部更新用户界面.整个的工作流程如下
Ajax的关键元素包括以下内容:
JavaScript语言:Ajax技术的主要开发语言
XML/JSON/HTML等:用来封装请求或响应的数据格式
DOM(文档对象模型):通过DOM属性或方法修改页面元素,实现页面局部刷新
CSS:改变样式,美化页面效果,提升用户体验度
Ajax引擎:即XMLHttpRequest对象,以异步方式在客户端与服务器端之间传递数据
XMLHttpRequest
1.创建XMLHttpRequest
//老版本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,同步:false 参数user:可选,如果服务器需要验证,此处需要指定用户名;否则,会弹出验证窗口 参数password:可选,验证信息中的密码,如果用户名值为空,此值将被忽略 |
send(String data) | 发送请求到服务器端 参数data:字符串类型,通过此请求发送的数据,此参数值取决于open方法中的method参数,参过method值为"POST",可以指定该参数,如果method为"GET",该参数为null |
abort() | 取消当前请求 |
setRequestHeader(String header,String value) | 单独设置请求的某个HTTP头信息 参数header:要指定的HTTP头名称 参数value:要指定的HTTP头名称所对应的值 |
getResponseHeader(String header) | 从参数中获取指定的HTTP头信息 参数header:要指定的HTTP头 |
getAllResponseHeaders() | 获取响应的所有HTTP头信息 |
XMLHttpRequest的常用属性
属性名称 | 说明 |
---|---|
onreadystatechange | 设置回调函数 |
readyState | 返回请求的当前状态 常用值: 0——未初始化 1——开始发送请求 2——请求发送完成 3——开始读取响应 4——读取响应结果 |
status | 返回当前请求的HTTP状态码 常用值: 200——服务器正确返回响应 404——找不到访问对象 500——服务器内部错误 403——没有权限访问 |
statusText | 返回当前请求的响应行状态 |
responseText | 以文本形式获取响应值 |
responseXML | 以XML形式获取响应值,并且解析成DOM对象返回 |
使用Ajax发送GET请求及处理响应
使用XMLHttpRequest对象发送GET请求到服务器端,并处理文本方式响应,需要通过一下四个步骤实现:
- 创建XMLHttpRequest对象.通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式
- 设置回调函数.通过onreadystatechange属性设置回调函数,其中回调函数需要自定义
- 初始化XMLHttpRequest对象.通过open()方法设置请求的发送方式和路径
- 发送请求
使用Ajax发送POST请求及处理响应
发送方式 | 步骤三:初始化XMLHttpRequest对象 | 步骤四:发送请求 |
---|---|---|
GET | 指定XMLHttpRequest对象的open()方法中的method参数为"GET" | 指定XMLHttpRequest对象的send()方法中的data参数为"null" |
POST | (1)指定XMLHttpRequest对象的open()方法中的method参数为"POST" (2)指定XMLHttpRequest对象要请求的HTTP头信息,该HTTP请求头信息为固定写法 | 可以指定XMLHttpRequest对象的send()方法中的data参数的值,即刻请求需要携带的具体数据.多个名/值对使用"&"连接 |
需要注意的是:采用GET方式发送请求时,通常会将需要携带的参数附加在URL路径后面一起发送,xmlHttpRequest.send()方法不能传递参数,data参数设置为null即可,而采用POST方式发送请求时,则可以在xmlHttpRequest.send()方法中指定传递的参数
使用jQuery实现Ajax
$.ajax()方法
$.ajac()可以通过发送HTTP请求加载远程数据,是jQuery最底层的Ajax实现,具有较高灵活性
$.ajax([settings]);
参数settings是$.ajax()方法的参数列表,用于设置Ajax请求的键值对集合.常用配置参数如下
$.ajax()常用配置参数
参数 | 类型 | 说明 |
---|---|---|
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将终止请求 参数jqxhr:可选,jqXHR是XMLHttpRequest的超集 参数settings:可选,当前ajax()方法的settings对象 |
success | Function(任意类型 result,String textStatus,jqXHR jqxhr,) | 请求成功后调用的函数 参数result:可选,由服务器返回的数据 参数textStatus:可选,描述请求状态的字符串 参数jqxhr:可选 |
error | Function(jqXHR jqxhr,String testStatus,String errorThrown) | 请求失败时被调用的函数 参数jqxhr:可选 参数textStatus:可选,错误信息 参数errorThrown:可选,文本描述的HTTP状态 |
complete | Function(jqXHR jqxhr,String testStatus) | 请求完成后调用的函数(请求完成或失败时均可调用) 参数jqxhr:可选 参数textStatus:可选,描述请求状态的字符串 |
timeout | Number | 设置请求超时时间 |
global | Boolean | 默认为true,表示是否触发全局Ajax事件 |
//示例
$.ajax({
"url" : "userServlet", //要提交的URL路径
"type" : "GET", //发送请求的方式
"data" : "name="+name, //要发送到服务器的数据
"dataType" : "text", //指定返回的数据格式
"success" : callBack, //响应成功后要执行的代码
"error" : function() { //请求失败后要执行的代码
alert("用户名验证时出现错误,请稍后再试或与管理员联系!");
}
});
//响应成功时的回调函数
function callBack(data) {
if (data == "true") {
$("#nameDiv").html("用户名已被使用!");
} else {
$("#nameDiv").html("用户名可以使用!");
}
}//end of callBack()
处理JSON格式的响应数据
JSON简介
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.它基于JavaScript的一个子集,采用完全独立于语言的文本格式.JSON类似于实体类对象通常用在客户端和服务器之间传递数据.
1.定义JSON对象
var JSON对象 = {name:value,name:value,...};
/*例如:*/
var person = {"name":"张三",“age":30,"spouse":null};
JSON数据以名/值对的格式书写,名和值用":“隔开,名/值对之间用”,“隔开,整个表达式放在”{ }“中.其中,name必须是字符串,由双引号(” ")括起来,value可以实String,Number,boolean,null,对象,数组.
2.定义JSON数组
var JSON数组 = [ value,value,... ];
/*例如:*/
var person = [{"name":"张三","age":30},{"name":"李四","age":40}]
定义和展示JSON数据
JavaScript关键代码:
$(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);
var $ul = $("#arrayUl");//展示数据中的ul元素
var $sel = $("#arraySel");//展示数据中的ul元素
$ary.each(function(){$ul.append("<li>"+this+"</li>");});
$ary.each(function(i){
$sel.appent("<option value'"+(i+1)+"'>"+this+"</option>");
});
//3.定义JSON格式的user对象数组,并使用<table>输出
var userArray = [{
"id":2,
"name":"admin",
"pwd":"123123"
},{
"id":3,
"name":"詹姆斯",
"pwd":"123456"
},{
"id":4,
"name":"科比",
"pwd":"111111"
}];
//展示数据的table元素
var $table = $("<table border='1'></table>").append("<tr><td>ID</td><td>用户名</td><td>密码</td></tr>").appendTo($(#objectArrayDiv));
$(userArray).each(function(){
$table.append("<tr><td>"+this.id+"</td><td>"+this.name+"</td><td>"+this.pwd+"</td></tr>")
});
});
HTML关键代码
<body>
<!-- JSON格式的user对象 -->
<div id = "objectDiv"></div><br/>
<!-- JSON格式的字符串数组 -->
<select id="arraySel"></select>
<ul id="arrayUl"></ul>
<!-- JSON格式的user对象数组 -->
<div id="objectArrayDiv"></div>
</body>