AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
1、首现谈一下异步传输和同步传输。
异步传输是面向字符的传输。发送方可以在任意时候发送数据,但接收方不知何时到达,就类似于发短信。
同步传输是面向比特的传输。要求传收双方的时钟保持一致,就类似于打电话。
2、原理:通过XMLHTTPRequest对象向服务器发出异步请求,从服务器获取数据,然后用JavaScript来操作DOM页面而更新页面。XMLHTTPRequest向服务器异步请求这个页面,服务器将文本内容写入页面。不同的是,客户端在获取这个结果后,不是直接显示在页面上,而是先由js来处理,然后显示在页面上。
3、ajax的优点:
1.页面无刷新,在页面内与服务器通信。
2.使用异步方式与服务器通信,不需要打断用户操作。
3.原则是:按需读取数据,将服务器承担的部分工作转嫁给客户端,减轻了服务器端的负担。
4、ajax的缺点:
1.ajax使得浏览器的后退按钮无法使用。
2.安全问题,开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
5、示例:
用ajax实现输入内容前提示的功能:
JSP代码:
<body οnlοad="readInfo()">
<h1>输入内容前提示</h1>
<input type="text" name="info" id="info" οnkeyup="resetReading()">
<!-- 用于显示提示信息的div -->
<div id="suggest" style="display:none"></div>
</body>
ajax的引擎代码,js代码:
<script type="text/javascript">
var xmlHttp; //用于保存XMLHttpRequest对象的全局变量
var currentInfo = ""; //用于保存当前用户输入信息
var counter = 1; //读取信息计数器
var isReading = true; //是否处于监视用户输入状态
//用于创建XMLHttpRequest对象
function createXmlHttp() {
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
}
}
//读取用户输入信息
function readInfo() {
var info = document.getElementById("info").value;
/*
当用户信息没有变化并且非空时,计数器加1
否则更新currentInfo变量为用户当前输入,重置计数器
*/
if (currentInfo==info && info!="") {
counter++;
} else {
currentInfo = info;
counter = 1;
}
//当计数器累计到3时,如果用户信息仍没有变化,表示用户已停止输入,否则继续监视
if (counter==3) {
getSuggest(info); //向服务器获取提示信息
isReading = false; //设置监视标记为false
} else {
setTimeout("readInfo()", 200); //200毫秒后再次读取用户输入信息
}
}
//向服务器获取提示信息
function getSuggest(info) {
createXmlHttp(); //创建XMLHttpRequest对象
xmlHttp.onreadystatechange = showSuggest; //设置回调函数
xmlHttp.open("GET", "suggest.jsp?info=" + encodeURI(info), true);
xmlHttp.send(null);
}
//处理服务器返回信息
function showSuggest() {
if (xmlHttp.readyState == 4) {
clearSuggest(); //清除现有提示信息
var suggestsText = xmlHttp.responseText;
//如果服务器返回信息不为空则创建新的suggest
if (suggestsText != "") {
var suggests = suggestsText.split("|"); //使用“|”分隔提示信息
//循环遍历提示信息数组
for (var i=0; i<suggests.length; i++) {
createSuggest(suggests[i]); //创建每条提示信息
}
displaySuggest(); //显示提示信息
} else {
hiddenSuggest(); //隐藏提示信息
}
}
}
//创建提示信息节点
function createSuggest(text) {
var sDiv = "<div class='out' οnmοuseοver=\"this.className='over'\"" + " onmouseout = \"this.className='out'\" οnclick='setSuggest(this)'>" + text + "</div>";
document.getElementById("suggest").innerHTML += sDiv; //将新建节点加入suggest div
}
//响应鼠标点击事件,将suggest信息写入用户文本框
function setSuggest(src) {
document.getElementById("info").value = src.innerHTML;
hiddenSuggest(); //隐藏提示信息
}
//当用户再次键入信息时,调用此函数重新打开监视状态
function resetReading() {
if (!isReading) {
isReading = true;
readInfo(); //开始监视用户文本框
}
}
//显示提示信息
function displaySuggest() {
document.getElementById("suggest").style.display = "";
}
//隐藏提示信息
function hiddenSuggest() {
document.getElementById("suggest").style.display = "none";
}
//清空提示信息
function clearSuggest() {
document.getElementById("suggest").innerHTML = "";
}
</script>
向服务器端提起ajax异步请求,获取数据库中的数据:
suggest.jsp代码:
<%@ page contentType="text/plain; charset=UTF-8"%>
<%@ page language="java"%>
<%@ page import="java.sql.*,com.ajax.db.DBUtils"%>
<%
out.clear(); //清空当前的输出内容(空格和换行符)
String info = request.getParameter("info"); //获取info参数
int counter = 0; //计数器
String sql = "select info from suggest_info where info like ?";//定义查询数据库的SQL语句
Connection conn = null; //声明Connection对象
PreparedStatement pstmt = null; //声明PreparedStatement对象
ResultSet rs = null; //声明ResultSet对象
try {
conn = DBUtils.getConnection(); //获取数据库连接
pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
pstmt.setString(1, info + "%"); //设置参数
rs = pstmt.executeQuery(); //执行查询,返回结果集
while (rs.next()) {
//当不是第一次循环时,输出“|”作为分隔符
if (counter > 0) {
out.print("|");
}
counter++; //计数器加1
out.print(rs.getString(1)); //输出提示信息
}
} catch (SQLException e) {
System.out.println(e.toString());
} finally {
DBUtils.close(rs); //关闭结果集
DBUtils.close(pstmt); //关闭PreparedStatement
DBUtils.close(conn); //关闭连接
}
%>