day21JavaWeb（ajax 判断浏览器 ajax四步操作）

1、ajax
    asynchronous javascript and xml :异步的js和xml
    能使用js访问服务器，而且是异步访问
    服务器给客户端的响应一般是整个页面，一个html完整页面。但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面，而是数据
        text:纯文本
        xml:熟悉
        json:是js提供的数据交互格式，在ajax最受欢迎

2、异步交互和同步交互
    同步：
        发出一个请求：要等待服务器的响应结束，然后才能发送第二个请求。中间时间等待
        刷新的是整个页面    
    异步：
        发出一个请求后，无序等待服务器的响应，就可以发出第二个请求
        可以使用js来接收服务器的响应，然后使用js来局部刷新 
3、应用场景
    百度的搜索框
    用户注册时（校验用户名是否被注册过）
4、ajax的优缺点  
    优点：
        异步交互：增强了用户的体验
        性能：因为服务器无需再响应整个页面，只需要响应部分内容，所以服务器的压力减轻了

    缺点：
        ajax不能应用在所有场景
        ajax无端的增多了对服务器的访问次数，给服务器带来了压力（本来不用关联搜索）

ajax发送异步请求（四步操作）
1、第一步(得到XMLHttpRequest)
    ajax其实只需要学习一个对象：XMLHttpRequest，如果掌握了，就掌握了ajax
    得到XMLHttpRequest
        大多数浏览器都支持 var xmlHttp = new XMLHttpRequesst();
        IE6.0: var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        IE5.5以及更早版本的IE： var xmlHttp = new ActiveXObject = new ActiveXObject("Microsoft.XMLHTTP");

    编写创建XMLHttpRequest对象的函数
    function createXMLHttpRequest(){
        try{
            return new XMLHttpRequest();
        } catch(e){
            try{
                return new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e){
                try{
                    return new ActiveXObject("Microsoft.XMLHTPP");
                }catch(e){
                    alert("用的什么浏览器？")；
                    throw e;
                }
            }
        }
    }               

2、第二步（打开与服务器的连接）
    xmlHttp.open():用来打开与服务器的连接，需要三个参数
        请求方式：可以是GET或POST
        请求的URL：指定服务器端资源，例如/day06_01/AServlet
        请求是否为异步：如果为true表示发送异步请求，否则同步请求
    xmlHttp.open("GET","/day06_01/AServlet",true);

3、第三步(发送请求）
    xmlHttp.send(null);如果不给会造成部分浏览器无法发送
        参数：就是请求体内容。如果是GET请求，必须给出null，xmlHttp.send("username=zs&password=123");

4、第四步（）
    在xmlHttp对象的一个事件上注册监听器：onreadystatechange
    xmlHttp对象共有5个状态
        0状态：刚创建，没有调用open()方法
        1状态：请求开始，调用了open方法，但还没有调用send()方法
        2状态：调用完了send方法
        3状态：服务器已经开始响应，但不表示响应结束了
        4状态：服务器响应结束 （通常只关心这个状态）
    得到xmlHttp对象的状态
        var stats = xmlHttp.readyState;//可能是0、1、2、3、4
    得到服务器响应的状态码
        var status = xmlHttp.status;//例如200、404、500
    得到服务器响应的内容
        var content = xmlHttp.responseText;//得到服务器响应的文本格式的内容
        var content = xmlHttp.responseXML;//得到服务器响应的xml格式的内容，是Document对象

    xmlHttp.onreadystatechange = function(){//xmlHttp的5中状态都会调用本方法
        if(xmlHttp.readyState ==4 && xmlHttp.status == 200){//双重判断：判断是否为4状态，而且还有判断是否为200
            //获取服务器的响应内容
            var text = xmlHttp.responseText;//更通用       
        }
    }

发送POST请求(如果发送请求时需要带有参数，一般都用POST)
open:xmlHttp.open("POST",...);
添加一步：设置Content-Type请求头
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   
send:xmlHttp.send("username=zs&password=123");//发送请求时指定请求体

注册表单之校验用户是否注册
1、编写页面：
    ajax3.jsp
        给出注册表单页面
        给用户名文本框添加onblur事件的监听
        获取文本框的内容，通过ajax4步发送给服务器，得到响应结果
            如果为1：在文本框后显示"用户名已被注册"
            如果为0：什么都不做 
2、编写Servlet
    ValidateUsernameServlet
        获取客户端传递的用户名参数
        判断是否为itcase
            是：返回1
            否：返回0   

响应内容为xml数据      
    服务器端：
        设置响应头：Content-Type:其值为:text/xml;charset=utf-8;
    客户端：    
        var doc = xmlHttp.responseXML;//得到的是document对象    

<script type="text/javascript">
	//创建异步对象
	function createXMLHttpRequest() {
		try {
			return new XMLHttpRequest();//大多数浏览器
		} catch (e) {
			try {
				return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
			} catch (e) {
				try {
					return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
				} catch (e) {
					alert("什么浏览器？");
					throw e;
				}
			}
		}
	}
	window.onload = function() {
		//获取文本框，给它的失去焦点事件注册监听
		var userEle = document.getElementById("usernameEle");
		userEle.onblur = function() {
			//1、得到异步对象
			var xmlHttp = createXMLHttpRequest();
			//2、打开链接
			xmlHttp.open("POST", "<c:url value='/ValidateUsernameSevlet'/>",
					true);
			//3、设置请求头：Content-Type
			xmlHttp.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
			//4、发送请求，给出请求体
			xmlHttp.send("username=" + userEle.value);

			//5、给xmlHttp的onreadystatechange事件注册监听
			xmlHttp.onreadystatechange = function() {
				if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断
					//获取服务器的响应，判断是否为1
					//是：获取span,添加内容:"用户名已被注册"
					var text = xmlHttp.responseText;
					var span = document.getElementById("errorSpan");
					if (text == "1") {
						//得到span元素
						span.innerHTML = "用户名已被注册";
					} else {
						span.innerHTML = "";
					}
				}
			};
		};
	};
