Ajax和jQuery

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>