项目中主要采用servlet,jsp,jdbc,js,html,css等编程语言,本文主要说说项目中用到的js框架jquery对ajax的支持。
首先说说原生ajax,先获取XMLHttprequest对象,还要设置浏览器兼容问题,官方推荐代码
function getXMLHttpRequest() { var xmlHttpReq=null; if (window.XMLHttpRequest) {//Mozilla 浏览器 xmlHttpReq = new XMLHttpRequest(); }else { if (window.ActiveXObject) {//IE 浏览器 try { xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try {//IE 浏览器 xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { } } } } return xmlHttpReq; }
获取对象成功后就是一些方法的调用
xmlhttp.open("GET","url",true); xmlhttp.send();打开连接,发送get请求于url,true表示异步请求,发送请求
还可以添加请求头信息setRequestHeader(header,value)
向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值
发送请求回调函数,处理得到的结果
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
对于xml和json数据的处理,这里不再叙述
关于jquery对ajax的处理,比较简单,易于上手,不用考虑浏览器兼容问题
在引入jquery的js文件后
load(url, [data], [callback]),这是一个要接收数据的标签
$("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });
参数依次为请求url,超时时间,结果回调
jQuery.get(url, [data], [callback], [type])
相对于load,这是一个可以直接使用的函数,传入请求url,发送的数据,回调函数,类型
官方参数说明
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
jQuery.getJSON(url, [data], [callback])这是对.get的封装,type为json格式
jQuery.post(url, [data], [callback], [type]) post请求,方法参数同get
例如项目中
$.post("StuList4Work", json, function(data, textStatus){},"json")
post请求StuList4Work这个servlet,发送一个json数据,服务通过request.getParameter获取参数结果
data为服务器返回的json格式的数据 textStatus为返回状态,类型为suceess,faile
比较功能复杂,又能解决不同需求的是$.ajax 即 jQuery.ajax(url,[settings])
seething选项有好多可选的,比较常用的有如下几个
async Boolean
(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR) Function
发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。
context Object
这个对象用于设置Ajax相关回调函数的上下文。也就是说,让回调函数内this指向这个对象(如果不设定这个参数,那么this就指向调用本次AJAX请求时传递的options参数)。比如指定一个DOM元素作为context参数,这样就设置了success回调函数的上下文为这个DOM元素。
data Object,String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。
data TypeString
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
"text": 返回纯文本字符串
error Function
(默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是"timeout", "error", "notmodified" 和 "parsererror"。
jsonp String
在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
statusCode map
默认: {}
一组数值的HTTP代码和函数对象,当响应时调用了相应的代码。
success(data, textStatus, jqXHR) Function,Array
请求成功后的回调函数。参数:由服务器返回,并根据dataType参数进行处理后的数据;描述状态的字符串。还有 jqXHR(在jQuery 1.4.x的中,XMLHttpRequest) 对象 。在jQuery 1.5, 成功设置可以接受一个函数数组。每个函数将被依次调用。
timeout Number
设置请求超时时间(毫秒)。此设置将覆盖全局设置。
type String
(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
url String
(默认: 当前页地址) 发送请求的地址。
xhr Function
需要返回一个XMLHttpRequest 对象。默认在IE下是ActiveXObject 而其他情况下是XMLHttpRequest 。用于重写或者提供一个增强的XMLHttpRequest 对象。