同步交互、异步交互和ajax基本用法

同步交互

发一个请求就要等待服务器的响应结束，然后才能发第二个请求。常见的情形就是有的网站你点击太快，它就卡住了。
每次请求都会刷新整个页面。

异步交互

发一个请求后，无需等待服务器的响应，就可以发送第二个请求。
可以使用Js接收服务器的响应，axaj其实就是使用了JS的局部刷新功能。

服务器给客户端的响应一般是整个页面，即一个完整的HMTL页面，但ajax是局部刷新，那么服务武器无需响应整个页面，只是数据刷新。

下面给一个ajax的简单示例：
Servlet:

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class BServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.getWriter().print("AJAX ！");
        System.out.println("adax!");
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
//      resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html; charset=utf-8");
        String username = req.getParameter("username");
        String pwd = req.getParameter("pwd");
        resp.getWriter().print(username+pwd);
        System.out.println(username+pwd);
    }

}

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>ajax</title>
    <script type="text/javascript">
        //创建xmlHttpRequest对象,下面的方法对不同版本浏览器实现了兼容。
        function createXMLHttpRequest(){
            try {
                return new XMLHttpRequest();
            } catch (e) {
                try {
                    return new ActiveXObject("MSXML2.XMLHTTP");//为了应对IE6
                } catch (e) {
                    try {
                        return new ActiveXObject("Microsoft.XMLHTTP"); //对于IE5.5版本一下
                    } catch (e) {//如果都到这了，估计是自己写的浏览器
                        alert("未知浏览器");
                    }
                }
            }
        }
        window.onload= function(){
            //得到button
            var button = document.getElementById("button");
            //对button添加点击事件
            button.onclick=function(){
                //创建xmlHttpRequest对象
                var xmlHttp = new createXMLHttpRequest();
                /*  
                    open规定请求的类型、URL 以及是否异步处理请求。
                */
                //xmlHttp.open("GET","BServlet",true);
                xmlHttp.open("POST","BServlet",true);
                //设置请求头的Content-Type,如果是GET方法不需要设置
                xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                //将请求发送到服务器。发送数据
                xmlHttp.send("username=小明&pwd=xiaoming");
                //这个函数监控响应状态的变化
                xmlHttp.onreadystatechange=function(){
                    /* 
                    存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                        0：请求未初始化（还没有调用 open()）。
                        1：请求已经建立，但是还没有发送（还没有调用 send()）。
                        2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
                        3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
                        4：响应已完成；您可以获取并使用服务器的响应了。
                    */
                    /*  
                        status  
                            200: "OK"
                            404: 未找到页面
                    */
                    if(xmlHttp.readyState==4&&xmlHttp.status==200){
                        var h1 = document.getElementById("h1");
                        var text = xmlHttp.responseText;
                        h1.innerHTML=text;
                    }
                }

            }
        }
    </script>
</head>
<body>
    <button id="button" >点击这里</button>
    <h1 id="h1"></h1>
</body>
</html>

效果如下：
这里写图片描述

点击后：
这里写图片描述

同步交互、异步交互和ajax基本用法

猜你喜欢