1 AJAX简介
资料来源于W3School
1.1 什么是AJAX
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。AJAX 是一种用于创建快速动态网页的技术。
1.2 XMLHttpRequest(XHR)对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
1.2.1 创建XMLHttpRequest对象
在原生JavaScript中创建 XMLHttpRequest 对象的语法:
variable=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject(“Microsoft.XMLHTTP”);
/*为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :*/
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
1.2.2 XMLHttpRequest 对象方法(向服务器发送请求)
向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp.open(“GET”,”test1.txt”,true);
xmlhttp.send();
注:
上面简单的例子可能得到缓存的结果。为避免这种情况,可向URL添加一个唯一的ID。
xmlhttp.open(“GET”,”demo_get.asp?t=” + Math.random(),true);
xmlhttp.send();可通过GET方法发送信息,向URL添加信息:
xmlhttp.open(“GET”,”demo_get2.asp?fname=Bill&lname=Gates“,true);
xmlhttp.send();如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open(“POST”,”ajax_test.asp”,true);
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
xmlhttp.send(“fname=Bill&lname=Gates”);
1.2.3 异步 - True 或 False
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
当使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
1.2.4 XMLHttpRequest对象属性(服务器响应)
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
responseText 属性返回字符串形式的响应,因此您可以这样使用:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
如果来自服务器的响应是XML,而且需要作为XML对象进行解析,请使用 responseXML 属性。
1.2.5 onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
注:
onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
注:使用 Callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
/*即将多个AJAX任务能够复用的代码封装到自定义函数loadXMLDoc中*/
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
2 服务器端获取及返回数据方式
2.1 ASP和PHP服务器
2.1.1 ASP服务器处理数据方式
获得来自 URL 的 q 参数:
q=ucase(request.querystring(“q”))
返回数据:
response.write(xxx);
2.1.2 PHP服务器处理数据方式
获得来自 URL 的 q 参数:
q=
_GET[“q”];
返回数据:
response=
xxx;
echo $response
2.2 JAVA服务器
2.2.1 Servlet方式
步骤1:在web.xml中添加servlet标签
<servlet>
<servlet-name>RegistServlet</servlet-name>
<servlet-class>web.RegistServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegistServlet</servlet-name>
<url-pattern>/getAJAX</url-pattern>
</servlet-mapping>
步骤2:创建对应Servlet类web.RegistServlet,继承HttpServlet,并overwrite父类的service方法或doGet和doPost方法。
步骤3:通过上步方法的HttpServletRequest参数对象获取数据,通过HttpServletResponse对象返回数据。
返回数据需要用到PrintWriter对象:
//如果中文乱码需要设置字符编码
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.print(xxx);
ps:
jsp通过内置的request和response对象获取和返回数据。
2.2.2 Struts2方式
步骤1:在web项目中加入Struts2框架。
步骤2:在struts.xml中创建actiong关联自定义Action类。
步骤3:自定义Action类继承ActionSupport类
步骤4:
- 可以在自定义Action执行的方法中通过ServletActionContext.getRequest()和getResponse()方法获得HttpServletRequest和HttpServletResponse对象。
- 也可以在自定义Action类中添加与传入数据变量名一致的变量,并生成setter方法,Struts会自动匹配并赋值。
步骤5:传数据到客户端方法与Servlet方式一样。
3 JQuery实现AJAX
3.1 $.ajax();
最简单的情况下,$.ajax()可以不带任何参数直接使用。
注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置。
如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
回调函数均有多个参数可选。
- beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。
- error 在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
- dataFilter 在请求成功之后调用。传入返回的数据以及”dataType”参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
- success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
- complete当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。
样例:
$.ajax({
url:"",
//data选项既可以包含一个查询字符串,比如 key1=value1&key2=value2 ,也可以是一个映射,比如 {key1: 'value1', key2: 'value2'} 。
data:{
"name1":"value1",
"name2":"value2"
},
//服务端返回的数据类型,除了单纯的XML,还可以指定 html、json、jsonp、script或者text。
dataType:"json",
//type默认是"GET",请求方式有"POST"、"GET"
type:"GET",
beforeSend:function(XMLHttpRequest){
},
dataFilter:function(data, dataType){
},
success:function(data[,textStatus,jqXHR]){
},
error:function(XMLHttpRequest, textStatus, errorThrown){
}
complete:function (XMLHttpRequest, textStatus){
},
});
3.2 load(url, [data], [callback])
概述
载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。
参数
- url:待装入 HTML 网页网址。
- data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
- callback:载入成功时回调函数。
样例
$("#links").load("/Main_Page #p-Getting-Started li");
$("#feeds").load("feeds.html");
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
3.3 其他简化$.ajax()的方法
$.get(url, [data], [callback], [datatype])
$.getJSON(url, [data], [callback])、$.getScript(url, [callback])
$.post(url, [data], [callback], [datatype])
ajaxComplete(callback)、ajaxError(callback)、ajaxSend(callback)、ajaxStart(callback)、ajaxStop(callback)、ajaxSuccess(callback)
$.ajaxSetup([options])//设置全局 AJAX 默认选项。