同步交互、异步交互和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,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基本用法

相关文章