javascript回顾

一、什么是JavaScript？
JavaScript是
（1）基于对象
    JavaScript本身就是一些线程的对象可供程序员使用，例如：Array,Math,String...
    JavaScript并不排除你可以自己按一定的规则创建对象
（2）时间驱动
    JavaScript代码写好后，需要外界出发后，方可运行，例如：单击事件，定时执行...
（3）解释性
    每次运行JavaScript代码时，得需要将原代码一行一行地解释执行
（4）基于浏览器的动态交互网页技术
    如果JavaScript嵌入到HTML中，可以不需要服务器支持，直接由浏览器解释执行
    如果JavaScript嵌入到JSP或Servlet中，必需要服务器支持，直接由浏览器解释执行
（5）嵌入在HTML标签中
    JS必须嵌入到一个名的标签中，方可运行脚本语言

二、JavaScript中的三种类型
    （1）基本类型：number,string,boolean
    number包含正数、负数、小数
    string 由''(单引号)或""（双引号）定界
    boolean包含true或false
    注意：JavaScript中的boolean也包含更多情况，例如：存在表示true，不存在表示false
代码示例：
    var num = 100;
    var str = "Hello World";
    var flag = false;
    alert(num);//100
    alert(str);//Hello World
    alert(flag);false
    （2）特殊类型：null,undefined
    null表示一个变量指向null
    undefined表示一个变量指向的值不确定
代码示例：
    var array = null;
    var student;
    alert(array);//null
    alert(student);//undefined
    (3)复合类型：函数,对象,数组
    对象包含内置对象和自定义的对象
三、JavaScript中由三种定义函数的方式
    （1）正常方式：function mysum(num1,num2){return num1+num2;}
代码示例：
    function mysum(num1,num2){
        return num1 + num2;
    }
    var myresult = mysum(100,200);
    alert("myresult="+myresult);//myresult=300
    （2）构造器方式：new Function("num1","num2","return num1+num2");
代码示例：
    var youresult = new Function("num1"."num2"."return num1+num2;");
    alert("youresult="youresult(100,200));//youresult=300
    （3）直接量或匿名或无名方式：var theysum = function(num1,num2){return num1+num2;}
代码示例：
    var theyresulut = function(num1.num2){
        return num1 + num2;
    }
    alert("theyresulut="+theyresulut(100,200));//theyresulut=300
四 JavaScript中有四种对象
    （1）内置对象：Date、Math、String、Array....
代码示例：
    var str = new Date().toLocaleString();
    window.document.write(""+str+"");//2017/11/24 下午 9:19:13（当前系统时间，字体大小：45，颜色：蓝色）
     （2）自定义对象：Person，Student...
代码示例：
     function Student(id,name,age){
         //this指代当前对象
         this.id = id;
         this.name = name;
         this.age = age;
     }
     var stu = new Student(1,"小铭","男");
     document.write("编号:"+stu.id);//编号：1
     document.write("姓名:"+stu.name);//姓名:小铭
     document.write("性别："+stu.age);//性别：男
     （3）浏览器对象：window、document、status、location、history...
     //当代码执行时，浏览器一直刷新  history.go(0):刷新 history.go(1):前进 history.go(-1):后退
     function myrefresh(){
         window.history.go(0);
     }
     （4）ActiveX对象：ActiveXObject("Microsoft.XMLHTTP")...

五、演示JavaScript对象的属性，方法和事件的使用
    （1）window.location.href
代码示例：
    var url = "index.html";
    window.location.href = url;//跳转到index.html页面
    （2）from.submit()
代码示例：
    
 
        
  
    
 
    
    （3）inputElement.onblur = 函数
    （4）document.createElement("img")
    （5）imgElement.style.width/height
