ajax技术的简介,Ajax技术简介

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代码：

输入内容前提示

ajax的引擎代码，js代码：

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

createSuggest(suggests[i]); //创建每条提示信息

}

displaySuggest(); //显示提示信息

} else {

hiddenSuggest(); //隐藏提示信息

}

}

}

//创建提示信息节点

function createSuggest(text) {

var sDiv = "

" + text + "

";

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 = "";

}

向服务器端提起ajax异步请求，获取数据库中的数据：

suggest.jsp代码：

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); //关闭连接

}

%>

总结

以上是编程之家为你收集整理的Ajax技术简介全部内容，希望文章能够帮你解决Ajax技术简介所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。