Ajax技术简介

发布时间：2020-12-15 22:09:46 所属栏目：百科来源：网络整理

导读：AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。 1、首现谈一下异步传输和同步传输。异步传输是面向字符的传输。发送方可以在任意时候发送数据，但接收方不知何时到达，就类似于发短信。

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 onload="readInfo()">
<h1>输入内容前提示</h1>
<input type="text" name="info" id="info" onkeyup="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' onmouSEOver="this.className='over'"" + " onmouSEOut = "this.className='out'" onclick='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);                //关闭连接
    }
%>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!