六、回顾传统Web应用请求和响应特点【显示当前时间】
    （1）请求：浏览器以HTTP协议的方式提交请求到服务器
    （2）响应：服务器以HTTP协议的方式响应内容到浏览器
            注意：HTTP是WEB大众化非安全协议
        HTTPS是WEB安全协议，是基于HTTP协议的，且加了一些加密等特殊功能，常用于在线支付，或者是需要安全性较高的网站中，例如：天猫网站
        HTTP请求有三个部分组成：请求行，请求头，请求体
        HTTP响应由三个部分组成：响应行，响应头，响应体
    （3）状态栏：由明显的进度条刷新现象，如果服务器响应较慢的话，进度条刷新也会变慢，IE9等中高版本浏览器，由明显转圈圈图标
    （4）历史栏：会手机原来已访问过的web页面，进行缓存
    （5）缺点：不需要变化的大量数据，也全部刷新，造成浏览器加载和处理负担
    （6）可改进的地方：让不需变化的大量数据，原封不懂，不用缓存到历史栏中，无需全部是刷新，只刷新某些需要变化的数据区域，例如：当前时间的区域
代码示例：
    当前时间：${requestScopr.str}
    

    

    public class TimeServlet extends HttpServlet{
        public void doGet(HttpServletRequest request,HttpServletResponse) throws ServletException,IOException{
            System.out.println("TimeServlet::doGet");
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            request.setAttribute("str",str);
            request.getRequestDispatcher("/index.jsp").forward(request,response);
        }
    }
七、什么是AJAX【Asynchronous异步的JavaScript和XML】,工作原理与特点
    （1）什么是同步：
            请求1-->响应1-->请求2-->响应2-->
            Web1.0时代
    （2）什么是异步：
            请求1-->请求2-->请求3-->响应1-->响应2-->响应3-->
            请求1-->响应1-->请求2-->请求3-->响应2-->响应3-->
            Web2.0时代
    （3）什么是AJAX:
    客户端（特指PC浏览器）与服务器,可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术
    即，AJAX是一个【布局刷新】的【异步】通讯技术
    AJAX不是全新的语言，是2005年Google公司推出的一种全新【编程模式】,不是新的编程语言

    （4）不用刷新整个页面便可与服务器通讯的方法有：
        （A）Flas/ActionScript
        （B）框架Frameset
        （C）iFrame（内嵌入框架）
        （D）XMLHttpReauest（非IE浏览器）和ActiveXObject（IE浏览器）
            背景：早上IE5时，微软就开发出了第一个异步通讯对象，叫ActiveXObject对象，
            Firefox等其他浏览器厂商也慢慢引入异步通讯对象，叫XMLHttpRequest对象，但IE由向下兼容问题，
            也可以使用ActiveXObject对象。
            无需第三方jar包，现代中高版本浏览器内置了这个异步通讯对象，只需通过JavaScript就可以创建
            注意：所有浏览器中都内置了异步对象，在默认情况下，该异步对象并没有创建出来
    代码示例：
        function createAJAX(){
            var ajax = null;
            try{
                ajax = new ActiveXObject("microsoft.xmlhttp");
            }catch(e1){
                ajax = new XMLHttpRequest();
            }
            return ajax;
        }
        （5）AJAX工作原理
            参见《AJAX工作原理.JPG》链接：https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=ajax%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86.jpg&hs=2&pn=0&spn=0&di=71339160530&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=625365557%2C280187035&os=3110012394%2C451514456&simid=3452325323%2C250112902&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=ajax%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86.jpg&objurl=http%3A%2F%2Ffilesimg.111cn.net%2F2011%2F05%2F20111119011732771.jpg%3F16&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B888vg_z%26e3BgjpAzdH3Fw6p-9a08l_z%26e3Bip4&gsm=0
        （6）AJAX包含的技术
            参见《AJAX包含的技术.JPG》链接：https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=ajax%E5%8C%85%E5%90%AB%E7%9A%84%E6%8A%80%E6%9C%AF.jpg&hs=2&pn=0&spn=0&di=83016731821&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1467581459%2C2503600119&os=3401596873%2C3929444465&simid=3498237227%2C338496020&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=ajax%E5%8C%85%E5%90%AB%E7%9A%84%E6%8A%80%E6%9C%AF.jpg&objurl=http%3A%2F%2Fpic.bianceng.cn%2Fuploads%2F2011%2F1108%2F105JQ234-0.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bktwgvjg2_z%26e3BvgAzdH3FojkhuAzdH3Fw3wxAzdH3Fda88abAzdH3Fdbndn_z%26e3Bip4&gsm=0
        （7）AJAX开发步骤
            步骤一：创建AJAX异步对象，例如：createAJAX();
            步骤二:准备发送异步请求，例如：ajax.open(method.url)
            步骤三：如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader()
                   如果是GET请求的话，无序设置AJAX请求头
            步骤四：整整发送请求体中的数据到服务器，例如：ajax.send()
            步骤五：AJAX不断地监听服务器端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数
            步骤六：在无名处理函数中，获取AJAX的数据后，按照DOM规则，用JavaScript语言来操作Web页面
        （8）AJAX适合用在什么地方
            AJAX【适合】不用来传递大量数据，而只用来【传递少量数据】，在用户的【体验】上更加人性化
            AJAX是一个和服务器无关的技术，即服务器可使用：javaEE,.NET,PHP...这些技术都可以
            AJAX只管向服务器发送请求，同时只管接收服务器的HTML或XML或JSON载体响应
            服务器端不能使用转发或重定向到wbe页面，因为这样会引起浏览器全面刷新
            即只能以流的方式响应给浏览器

