Ajax初始接触

演示JS对象的属性，方法和事件的使用

（1）window.location.href

（2）form.submit()

<form action="" method="POST">
　　<input type="button" value="提交到服务端" onclick="doSubmit()"/>
</form>
<script type="text/javascript">
　　function doSubmit(){
　　//表单提交
　　document.forms[0].submit();
　　}
</script>

（3）inputElement.onblur = 函数　　　　　onblur 事件会在对象失去焦点时发生。

（4）document.createElement(“img”)　　createElement() 方法可创建元素节点

（5）imgElement.style.width/height

什么是AJAX

客户端（特指PC浏览器）与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术即，AJAX是一个【局部刷新】的【异步】通讯技术AJAX不是全新的语言，是2005年Google公司推出的一种全新【编程模式】，不是新的编程语言

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

（A）Flash/ActionScript

（B）框架Frameset

（C）iFrame（内嵌入框架)

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

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

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

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

也可以使用ActiveXObject对象。

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

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

AJAX开发步骤

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

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

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

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

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

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

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

Ajax案例

前台

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ajax</title>
</head>

<body>
    当前时间：<span id="time"></span><br/>
    <input type="button" name="" value="获取当前时间" id="buttonId">
    <script type="text/javascript">
        document.getElementById("buttonId").onclick = function() {
            //1、创建AJAX对象
            var ajax = createAJAX();
            //2、准备发送请求
            var method = "GET";
            //为了适应IE浏览器对其不变的地址缓存，以致其不会继续去发送请求，所以加上时间，保证唯一
            var url = "${pageContext.request.contextPath}/TimeServlet?time="+new Date().getTime();
            ajax.open(method, url);
            //3、真正发送请求的具体数据到服务器，如果球体中无数据，就用null表示
            ajax.send(null);

            /*4、Ajax异步对象不断监听服务器
            一定要状态变化后，才会触发function(){}函数
            如果状态永远不变，不会触发function(){}函数
            */
            ajax.onreadystatechange = function() {
                //如果状态码为4
                if (ajax.readyState == 4) {
                    //如果响应码为200
                    if (ajax.status == 200) {
                        //5、从ajax异步对象中获取服务其相应的Html数据
                        var str = ajax.responseText;

                        //6、操作数据
                        document.getElementById('time').innerHTML = str;
                    }
                }
            }

        }

        function createAJAX() {
            var ajax = null;
            try {
                //如果是IE5——IE12的话
                ajax = new ActiveXObject("microsoft.xmlhttp");
            } catch (e1) {
                //如果是非IE的话
                ajax = new XMLHttpRequest();
            }
            return ajax;
        }
    </script>
</body>

</html>

后台

public class TimeServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String str=sdf.format(new Date());
		//以流的形式将结果响应到ajax异步对象中
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw=response.getWriter();
		pw.write(str);
		pw.flush();
		pw.close();
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doGet(request, response);
	}
}