Ajax

最新推荐文章于 2025-03-16 10:00:00 发布

原创最新推荐文章于 2025-03-16 10:00:00 发布 · 361 阅读

0 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

27 篇文章

订阅专栏

1、Ajax

Ajax=Asynchronous Javascript And XML（异步的JavaScript和XML）
Ajax通过在后台与服务器进行少量的数据交互，Ajax可以使网页实现异步更新。这意味着可以在不重新加载网页的情况下，对网页的某部分进行更新。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

2、使用步骤

1、检测浏览器

为了应对所有的现代浏览器，包括 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");
  }

2、当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

这里写图片描述

    xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                document.getElementById("msgId").innerHTML = xmlHttp.responseText;
            }
        }

3、GET ，POST

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
使用GET请求

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

使用POST请求：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

注：必须加上

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

3、示例Dmeo

这里写图片描述
1、Servlet代码

public class LoginServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html");
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");

        String username=request.getParameter("username");
        System.out.println("servlet收到 "+username);
        String str ="";
        if("abc".equals(username)){
            str = "用户名已经存在";
        }else{
            str = "用户名可用";
        }
        response.getWriter().print(str);
    }
}

jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function LoginDemo(obj) {
        var usernameText = obj.value;

        var xmlHttp = null;

        if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlHttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                document.getElementById("msgId").innerHTML = xmlHttp.responseText;
            }
        }
        xmlHttp.open("POST", "${pageContext.request.contextPath}/LoginServlet");
        xmlHttp.setRequestHeader("content-type",
                "application/x-www-form-urlencoded");
        xmlHttp.send("username=" + usernameText);
    }
</script>
</head>
<body>
    <form action="">
        用户名：<input type="text" name="username" onblur="LoginDemo(this)" /> <span
            id="msgId"></span> <br /> 密码：<input type="text" name="password" /><br />
        <input type="submit" value="注册" />
    </form>
</body>
</html>