八、AJAX应用
    （1）无序刷新整个Web页面显示服务器响应的当前时间
    (text/html;charset=UTF-8)
代码示例：
    当前时间：

    

    

    public class ProvinceCityServlet extends HttpServlet{
        public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
           this.doPost(request,response);
        }
        public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
            request.setCharacterEncoding("UTF-8");
            String province = request.getParamter("province");

            response.setContentType("text/xml;charset=UTF-8");
            PrintWrite pw = response.getWrite();
            pw.write("
 ");
            pw.write("root");

            if("广东".equals(province)){
                pw.write("
 
  广州
 ");
                pw.write("
 
  深圳
 ");
                pw.write("
 
  中山
 ");
                pw.write("
 
  珠海
 ");
            }else if("湖南".equals(province)){
                pw.write("
 
  长沙
 ");
                pw.write("
 
  株洲
 ");
                pw.write("
 
  张家界
 ");
            }else if("湖北".equals(province)){
                pw.write("
 
  武汉
 ");
                pw.write("
 
  黄岗
 ");
            }

            pw.write("");
            pw.flush();
            pw.close();
        }
    }
    (4)验证码检查
    (text/html;charset=UTF-8)
代码示例：
    
 
  
        验证码：
        
  
        
  
        
        
    
 

    

    

    public class checkcodeServlet extends HttpServlet{
        public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
            request.setCharacterEncoding("UTF-8");
            //获取客户端输入的验证码
            String checkcodeClient = request.getParamter("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");
            PrintWrite pw = response.getWrite();
            pw.write(tip);
            pw.flush();
            pw.close();
        }
    }

九、XMLHttpRequest(即：AJAX)对象常用事件，方法和属性
    （1）事件：
        ajax.onreadystatechange:表示AJAX异步对象不断监听服务端的响应，是由服务器程序触发，不是程序员触发
    （2）属性：
        ajax.readySate==0:表示AJAX异步对象已创建好，但还没有调用open()方法 

        ajax.readySate==1:表示AJAX异步对象已调用open()方法，但还没有调用send()方法 

        ajax.readySate==2:表示AJX异步对象已调用send()方法，但请求还没有到达服务器端

        ajax.readySate==3:表示服务器端已接收到AJAX异步对象的请求，正在处理响应中...

        ajax.readySate==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字符串，无需JavaScript解析，配额和innerHTML属性效率高
    （B）缺点：如果需要更新WEB页面中的很多处地方，HTML不太方便，同时innerHTML属性不是DOM的标准，不能操作XML
        注意：innerHeml在xml中不能使用，用firstChild.nodeValue替代
    （C）适合：小量数据载体，且只要更新在web页面中的一个地方

    （2）XML
    （A）优点：是种通信的普通字符串格式，任何技术都能解析，标签名可以任意，使用DOM标准规则能够解析XML的任何部分
    （B）缺点：XML文件格式相当阉割，出错后，responseXML属性返回NULL，如果XML文件过长，导致解析效率低下
    （C）适合：大量具有层次数据载体

    （3）JSON+struts2框架
        兼备HTML和XML的特点