传统的Web开发技术和Ajax技术有什么区别?
无论使用哪种开发技术,流程都是先由客户端发送HTTP请求,然后由服务器对请求生成响应.但传统的Web开发技术和Ajax技术之间还是存在很多差异.
差异1:发送请求不同.
传统Web应用通过浏览器发送请求,而Ajax技术则是通过JavaScript的XMLHttpRequest对象.
差异2:服务器响应不同
针对传统Web应用,服务器的响应是一个完整的页面,而采用Ajax技术后,服务器的响应只是需要的数据.
差异3:客户端处理的响应方式不同
传统的Web应用发送请求后,浏览器将等待服务器响应完成后重新加载整个页面.而采用Ajax技术后,浏览器不再空闲等待请求的响应,而只是通过JavaScript动态更新页面中需要更新的部分
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对象,以异步方式在客户端与服务器端之间传递数据
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",该参数为nullabort()取消当前请求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对象返回使用XMLHttpRequest对象发送GET请求到服务器端,并处理文本方式响应,需要通过一下四个步骤实现:
创建XMLHttpRequest对象.通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式设置回调函数.通过onreadystatechange属性设置回调函数,其中回调函数需要自定义初始化XMLHttpRequest对象.通过open()方法设置请求的发送方式和路径发送请求需要注意的是:采用GET方式发送请求时,通常会将需要携带的参数附加在URL路径后面一起发送,xmlHttpRequest.send()方法不能传递参数,data参数设置为null即可,而采用POST方式发送请求时,则可以在xmlHttpRequest.send()方法中指定传递的参数
$.ajac()可以通过发送HTTP请求加载远程数据,是jQuery最底层的Ajax实现,具有较高灵活性
$.ajax([settings]);参数settings是$.ajax()方法的参数列表,用于设置Ajax请求的键值对集合.常用配置参数如下
$.ajax()常用配置参数
参数类型说明urlString发送请求的地址,默认为当前页地址typeString请求方式(POST或GET,默认为GET),1.9.0之后的版本可以使用method代替typedataPlainObject或String或Array发送到服务器的数据dataTypeString预期服务器返回的数据类型,可用类型有XML,HTML,Script,JSON,JSONP,TextbeforeSendFunction(jqXHR jqxhr,PlainObject settings)发送请求前调用的函数,可用于设置请求头等,返回false将终止请求参数jqxhr:可选,jqXHR是XMLHttpRequest的超集参数settings:可选,当前ajax()方法的settings对象successFunction(任意类型 result,String textStatus,jqXHR jqxhr,)请求成功后调用的函数参数result:可选,由服务器返回的数据参数textStatus:可选,描述请求状态的字符串参数jqxhr:可选errorFunction(jqXHR jqxhr,String testStatus,String errorThrown)请求失败时被调用的函数参数jqxhr:可选参数textStatus:可选,错误信息参数errorThrown:可选,文本描述的HTTP状态completeFunction(jqXHR jqxhr,String testStatus)请求完成后调用的函数(请求完成或失败时均可调用)参数jqxhr:可选参数textStatus:可选,描述请求状态的字符串timeoutNumber设置请求超时时间globalBoolean默认为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(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}]