Ajax基础&itcast课件

二）JS中的三种类型

   （1）基本类型：number，string，boolean

       number包含正数，负数，小数

             string由''或""定界

                   boolean由true或false，但js中的boolean也包含更多情况，例如：存在表示true，不存在表示false

var num = 100;        var str = "哈哈";        var flag = false;        window.alert(num);        window.alert(str);        window.alert(flag);

 

   （2）特殊类型：null，undefined

             null表示一个变量指向null

             undefined表示一个变量指向的值不确定

vararray = null;        var student;        alert(array);        alert(student);

 

   （3）复合类型：函数，对象，数组

             对象包含内置对象和自定义的对象

 

 

三）JS中有三种定义函数的方式

   （1）正常方式：functionmysum(num1,num2){return num1+num2;}

function mysum(num1,num2){            return num1 + num2;        }        var myresult = mysum(100,200);        alert("myresult="+myresult);

 

   （2）构造器方式：newFunction("num1","num2","return num1+num2;")

var youresult = new Function("num1","num2","return num1+num2");        alert( youresult(1000,2000) );

 

   （3）直接量或匿名或无名方式：varmysum = function(num1,num2){return num1+num2;}

var theyresult = function(num1,num2){                          return num1 + num2;                       }        alert( theyresult(10000,20000) );

 

 

四）JS中有四种对象

   （1）内置对象 ：Date，Math，String，Array，。。。

var str = new Date().toLocaleString();        window.document.write("<font size='44' color='red'>"+str+"</font>");

 

   （2）自定义对象：Person，Card，。。。 

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

 

   （3）浏览器对象：window，document，status，location，history。。。

function myrefresh(){             window.history.go(0);         }

 

   （4）ActiveX对象：ActiveXObject("Microsoft.XMLHTTP")，。。。

 

 

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

   （1）window.location.href

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

 

   （2）form.submit()

<formaction="/js-day01/04_array.html"method="POST">        <inputtype="button"value="提交到服务端"onclick="doSubmit()"/>     </form>     <scripttype="text/javascript">        function doSubmit(){            //表单提交            document.forms[0].submit();        }     </script>

 

   （3）inputElement.onblur= 函数

   （4）document.createElement(“img”)

   （5）imgElement.style.width/height

 

                  

七）什么是AJAX【Asynchronous异步的JS和XML】，工作原理与特点

   （1）什么是同步：

             请求1->响应1->请求2->响应2->

       Web1.0时代

 

   （2）什么是异步：

             请求1->请求2->请求3->响应1->响应2->响应3->

             请求1->响应1->请求2->请求3->响应2->响应3->

             Web2.0时代

       项目中：Web1.0为主（整个浏览器刷新），Web2.0为辅（浏览器局部刷新）

 

   （3）什么是AJAX

                   客户端（特指PC浏览器）与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术      

             即，AJAX是一个【局部刷新】的【异步】通讯技术

             AJAX不是全新的语言，是2005年Google公司推出的一种全新【编程模式】，不是新的编程语言

 

         

   （5）AJAX工作原理

       参见<<AJAX工作原理.JPG>>

 

八）AJAX应用

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

 （text/html;charset=UTF-8）

当前时间:<span></span><br/>     <input type="button" value="异步方式提交"/>

 

<scripttype="text/javascript">        //定位button按钮，同时添加单击事件        document.getElementsByTagName("input")[0].onclick =function(){            //NO1)创建AJAX异步对象（每个浏览器内置的，无需第三方jar包）            varajax = createAJAX();//0            //NO2)AJAX异步对象准备发送请求            varurl = "${pageContext.request.contextPath}/TimeServletAjax?id="+newDate().getTime();            var method = "GET";            ajax.open(method,url);//1            //NO3）AJAX异步对象真正发送请求体的数据到服务器，如果请求体无数据的话，用null表示            varcontent = null;            ajax.send(content);//2                       //----------------------------------------等待                       //NO4）AJAX异步对象不断监听服务端状态的变化，只有状态码变化了，方可触发函数            //0-1-2-3-4,这些是可以触发函数的            //4-4-4-4-4，这些是不可以触发函数的            //以下这个函数是服务器来触发的，不是程序员触发的，这和onclick是不一样的            ajax.onreadystatechange =function(){               //如果AJAX状态码为4               if(ajax.readyState == 4){                   //如果服务器响应码是200                   if(ajax.status == 200){                      //NO5）从AJAX异步对象中获取服务器响应的结果                      varstr = ajax.responseText;                      //NO6）按照DOM规则，将结果动态添加到web页面指向的标签中                       document.getElementsByTagName("span")[0].innerHTML = str;                   }                }            }        }     </script>

 

public class TimeServletAjax 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());        //注意：在Web2.0时代，即异步方式下，不能用转发或重定向        //因为：转发或重定向会引起浏览器全部刷新，而不是局部刷新        //所以得用以输出流的方式将服务器的结果输出到浏览器        response.setContentType("text/html;charset=UTF-8");        PrintWriter pw = response.getWriter();        pw.write(str);        pw.flush();        pw.close();     } }

 

   （2）基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在（text/html;charset=UTF-8）

