AJAX基础

（1）什么是同步：

请求1->响应1->请求2->响应2->

Web1.0时代

（2）什么是异步：

请求1->请求2->请求3->响应1->响应2->响应3->

请求1->响应1->请求2->请求3->响应2->响应3->

Web2.0时代

项目中：Web1.0为主（整个浏览器刷新），Web2.0为辅（浏览器局部刷新）

（3）什么是AJAX

客户端（特指PC浏览器）与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术

即，AJAX是一个【局部刷新】的【异步】通讯技术

AJAX不是全新的语言，是2005年Google公司推出的一种全新【编程模式】，不是新的编程语言

（4）不用刷新整个页面便可与服务器通讯的办法有：

（A）Flash/ActionScript

（B）框架Frameset

（C）iFrame（内嵌入框架)

（D）XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)

背景：早上IE5时，微软就开发出了第一个异步通讯对象，叫ActiveXObject对象，

Firefox等其它浏览器厂商也慢慢引入异步通讯对象，叫XMLHttpRequest对象，

IE的高版本，也将这个异步对象取名叫XMLHttpRequest对象，但IE有向下兼容问题，

也可以使用ActiveXObject对象。

无需第三方jar包，现代中高版本浏览器中内置了这个异步通讯对象，只需通过JavaScript就可以创建

注意：所有浏览器中都内置了异步对象，在默认情况下，该异步对象并没有创建出来

function createAJAX(){
    var ajax = null;
    try{
        ajax = new ActiveXObject("microsoft.xmlhttp");
    }catch(e1){
        ajax = new XMLHttpRequest();
    }
    return ajax;
}

（5）AJAX工作原理

参见<<AJAX工作原理.JPG>>

（6）AJAX包含的技术

参见<<AJAX包含的技术.JPG>>

（7）AJAX开发步骤

步一：创建AJAX异步对象，例如：createAJAX()

步二：准备发送异步请求，例如：ajax.open(method,url)

步三：如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader()

如果是GET请求的话，无需设置设置AJAX请求头

步四：真正发送请求体中的数据到服务器，例如：ajax.send()

步五：AJAX不断的监听服务端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数

步六：在无名处理函数中，获取AJAX的数据后，按照DOM规则，用JS语言来操作Web页面

（8）AJAX适合用在什么地方

AJAX【适合】不用来传递大量数据，而只用来【传递少量数据】，在用户的【体验】上，【更加人性化】

AJAX是一个和服务器无关的技术，即服务器可使用：JavaEE，.NET，PHP，。。。这些技术都可

AJAX只管向服务器发送请求，同时只管接收服务器的HTML或XML或JSON载体响应

服务端不能使用转发或重定向到web页面，因为这样会起浏览器全面刷新

即只能以流的方式响应给浏览器

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>无需刷新整个Web页面显示服务器响应的当前时间</title>
  </head>
  <body>
    
    当前时间：<span id="time"></span><br/>
    <input id="buttonID" type="button" value="获取当前时间"/><p/>
    
    
    <script type="text/javascript">
        //创建AJAX异步对象
        function createAJAX(){
            var ajax = null;
            try{
                //如果IE5=IE12的话
                ajax = new ActiveXObject("microsoft.xmlhttp");
            }catch(e1){
                try{
                    //如果是非IE的话
                    ajax = new XMLHttpRequest();
                }catch(e2){
                    alert("你的浏览器中不支持异步对象，请换浏览器");
                }
            }
            return ajax;
        }
    </script>

    <script type="text/javascript">
        document.getElementById("buttonID").onclick = function(){
            //NO1)创建AJAX异步对象
            var ajax = createAJAX();
            //NO2)准备发送请求
            var method = "GET";
            var url = "${pageContext.request.contextPath}/AjaxTimeServlet?time=" + new Date().getTime();
            ajax.open(method,url);
            //NO3)真正发送请求体的数据到服务器，如果请求体中无数据的话，就用null表示
            ajax.send(null);
            
            //-------------------------------------------------------------等待
        
            //NO4)AJAX异步对象不断监听服务器响应的状态0-1-2-3-【4】
            //一定要状态变化后，才可触发function(){}函数
            //如果状态永远是4-4-4-4-4，是不会触发function(){}函数的
            ajax.onreadystatechange = function(){
                //如果状态码为4的话
                if(ajax.readyState == 4){
                    //如果响应码为200的话
                    if(ajax.status == 200){
                        //NO5)从AJAX异步对象中获取服务器响应的HTML数据
                        var nowStr = ajax.responseText;
                        
                        //NO6)将结果按照DOM规则，动态添加到web页面指定的标签中
                        var spanElement = document.getElementById("time");
                        spanElement.innerHTML = nowStr;
                    }
                }
            } 
            
        }
    </script>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>
  </body>
</html>

package loaderman.time;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 无需刷新整个Web页面显示服务器响应的当前时间
 * @author AdminTC
 */
public class AjaxTimeServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String nowStr = sdf.format(new Date());

        //以流的方式将结果响应到AJAX异步对象中
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(nowStr);
        pw.flush();
        pw.close();
    }
}

posted on 2018-11-30 14:41 LoaderMan 阅读(163) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

AJAX基础

导航