Ajax概念:
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax不是一种新的编程语言,而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
Ajax作用:
注册时,输入用户名自动检测用户是否已经存在。
登陆时,提示用户名密码错误
删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。
一、使用XMLHttpRequest对象实现Ajax:
可以在菜鸟教程上学习:http://www.runoob.com/ajax/ajax-tutorial.html
XMLHttpRequest主要方法:
1. void open(String method,String url,Boolen async)
用于创建请求
参数:
method: 请求方式(字符串类型),如:POST、GET、DELETE...
url: 要请求的地址(字符串类型)
async: 是否异步(布尔类型)
2. void send(String body)
用于发送请求
参数:
body: 要发送的数据(字符串类型)
3. void setRequestHeader(String header,String value)
用于设置请求头
参数:
header: 请求头的key(字符串类型)
vlaue: 请求头的value(字符串类型)
4. String getAllResponseHeaders()
获取所有响应头
返回值:
响应头数据(字符串类型)
5. String getResponseHeader(String header)
获取响应头中指定header的值
参数:
header: 响应头的key(字符串类型)
返回值:
响应头中指定的header对应的值
6. void abort()
终止请求
XMLHttpRequest主要属性:
1. Number readyState 状态值(整数),可以确定请求/响应过程的当前活动阶段
0:未初始化。未调用open()方法
1:启动。已经调用open()方法,未调用send()方法
2:发送。已经调用send()方法,未接收到响应
3:接收。已经接收到部分数据
4:完成。已经接收到全部数据,可以在客户端使用
2. Function onreadystatechange 当readyState的值改变时自动触发执行其对应的函数(回调函数)
3. String responseText 作为响应主体被返回的文本(字符串类型)
4. XmlDocument responseXML 服务器返回的数据(Xml对象)
5. Number states 状态码(整数),如:200、404…
6. String statesText 状态文本(字符串),如:OK、NotFound…
XMLHttpRequest使用示例:
项目列表截图:
js代码;
<script type="text/javascript">
/****************一、jsp与Servlet通过Ajax进行数据交互****************/
//使用XMLHttpRequest
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function callServer(){
//获取城市和国家的值
var city = document.getElementById("city").value;
//设置一个方法,当请求返回的时候调用这个方法
xmlhttp.onreadystatechange = getSuccess;
//创建连接的URL对象
var url = "testAjaxServlet?city="+city;
//打开一个连接服务器的连接
xmlhttp.open("GET", url, true);
//发送链接
xmlhttp.send();
}
function getSuccess(){
if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
var response = xmlhttp.responseText;
document.getElementById("success").innerHTML = response;
}
}
/****************二、jsp通过Ajax直接获取到文件内容(txt文件)****************/
var xmlhttp;
function loadXMLDoc(url,cfunc){
if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 代码
xmlhttp=new XMLHttpRequest();
}else{// IE6, IE5 代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("Ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
html代码:
<h1>一、jsp与Servlet通过Ajax进行数据交互</h1>
<form action="" method="post">
<p>城市:<input type="text" name="city" id="city" size="25" οnkeyup="callServer();" /></p>
<p><font color="red" id="success"></font></p>
</form>
<h1>二、jsp通过Ajax直接获取到文件内容(txt文件)</h1>
<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" οnclick="myFunction()">修改内容</button>
TestAjaxServlet.java:
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String city = req.getParameter("city");
System.out.println("城市:"+city);
//返回文本数据
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
out.println("您输入的城市是:"+city);
this.doPost(req, resp);
}
效果图:
二、使用jQuery实现Ajax:
1. jQuery.get(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
dataType: 返回内容格式,xml, json, script, text, html
2.jQuery.post(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数
success: 载入成功时回调函数
dataType: 返回内容格式,xml, json, script, text, html
3.jQuery.getJSON(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
4.jQuery.getScript(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
5.jQuery.ajax(...)
部分参数:
url:请求地址
type:请求方式,GET、POST(1.9.0之后用method)
headers:请求头
data:要发送的数据
contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async:是否异步
timeout:设置请求超时时间(毫秒)
beforeSend:发送请求前执行的函数(全局)
complete:完成之后执行的回调函数(全局)
success:成功之后执行的回调函数(全局)
error:失败之后执行的回调函数(全局)
accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型
dataType:将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数
示例:
js代码:
/****************三、jQuery Ajax例子****************/
$(document).ready(function() {
$("#text").keyup(function(){
$.ajax({
url:"testjQueryAjaxServlet?text="+$("#text").val(),
type:"GET",
dateType:"json",
success:ok,
error:err
});
});
});
function ok(d){
var obj = JSON.parse(d);
$("#successjQueryAjax").html(obj.ishas);
}
function err(){
alert("出错了,请联系管理员!");
}
HTML代码:
<h1>三、jQuery Ajax例子</h1>
<p>请输入:<input type="text" id="text" name="text" /></p>
<p><font color="red" id="successjQueryAjax"></font></p>
TestjQueryAjaxServlet.java:
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String text = req.getParameter("text");
String s = "{\"ishas\":\"您输入的是:"+text+"\"}";
System.out.println(s);
resp.setCharacterEncoding("UTF-8");
PrintWriter out = resp.getWriter();
out.print(s);
out.close();
}
效果图:
源码下载:http://download.csdn.net/download/fancheng614/10121885