AJAX开发

js类型

• number类型

• var num = 100;

• string类型，注意js中的string类型用”或”“均可

• 
  var str = “哈哈”;
• boolean类型
• 
  var flag = true;
• undefined不是字符串，它是一种类型

• var card;alert(card);    //通过如下代码判断： if(card == undefined){    alert("card变量暂没值");       }else{    alert(card); }      

定义函数

<script type="text/javascript">    function add(num1,num2){        return num1 + num2;    }    window.alert("10+20=" + add(10,20));</script>

JS中有四种对象

• Date对象

•   var nowStr = new Date().toLocaleString();  window.document.write(nowStr + "<br/>");  

• Math对象

• 
  for(var i=1;i<=10;i++){
  //1到9之间的随机整数
  document.write(Math.floor(Math.random()*9)+1 + “
  ”);
  }

• string对象

  var str = "Hello你好";var size = str.length; alert(size);//7

• Array

  var array = new Array("语文","数学","英语",true,123);for(var i=0;i<array.length;i++){   document.write(array[i] + "   ");}

• 自定义对象

  function Person(id,name,sal){    this.id = id;    this.name = name;    this.sal = sal;}var p = new Person(1,"波波",7000);document.write("编号:" + p.id + "<br/>");document.write("姓名:" + p.name + "<br/>");document.write("薪水:" + p.sal + "<br/>");

• window对象，打开新窗口

  var url = "04_images.html";window.open(url);   

• status对象，将当前时间设置到状态栏中

  var nowStr = new Date().toLocaleString();window.status = nowStr;(url);   

• location对象，模拟用户在地址栏输入url访问其它页面的情况

   var url = "04_images.html"; window.location.href = url;

form 表单

• 演示用JS提交表单，重要

  <form action="04_images.html" method="POST">    <input type="button" value="提交"/></form> <!-- 演示用JS提交表单，重要 --><script type="text/javascript">    //定位提交按钮    var inputElement = document.getElementsByTagName("input")[0];    //为提交按钮添加单击事件    inputElement.onclick = function(){                                    //定位<form>标签，forms表示document对象中所有表单的集合，通过下标引用不同的表单，从0开始                                    var formElement = document.forms[0];                                    //提交表单，提交到action属性指定的地方                                    formElement.submit();                           }</script>

• 传统Web应用请求和响应特点【显示当前时间】

  当前时间：${requestScope.nowStr}<br/><input id="buttonID" type="button" value="获取当前时间"/><p/><script type="text/javascript">    //定位按钮，同时添加单击事件    document.getElementById("buttonID").onclick = function(){        //发送请求到服务器        var url = "${pageContext.request.contextPath}/TimeServlet";        window.location.href = url;    }</script>

  • TimeServlet
  • 
    //构造SimpleDateFormat对象
    SimpleDateFormat sdf = new SimpleDateFormat(“yyyy-MM-dd HH:mm:ss”);
    //将当前日期按照指定格式输出成字符串
    String nowStr = sdf.format(new Date());
    //将结果绑定到request域对象中
    request.setAttribute(“nowStr”,nowStr);
    //转发到06_time.jsp页面
    request.getRequestDispatcher(“/06_time.jsp”).forward(request,response);

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

XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)             背景：早上IE5时，微软就开发出了第一个异步通讯对象，叫ActiveXObject对象，             Firefox等其它浏览器厂商也慢慢引入异步通讯对象，叫XMLHttpRequest对象，             IE的高版本，也将这个异步对象取名叫XMLHttpRequest对象，但IE有向下兼容问题，             也可以使用ActiveXObject对象。    无需第三方jar包，现代中高版本浏览器中内置了这个异步通讯对象，只需通过JavaScript就可以创建            注意：所有浏览器中都内置了异步对象，在默认情况下，该异步对象并没有创建出来

AJAX开发步骤

    步一：创建AJAX异步对象，例如：createAJAX()    步二：准备发送异步请求，例如：ajax.open(method,url)    步三：如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader()          如果是GET请求的话，无需设置设置AJAX请求头    步四：真正发送请求体中的数据到服务器，例如：ajax.send()    步五：AJAX不断的监听服务端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数       步六：在无名处理函数中，获取AJAX的数据后，按照DOM规则，用JS语言来操作Web页面    

AJAX适合用在什么地方

    AJAX【适合】不用来传递大量数据，而只用来【传递少量数据】，在用户的【体验】上，【更加人性化】    AJAX是一个和服务器无关的技术，即服务器可使用：JavaEE，.NET，PHP，。。。这些技术都可    AJAX只管向服务器发送请求，同时只管接收服务器的HTML或XML或JSON载体响应    服务端不能使用转发或重定向到web页面，因为这样会起浏览器全面刷新    即只能以流的方式响应给浏览器

