AJAX总结

• 从WEB1.0开始讲起

　　　　十多年前，我们刚刚觉得网络引起我们的注意的时候，那时的网站用户量不像现在那么大，所以在1.0时代，多采用同步机制。我们隐约记得，注册一个账号通常需要反复提交，返回的信息会告诉你填入的信息哪里出现了错误，哪里不符合规范。注册一个账号常常需要刷新好多次页面，这样的不仅给服务器的效率产生阻碍，也不利于我们效率办公。所幸的是，当时的并发量不如现在的巨大。如果现在仍然采用同步机制，大概这个网站要不是不受欢迎，要不就是经常挂掉。

                              　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　(百度偷来的图）

• 我所认识的WEB2.0

　　　　在不断接触2.0时代产品的同时，我们体验到了极大的方便与效率。比如我们现在注册的时候，按提交键肯定会一次注册成功了。（在设计上多按一次按键就会少很多用户量）这在现今社会快节奏的效应下，2.0时代完全符合现代人的品味。而2.0时代与1.0时代仅仅差别在于一个异步的HTTP提交方式--AJAX（Asynchronous Javascript And XML）。这个神奇的AJAX技术引领了一个时代的浪潮，而它并不是一种很大的技术框架，可以说它是一种“设计方式”。它的原理并不是那么困难，就是异步地提交一个标准的HTTP请求。而它发起的请求，通常不需要用户去点击浏览器内的按键，它可以在后台与服务器进行悄悄的通信，从而可以验证你的用户名是否合法，你的邮箱是否存在等等关键性信息。

　　　　2.0时代是讲求效率的时代，AJAX的出现结合同步机制，在不同场景中因地制宜，达到快速有效的解决用户数据交互问题，在学这个小技术的时候我更多的体会到了，设计这个技术的思维方式。

• 离不开的关键性协议:HTTP

　　　　超文本传输协议（HTTP，HigherText Transfer Protocol）我理解为一种通信协议。从我以前写socket的经验和计算机网络的TCP协议来看，它其实是TCP协议的一种变式。“它是一种无状态无连接的协议”。实际上它通信结束就马上cut掉连接了，它的底层仍然是socket类似的通信，而且连接是基于TCP协议。

　　　　说起HTTP，它不仅仅是只在B/S模型中应用广泛，虽然很多应用都是一个空的浏览器嵌入前端代码使用HTTP协议通信的，但在我看来它们也算是一种C/S模型。而HTTP协议的通信分为请求和响应两部分。

　　　　HTTP请求分为：请求行、消息头、请求体。我们使用HTTP访问服务器的时候，仍然是如socket一样采用http://IPAddr:Port这样的方式请求服务器。在建立连接后，浏览器发送请求行，浏览器发送请求头；这时候服务器会做出应答，发送响应信息和状态码，服务器发送响应头，服务器往浏览器发送数据，最后Web服务器关闭TCP连接。

　　　　HTTP响应信息：状态码，响应头，响应主体。状态码网上很多记录，主要是记得200，404，500，这些特殊的。

                         　　　　

　　　　我们可以使用chrome浏览器来观察HTTP的请求和响应。请求头一般包括文本类型，编码方式，日期等。不做深入讨论。

　　　　　　　　　　

　　　　有意思的是，html这个语言也主要分为head和body。这样的设计让我对HTTP这个协议加深了印象。

　　　　HTTP请求方法有5个，在WEB开发中最主要的还是GET和POST。在展开之前根据需求先大体总结一下，GET请求是请求少量信息的方法，有信息量上限。POST的请求是对大量数据交互的方法。

　　　　GET请求通常会把信息跟在url后面。GET请求没有请求体。比如下图。

　　　　

　　　　POST请求是把数据放在请求体内发送。

　　　　

　　　　在开发中需要谨记请求和响应这两个关键过程。

• 原生JavaScript的AJAX

　　　　由于长期写的都是后端语言，对这门函数式编程语言JavaScript生理上十分不适应。不过还好，我只需要熟悉怎么写它的Ajax就好了。它的过程十分简单。

　　　　首先，获取XHR对象，它被内嵌在浏览器中了，主要为了区别IE6这类特殊浏览器，不然直接调用XMLHttpRequest这个方法即可获取。

　　　　成功获取对象之后使用open（）方法传入请求方法，请求url。这个onreadystatechange是一个回调函数，负责接收服务器响应数据的处理，这里类似将它重写，浏览器会调用这个方法处理返回数据。

　　　　send方法在GET请求中只需要传入null，因为send方法是把数据放在请求体内，只有POST方式才会往send里写数据。

　　　　回调函数的写法是按照模范代码抄写的。在responseText可以获得服务端写来的数据。

var XHR=false;
function createXHR(){
     if(window.XMLHttpRequest){
        XHR=new XMLHttpRequest();
    }else{
        XHR=new ActiveXObject("Microsoft.XMLHTTP");
    }
}
function checkUsername(){
    var username=document.getElementById("check").value;
    createXHR();
    XHR.open("get","checkUsername?username="+username,true);
    XHR.onreadystatechange=showMsgCallback;
    XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
    XHR.send();
}
function showMsgCallback(){
    if(XHR.readyState==4){
        if(XHR.status==200){
            var text=XHR.responseText.toString();  
            alert(text=='no');
            console.log(text);
            if(text=="yes"){
                 alert(1);
                document.getElementById("msg").innerHTML="此用户名已注册!";
            }
            else if(text=="no")
            {
                 alert(2);
                document.getElementById("msg").innerHTML="此用户可以注册";
            }
        }
    }
}

　　

　　　　配置Action的时候，我是将这个虚拟路径映射到checkUsername（）方法上。后端要获得Ajax的数据，需要获得reques对象，写数据需要使用response对象。这就是为什么需要谨记请求和响应这两个过程。

import java.io.IOException;
import java.io.PrintWriter;

import javax.management.relation.RoleUnresolved;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang3.SystemUtils;
import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;


public class CheckAction extends ActionSupport{
	private String name;
	
	public String getUsername() {
		return name;
	}

	public void setUsername(String name) {
		this.name = name;
	}

	public void checkUsername() {
		HttpServletRequest request = ServletActionContext.getRequest();
		name = request.getParameter("name");
		System.out.println(name);
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = null;
		try {
			out = response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		if (name.equals("ctk")) {
			out.print("no");
			out.flush();

		} else {
			out.print("yes");
			out.flush();
		}
		out.close();

	}

	public String execute(){
		
		return SUCCESS;
	}

}

• Jquery是个什么鬼

　　　　我本人对这种带$和#的语言表示生理上十分不适应。虽然它很简单。Jquery是一个封装javascript的框架。它的目的是make js easier。Jquery的核心就是一个选择器。它张这样---$()。你在html上定义的id可以通过#来锁定。什么class，css这些东西我都不想理了，太卵烦了。它的代码让人感觉很清爽，清爽得让我看不懂。

	$(document).ready(function() {
		$('#button1').click(function() {
			var text = $('#msg1');
			$.ajax({
				type : "POST",
				url : "jquery",
				data : "username=ssss",
				dataType : 'text',
				success : function(result) {
					
					if (result=="success") {					
						text.text("");
						text.append("成功");
					}else{
						text.text("");
						text.append("失败");
					}
				},
				error : function() {
					text.text("");
					text.append("操作出错");
				}

			});
		});
	});
	$(document).ready(function(){
	    $('#button2').click(function(){
	        var text = $('#msg2');
	        $.post('jquery', 'username=xxxx',function(result){
	            if (result==="success") {					
						text.text("成功");
					}else{
						text.text("失败");
					}
	        },'text');
	    });
	});
	$(document).ready(function(){
	    $('#button3').click(function(){
	        var text = $('#msg3');
	        $.get('jquery','username=zzzzz',function(result){
	            if (result==="success") {					
						text.text("成功");
					}else{
						text.text("失败");
					}
	        });
	    });
	});

　　　　　　这是我写的三种Jquery的ajax写法。它带着html是长这样。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax交互</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

	$(document).ready(function() {
		$('#button1').click(function() {
			var text = $('#msg1');
			$.ajax({
				type : "POST",
				url : "jquery",
				data : "username=ssss",
				dataType : 'text',
				success : function(result) {
					
					if (result=="success") {					
						text.text("");
						text.append("成功");
					}else{
						text.text("");
						text.append("失败");
					}
				},
				error : function() {
					text.text("");
					text.append("操作出错");
				}

			});
		});
	});
	$(document).ready(function(){
	    $('#button2').click(function(){
	        var text = $('#msg2');
	        $.post('jquery', 'username=xxxx',function(result){
	            if (result==="success") {					
						text.text("成功");
					}else{
						text.text("失败");
					}
	        },'text');
	    });
	});
	$(document).ready(function(){
	    $('#button3').click(function(){
	        var text = $('#msg3');
	        $.get('jquery','username=zzzzz',function(result){
	            if (result==="success") {					
						text.text("成功");
					}else{
						text.text("失败");
					}
	        });
	    });
	});

</script>
</head>

<body>
	<button id="button1">点击使用$ajax发送</button>
	<span id="msg1"></span>
	<br/>
	<button id="button2">点击使用$post发送</button>
	<span id="msg2"></span>
	<br/>
	<button id="button3">点击使用$get发送</button>
	<span id="msg3"></span>
	<br/>
</body>
</html>

　　　　然后我在网上搜集到的这三种api的图解。

　　　　刚开始写的时候有些不适应，最后感觉看着api，这种设计模式挺轻松的。

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/jquery")
public class JqueryServlet extends HttpServlet{
    public JqueryServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username=request.getParameter("username");
        System.out.println(username);
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        PrintWriter out=response.getWriter();
        out.print("success");
        out.flush();
        out.close();
        
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }
}

　　　　每次写jquery的时候记得要导入jquery的源码。

• AJAX请求Struts2的Action

　　　　起初我一直很疑惑，如何请求Action，那时因为对HTTP协议的理解不太深入。谨记请求和响应之后，AJAX的请求不过就是一个HTTP的请求，只要把请求路径和Action名字对应，一切豁然开朗。

　　　　

<%@ 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">
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AJAX范例</title>
<sx:head/>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#usrname').blur(function(){
        $.ajax({
            type : "POST",
            url : "checkUsername",
            data : 'name='+$('#usrname').val(),
            dataType : 'text',
            success:function(data){
                if(data==='yes')
                    $('#msg').text('可以登录');
                else if(data==='no')
                    $('#msg').text('无法登录');
            }
        });
    });
});
</script>
</head>
<body>
<center>
    <form action="">
            <span id="msg"></span><br/>
        用户名:<input id="usrname" name="name" type="text"/>
        <br/>
        密码：<input name="password" type="password"/>
        <br/>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>