输入用户名[POST]：<inputtype="text"maxlength="8"/>光标移出后，立刻显示结果     <hr/>     <div></div>

        

public class RegisterServletPost extends HttpServlet {     public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {        request.setCharacterEncoding("UTF-8");        String username = request.getParameter("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();     } }

 

     （4）验证码检查 

        （text/html;charset=UTF-8）

<form>        验证码：        <inputtype="text"maxlength="4"size="4"/>        <imgsrc="image.jsp"/>        <inputtype="button"value="看不清"size="2"/>        <span></span>     </form>

       

<scripttype="text/javascript">        //定位按钮，同时添加单击事件        document.getElementsByTagName("input")[1].onclick =function(){            //定位img标签，修改src属性            document.images[0].src ="image.jsp?id="+newDate().getTime();            //清空span标签中的内容            varspanElement = document.getElementsByTagName("span")[0];            spanElement.innerHTML = "";            //清空文本框中的内容            document.getElementsByTagName("input")[0].value ="";        }     </script>         <scripttype="text/javascript">        //定位文本框，同时添加键盘弹起事件        document.getElementsByTagName("input")[0].onkeyup =function(){            //获取输入的验证码            varcheckcode = this.value;            //去空格            checkcode = trim(checkcode);            //获取验证码的长度            varsize = checkcode.length;            //如果长度为4            if(size == 4){               //NO1)               varajax = createAJAX();               //NO2)               varmethod = "POST";               var url = "${pageContext.request.contextPath}/CheckcodeServlet?id="+newDate().getTime();               ajax.open(method,url);               ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");               //NO3)               varcontent = "checkcode=" + checkcode;               ajax.send(content);                             //--------------------------------------------                             //NO4)               ajax.onreadystatechange =function(){                   if(ajax.readyState == 4){                      if(ajax.status == 200){                          //NO5)                          varimagePath = ajax.responseText;                                                   //NO6)                          varimgElement = document.createElement("img");                          imgElement.src = imagePath;                          imgElement.style.width = "14px";                          imgElement.style.height = "14px";                          var spanElement = document.getElementsByTagName("span")[0];                          spanElement.innerHTML = "";                          spanElement.appendChild(imgElement);                      }                   }               }            }else{               //清空span标签中的内容               varspanElement = document.getElementsByTagName("span")[0];               spanElement.innerHTML = "";            }        }     </script>

       

public class CheckcodeServlet extends HttpServlet {    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {       request.setCharacterEncoding("UTF-8");       //获取客户端输入的验证码       String checkcodeClient = request.getParameter("checkcode");       //获取服务端产生的验证码       HttpSession httpSession = request.getSession();       String checkcodeServer = (String) httpSession.getAttribute("CHECKNUM");       //二个验证码进行比较       String tip = "images/MsgError.gif";       if(checkcodeClient!=null && checkcodeServer!=null && checkcodeClient.equals(checkcodeServer)){         tip = "images/MsgSent.gif";       }       //以流的方式输出tip变量       response.setContentType("text/html;charset=UTF-8");       PrintWriter pw = response.getWriter();       pw.write(tip);       pw.flush();       pw.close();    } }

 

 

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

   （1）事件：

       ajax.onreadystatechange：表示AJAX异步对象不断监听服务端的响应，

        是由服务器程序触发，不是程序员触发

 

   （2）属性：

             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载体中的数据

 

   （3）方法：

             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

 

 

十）数据载体

   （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）适合：大量具有层次数据载体