XMLHttpRequest(即：AJAX)对象常用事件，方法和属性

事件：

    ajax.onreadystatechange：表示AJAX异步对象不断监听服务端的响应，    是由服务器程序触发，不是程序员触发

属性：

    ajax.readyState==0：表示AJAX异步对象已创建好，但还没有调用open()方法    ajax.readyState==1：表示AJAX异步对象已调用open()方法，但还没有调用send()方法    ajax.readyState==2：表示AJAX异步对象已调用send()方法，但请求还没有到达服务器端    ajax.readyState==3：表示服务端已接收到AJAX异步对象的请求，正在处理响应中。。。    ajax.readyState==【4】：表示AJAX异步对象已经完完全全接收到了服务器的响应信             息，但接收到的数据不一定都正确    上述5种状态不是所有浏览器都相同，但状态4每种浏览器都相同    ajax.status==200：表示AJAX异步对象接收到响应码，如果是200的话，表示一切正常    ajax.responseText：表示从AJAX异步对象中获取HTML载体中的数据    ajax.responseXML：表示从AJAX异步对象中获取XML载体中的数据

方法：

    ajax.open(method,url,可选的boolean值)    AJAX异步对象准备发送异步请求    参数一：以什么方式发送，常用的用GET或POST，大小写不敏感    参数二：发送到什么地方去，常用Servlet或Struts2或SpringMVC来接收，           这里只限于JavaEE学科        参数三：默认值为true，表示AJAX对象以【异步】的方式提交到服务端            如果设置为false，表示AJAX对象以【同步】的方式提交到服务端    ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")    表示将请求体中的内容，按照UTF-8的方式进行编码，只针对POST请求有效       ajax.send(content)    AJAX异步对象真正发送异步请求    参数一：表示HTTP【请求体】中的内容    如果是GET方式：content = null，如果强行传值到服务器，服务端收不到，返回NULL    如果是POST方式：content != null，例如：username=jack&password=123&role=admin

无需刷新整个Web页面显示服务器响应的当前时间

• JSP

  当前时间：<span id="time"></span><br/><input id="buttonID" type="button" value="获取当前时间"/><p/>

• 创建AJAX异步对象

  <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>

• AJax 请求与响应

  <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>

• AjaxTimeServlet

  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();

基于HTML，以GET方式，检查注册用户名是否在数据库中已存在

• JSP

  <form>    用户名[GET]：<input id="usernameID" type="text" name="username" maxlength="4"/>    光标移出后，立即检查结果</form><hr/><span id="resID"></span>

• UserServlet

  public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {    String username = request.getParameter("username");    byte[] buf = username.getBytes("ISO8859-1");    username = new String(buf,"UTF-8");    System.out.println("username=" + username);    String tip = "<font color='green'>可以注册</font>";    if("杰克".equals(username)){        tip = "<font color='red'>该用户已存在</font>";    }    response.setContentType("text/html;charset=UTF-8");    PrintWriter pw = response.getWriter();    pw.write(tip);    pw.flush();    pw.close();}

• AJAX 异步请求

  <script type="text/javascript">    //定位文本框，同时提供焦点失去事件    document.getElementById("usernameID").onblur = function(){        //获取文本框中输入的值        var username = this.value;        //如果用户没有填内容        if(username.length == 0){            //提示             document.getElementById("resID").innerHTML = "用户名必填";        }else{            //对汉字进行UTF-8(U8)的编码            username = encodeURI(username);            //NO1)            var ajax = createAJAX();            //NO2)            var method = "GET";            var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username;            ajax.open(method,url);            //NO3)            ajax.send(null);            //--------------------------------------------------------等待            //NO4)            ajax.onreadystatechange = function(){                if(ajax.readyState == 4){                    if(ajax.status == 200){                        //NO5)                        var tip = ajax.responseText;                        //NO6)                        document.getElementById("resID").innerHTML = tip;                    }                }            }        }    }</script>

基于HTML，以POST方式，检查注册用户名是否在数据库中已存在

• JSP

  用户名[POST]：<input id="usernameID" type="text" maxlength="4"/><span id="resID">    <!--     <img src="tip变量" width="12px" height="12px"/>    --></span>

• UserServlet

  public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {    request.setCharacterEncoding("UTF-8");    String username = request.getParameter("username");    System.out.println("username=" + username);    String tip = "images/MsgSent.gif";    if("杰克".equals(username)){        tip = "images/MsgError.gif";    }    response.setContentType("text/html;charset=UTF-8");    PrintWriter pw = response.getWriter();    pw.write(tip);    pw.flush();    pw.close();}