</script>
</head>

<body>
	<h1>用户名是否被注册</h1>
	<form action="" method="post">
		用户名<input type="text" name="username" id="usernameEle"><span
			id="errorSpan"></span> <br> 密 码<input type="password"
			name="password"><br> <input type="submit" value="注册">
	</form>
</body>

public class ValidateUsernameSevlet extends HttpServlet {

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	     request.setCharacterEncoding("utf-8");
	        response.setContentType("text/html;charset=utf-8");
	        /*
	         * 1、获取参数username
	         * 2、判断是否为lvc
	         * 3、如果是：响应1
	         * 4、如果不是：响应0
	         */
	    String username = request.getParameter("username");
	    if(username.equalsIgnoreCase("lvc")){
	        response.getWriter().print("1");
	    }
	    else{
	        response.getWriter().print("0");
	    }
		
	}

}

<script type="text/javascript">
	function createXMLHttpRequest() {
		try {
			return new XMLHttpRequest();//大多数浏览器
		} catch (e) {
			try {
				return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
			} catch (e) {
				try {
					return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
				} catch (e) {
					alert("什么浏览器？");
					throw e;
				}
			}
		}
	}
	window.onload = function() {
		var btn = document.getElementById("btn");//文档加载完毕后执行
		btn.onclick = function() {
			/*
			  ajax四步操作，得到服务器的响应
			      把响应结果显示到h1元素中
			 */
			/*
			1.得到异步对象 
			 */
			var xmlHttp = createXMLHttpRequest();
			/*
			 2、打开与服务器的连接
			     指定请求方式
			     指定请求的URL(页面由服务器发送过来 在发送之前已经被服务器变成html)
			     指定是否为异步请求
			 */
			xmlHttp.open("GET", "<c:url value='/BServlet'/>", true);
			/*
			3.发送请求
			 */
			xmlHttp.send(null);//get请求没有请求体，也要给出null，不然firefox可能不能发送
			/*
			4、给异步对象的onreadystatechange事件注册监听器
			 */
			xmlHttp.onreadystatechange = function() {
				if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
					//双重判断：xmlHttp的状态为4(服务器响应结束)，以及服务器响应的状态码为200(响应成功)
					var doc = xmlHttp.responseXML;
					//获取服务器的响应结果<xml>
					var ele = doc.getElementsByTagName("student")[0];
					var number = ele.getAttribute("number");
					/* var name = ele.getElementsByTagName("name")[0].text; */
					var name;
					var age;
					var sex;
					//处理浏览器的差异
					if (window.addEventListener) {//一般浏览器都有这
						name = ele.getElementsByTagName("name")[0].textContent;
						age = ele.getElementsByTagName("age")[0].textContent;
						sex = ele.getElementsByTagName("sex")[0].textContent;
					} else {//IE支持
						name = ele.getElementsByTagName("name")[0].text;
						age = ele.getElementsByTagName("age")[0].text;
						sex = ele.getElementsByTagName("sex")[0].text;
					}
					var text1 = number + "," + name + "," + age + "," + sex;
					document.getElementById("h1").innerHTML = text1;
				}

			};
		};
	};
</script>

</head>

<body>
	<button id="btn">点击</button>
	<h1 id="h1"></h1>

</body>

public class BServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        String xml = "<students>" + "<student number='1001'>"
                + "<name>zs</name>" + "<age>18</age>" + "<sex>male</sex>"
                + "</student>" + "</students>";
        response.setContentType("text/xml;charset=utf-8");
        response.getWriter().print(xml);
    }

}