</center>
</body>
</html>

package ActionPackage;

import java.io.IOException;
import java.io.PrintWriter;

import javax.management.relation.RoleUnresolved;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang3.SystemUtils;
import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;


public class CheckAction extends ActionSupport{
    private String name;
    
    public String getUsername() {
        return name;
    }

    public void setUsername(String name) {
        this.name = name;
    }

    public void checkUsername() {
        HttpServletRequest request = ServletActionContext.getRequest();
        name = request.getParameter("name");
        System.out.println(name);
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = null;
        try {
            out = response.getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }
        if (name.equals("ctk")) {
            out.print("no");
            out.flush();

        } else {
            out.print("yes");
            out.flush();
        }
        out.close();

    }

    public String execute(){
        
        return SUCCESS;
    }

}

        <action name="checkUsername" class="ActionPackage.CheckAction" method="checkUsername">
        </action>

• 后记

　　　　首先我觉得书上写不清楚，网上的也是很杂，不过摸着石头过河的感觉还是很不错的。学了一些前端的知识，写了写前端的代码，也长了一些知识。附带一个jquery的动画。html有个失去焦点事件和点击事件，都是设计所必要的。对当代网页架构都有了新的认识，前后端分离的感觉挺fashion的。不积跬步无以至千里。

　　　　

<html>
    
    <head>
        <title>this is a test page</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="jquery.min.js" type="text/javascript"></script>
        <script src="jq.js" type="text/javascript"></script>
        
    </head>

    <body> 
        <div>
            <p>
                1.click me!
            </p>
            <p>
                2.click me!
            </p>
        </div>
        <button id="in">点击淡入 div 元素。</button>
        <button id="out">点击淡出 div 元素。</button>
        <div id="div1" style="80px;height:80px;display:none;background-color:red;"></div><br>
        <div id="div2" style="80px;height:80px;display:none;background-color:green;"></div><br>
        <div id="div3" style="80px;height:80px;display:none;background-color:blue;"></div>
    </body>
</html>




$(document).ready(function(){
   $("p").click(function(){
       $(this).hide();
   }) ;
});
$(document).ready(function(){
  $("#in").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
$(document).ready(function(){
    $("#out").click(function(){
        $("#div1").fadeOut();
        $("#div2").fadeOut("slow");
        $("#div3").fadeOut(3000);
    });
});

　　　　Ajax还有个load方法，请求载入内容的。

$(document).ready(function(){
    $('#ajaxrequest').click(function(){
        $('#directory').load('hello.html');
        alert('loaded');
    });
    
});