• AJAX 异步请求

  <script type="text/javascript">    document.getElementById("usernameID").onblur = function(){        var username = this.value;//杰克        //NO1)        var ajax = createAJAX();        //NO2)        var method = "POST";        var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();        ajax.open(method,url);        //设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码        ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");        //NO3)        var content = "username=" + username;        ajax.send(content);        //===========================================等待        //NO4)        ajax.onreadystatechange = function(){            if(ajax.readyState == 4){                if(ajax.status == 200){                    //NO5)                    var tip = ajax.responseText;                    //NO6)                    //创建img标签                    var imgElement = document.createElement("img");                    //设置img标签的src/width/height的属性值                    imgElement.src = tip;                    imgElement.style.width = "12px";                    imgElement.style.height = "12px";                    //定位span标签                    var spanElement = document.getElementById("resID");                    //清空span标签中的内容                    spanElement.innerHTML = "";                    //将img标签加入到span标签中                    spanElement.appendChild(imgElement);                }            }        }    }</script>

实例：基于XML，以POST方式，完成省份-城市二级下拉联动

• JSP

  <select id="provinceID" style="width:111px">    <option>选择省份</option>    <option>湖南</option>    <option>广东</option></select>   &nbsp;&nbsp;&nbsp;<select id="cityID" style="width:111px">    <option>选择城市</option></select>   

• ProvinceCityServlet

  public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {    request.setCharacterEncoding("UTF-8");    String province = request.getParameter("province");    //通知AJAX异步对象，服务器响应的数据为xml格式的    response.setContentType("text/xml;charset=UTF-8");    //获取字符输出流    PrintWriter pw = response.getWriter();    pw.write("<?xml version='1.0' encoding='UTF-8'?>");    pw.write("<root>");    if("广东".equals(province)){        pw.write("<city>广州</city>");        pw.write("<city>深圳</city>");        pw.write("<city>中山</city>");    }else if("湖南".equals(province)){        pw.write("<city>长沙</city>");        pw.write("<city>株洲</city>");        pw.write("<city>湘潭</city>");        pw.write("<city>岳阳</city>");    }    pw.write("</root>");    pw.flush();    pw.close();}

• AJAX异步请求

  <script type="text/javascript">    //定位省份下拉框，同时添加内容改变事件    document.getElementById("provinceID").onchange = function(){        //清空城市下拉框中的内容，除第一项外        var cityElement = document.getElementById("cityID");        cityElement.options.length = 1;        //获取选中option标签的索引号，从0开始                 var index = this.selectedIndex;             //定位选中的option标签        var optionElement = this[index];        //获取选中的option标签中的内容，即省份        var province = optionElement.innerHTML;        //如果选中的内容不是"选择省份"        if("选择省份" != province){            //NO1)            var ajax = createAJAX();            //NO2)            var method = "POST";            var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime();            ajax.open(method,url);            //设置AJAX请求头            ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");            //NO3)            var content = "province=" + province;            ajax.send(content);            //---------------------------------等待            //NO4)            ajax.onreadystatechange = function(){                if(ajax.readyState == 4){                    if(ajax.status == 200){                        //NO5)从AJAX异步对象中获取服务器响应的xml文档                        var xmlDocument = ajax.responseXML;                        //NO6)按照DOM规则，解析XML文档                        var cityElementArray = xmlDocument.getElementsByTagName("city");                            var size = cityElementArray.length;                        for(var i=0;i<size;i++){                            //innerHTML只能用在html/jsp中，不能用在xml中                            var city = cityElementArray[i].firstChild.nodeValue;                            //<option></option>                            var optionElement = document.createElement("option");                               //<option>广州</option>                            optionElement.innerHTML = city;                            //<select><option>广州</option></select>                            cityElement.appendChild(optionElement);                        }                    }                }            }        }    }</script>

数据载体

   （1）HTML       （A）优点：服务端响应的是普通html字符串，无需JS解析，配合innerHTML属性效率高       （B） 缺点：如果需要更新WEB页面中的很多处地方，HTML不太方便，同时innerHTML属性不是DOM的标准，不能操作XML                  注意：innerHTML在xml中不能使用，用firstChild.nodeValue替代       （C）适合：小量数据载体，且只更新在web页面中的一个地方   （2）XML   （A）优点：是种通用的普通字符串格式，任何技术都能解析，标签名可以任意，使用DOM标准规则能够解析XML的任何部分       （B）缺点：XML文件格式相当严格，出错后，responseXML属性返回NULL，如果XML文件过长，导致解析效率低下       （C）适合：大量具有层次数据载体     练习：服务端采用Servlet完成1）检查注册用户名是否在数据库中存在2）省份-城市二级联动3）验证码识别