标签：throws 初始 asc 2.x uid vat sig color 支持
Asynchronous Javascript And XML:异步的js和xml
他能使得js访问服务器，而且是异步的。
服务器给客户端的响应一般是整个页面，一个完整的html页面，但是在ajax中，是局部刷新，那么服务器不用响应整个页面，而只是数据。
优点：
异步交互：增强体验
性能：因为服务器无需响应整个页面，只需响应部分页面，服务器压力减轻。
缺点：
Ajax不能应用所有场景。
Ajax无端多了很多请求，给服务器带来压力。
第一步：得到（XMLHttpRequest）
Ajax其实只需要学习一个对象：XMLHttpRequest，如果掌握了它，就掌握了Ajax，
得到XMLHttpRequest
编写创建XMLHttpRequest对象的函数：
function createXMLRequst(){ try{ return new XMLHttpRequest(); }catch(e) { try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("不支持浏览器版本"); throw e; } } } }
第二步：（打开与服务器的链接）
*：xmlHttp.open("GET","/AjaxDemo/AjaxServlet"，true);
第三步：（发送请求）
*：xmlHttp.send(null)；如果不给可能会造成部分浏览器无法发送。
参数：就是请求体内容，如果是GET请求，必须给出null.
第四步：（）
》var state=xmlHttp.readState;//值可能是0，1，2，3，4
*：得到服务器的响应状态吗：
》：var status=xmlHttp.status; //例如200（响应成功），400，500
*：得到服务器的响应内容：
》：var content=xmlHttp.responseText;//得到服务器的响应的文本格式的内容。 》：var content=xmlHttp.responseXML;//得到服务器响应的xml响应内容，他是document对象了。
注册状态发生监听事件
xmlHttp.onreadystatechange=function() { //双重判断，判断是否为4的状态，并且响应状态码为：200 if(xmlHttp.readyState==4 && xmlHttp.status==200) { //获取相应内容： var text=xmlHttp.responseText; } }
第二例：发送post请求（如果发送请求时候需要带有参数，一般都用post请求）
open：xmlHttp.open("POST"..);
添加一步：设置Content-type请求头；
》xmlHttp.setRequestHeader("Content-Type","application/x-wwww-form-urlencoded");
*send：xmlHttp.send("username=zhangshan&password=123");//发送请求时候指定请求体
当用户名已经被注册了，提示
新建一个ValidateUserNameServlet的servlet，用来判断是是否用户名是否重复。
通过：response.getWriter().println("");向客户端输出数据，Ajax获取到该数据，进行处理。
package com.Ajax; import java.io.IOException; 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("/ValidateUserNameServlet") public class ValidateUserNameServlet extends HttpServlet { private static final long serialVersionUID = 1L; public ValidateUserNameServlet() { super(); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); String username=request.getParameter("username"); if(username.equalsIgnoreCase("lfh")) response.getWriter().println("1"); else response.getWriter().println("0"); } }
页面代码：
<h1>演示用户名是否注册</h1> <form action="" method="post"> 用户名：<input type="text" name="username" id="username"/><span id="erroSpan"></span><br/> 密码：<input type="password" name="password" id="password"/> <br/> <input type="submit" value="注册"/> </form>
脚本代码：通过Ajax向服务器发送请求，服务器返回的数据给Ajax后，进行处理。
<script type="text/javascript"> function createXMLRequst(){ try{ return new XMLHttpRequest(); }catch(e) { try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("不支持浏览器版本"); throw e; } } } } window.onload=function(){ //文档加载完毕后执行? var btn=document.getElementById("username"); btn.onblur=function(){ //四步得到异步对象 var xmlHttp=createXMLRequst(); /* 打开与服务器的链接 指定请求方式，指定请求地址，指定是否为异步请求 */ xmlHttp.open("POST","/AjaxDemo/ValidateUserNameServlet",true); //设置请求头 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送请求，加上请求参数 xmlHttp.send("username="+btn.value); ///给异步对象的onreadystatechange事件注册监听器 xmlHttp.onreadystatechange=function() { //双重判断，判断是否为4的状态，并且响应状态码为：200 if(xmlHttp.readyState==4 && xmlHttp.status==200) { //获取相应内容：? var text=xmlHttp.responseText; var span=document.getElementById("erroSpan"); if(text==1) span.innerHTML="用户名已经存在??"; else span.innerHTML=""; } } } } </script>
完整页面代码：
<%@ 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"> <script type="text/javascript"> function createXMLRequst(){ try{ return new XMLHttpRequest(); }catch(e) { try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("不支持浏览器版本"); throw e; } } } } window.onload=function(){ //文档加载完毕后执行? var btn=document.getElementById("username"); btn.onblur=function(){ //四步得到异步对象 var xmlHttp=createXMLRequst(); /* 打开与服务器的链接 指定请求方式，指定请求地址，指定是否为异步请求 */ xmlHttp.open("POST","/AjaxDemo/ValidateUserNameServlet",true); //设置请求头 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送请求，加上请求参数 xmlHttp.send("username="+btn.value); ///给异步对象的onreadystatechange事件注册监听器 xmlHttp.onreadystatechange=function() { //双重判断，判断是否为4的状态，并且响应状态码为：200 if(xmlHttp.readyState==4 && xmlHttp.status==200) { //获取相应内容：? var text=xmlHttp.responseText; var span=document.getElementById("erroSpan"); if(text==1) span.innerHTML="用户名已经存在??"; else span.innerHTML=""; } } } } </script> <title>演示用户名是否注册</title> </head> <body> <h1>演示用户名是否注册</h1> <form action="" method="post"> 用户名：<input type="text" name="username" id="username"/><span id="erroSpan"></span><br/> 密码：<input type="password" name="password" id="password"/> <br/> <input type="submit" value="注册"/> </form> </body> </html>
效果：
标签：throws 初始 asc 2.x uid vat sig color 支持
原文地址：https://www.cnblogs.com/alsf/p/9314163.html
