首页 > 代码库 > java深入探究13-js,ajax

java深入探究13-js,ajax

1.js

  1)三种基本类型:

    var num=100;
    var str="哈哈";
    var flag=true;

  2)创建函数的三种方式:

    正常模式:

      function add(num1,num2){
        return num1+num2;
      }

    构造器模式:

      var add=new Function("num1","num2","return num1+num2");

    匿名方式:

      var add=function(num1,num2){return num1=num2;}

  3)js中的对象

    Date;String;Array;Math;自定义对象;window对象;status对象,location对象,history对象 

技术分享
  <script type="text/javascript">
      //Date
      /* var nowStr=new Date().toLocaleDateString();
      window.alert(nowStr); */
      
      //String
      /* var str="String";
      var length=str.length;
      window.alert(length); */
      
      //Array
      /* var array=new Array("语文","数学","英语",true,123);
      for(var i=0;i<array.length;i++){
          document.write(array[i] + "   ");
      } */
      
      //Math
      /* for(var i=1;i<=10;i++){
          document.write(Math.floor(Math.random()*9)+1 + "<br/>");
      } */
      
      
      //自定义对象
      function Person(id,name,sal){
          this.id=id;
          this.name=name;
          this.sal=sal;
      }
      var p =new Person(1,"小平",70000);
      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; */
      
      //location对象,模拟用户在地址栏输入url访问其它页面的情况
      /* var url="04_images.html";
      window.location.href=http://www.mamicode.com/url; */
      
      //history
      /* window.history.go(1); */
  </script>
View Code

2.ajax

  创建ajax通用函数

技术分享
function createAJAX(){
            var ajax = null;
            try{
                ajax = new ActiveXObject("microsoft.xmlhttp");
            }catch(e1){
                try{
                    ajax = new XMLHttpRequest();
                }catch(e2){
                    alert("你的浏览器不支持ajax,请更换浏览器");
                }
            }
            return ajax;
        }
View Code

  get方式发送数据给servlet

    需要注意点:get方式数据传输是靠url,所有传输中文时,需要转码,encodeURI();,之后到了后台需要将数据转为byte以ISO8859-1方式,再变为utf-8模式字符串

技术分享
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基于HTML,以GET或POST方式,检查注册用户名是否在数据库中已存在</title>
  </head>
  <body>
    
    <form>
        用户名[GET]:<input id="usernameID" type="text" name="username" maxlength="4"/>
        光标移出后,立即检查结果
    </form>
    <hr/>
    <span id="resID"></span>
    
    <script type="text/javascript">
        //创建AJAX异步对象,即XMLHttpRequest
        function createAJAX(){
            var ajax = null;
            try{
                ajax = new ActiveXObject("microsoft.xmlhttp");
            }catch(e1){
                try{
                    ajax = new XMLHttpRequest();
                }catch(e2){
                    alert("你的浏览器不支持ajax,请更换浏览器");
                }
            }
            return ajax;
        }
    </script>
    
    
    <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;
            //alert(url);
            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>
    
  </body>
</html>
View Code

  post方式发送数据给servlet

    需要注意点:因为ajax传数据到后台默认是get方式,一般会访问完url就就结束,所以为了能将content数据通过send发过去,需要给ajax设置请求头ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")

技术分享
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基于HTML,以GET或POST方式,检查注册用户名是否在数据库中已存在</title>
  </head>
  <body>
    
    <form>
        用户名[POST]:<input id="usernameID" type="text" name="username" maxlength="4"/>
        光标移出后,立即检查结果
    </form>
    <hr/>
    <span id="resID"></span>
    
    <script type="text/javascript">
        //创建AJAX异步对象,即XMLHttpRequest
        function createAJAX(){
            var ajax = null;
            try{
                ajax = new ActiveXObject("microsoft.xmlhttp");
            }catch(e1){
                try{
                    ajax = new XMLHttpRequest();
                }catch(e2){
                    alert("你的浏览器不支持ajax,请更换浏览器");
                }
            }
            return ajax;
        }
    </script>
    
    
    <script type="text/javascript">
        //定位文本框,同时提供焦点失去事件
        document.getElementById("usernameID").onblur = function(){
            //获取文本框中输入的值
            var username = this.value;
            //如果用户没有填内容
            if(username.length == 0){
                //提示 
                document.getElementById("resID").innerHTML = "用户名必填";
            }else{
                var ajax = createAJAX();
                var method = "POST";
                var url = "${pageContext.request.contextPath}/UserServlet";
                //alert(url);
                ajax.open(method,url);
                
                //需要设置ajax请求头,因为这是ajax模式是get方式请求,访问完uri后就不访问,且会自动将请求体重汉字自动转换为UTF-8
                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
                var content="username="username;
                //NO3)
                ajax.send(content);
                
                //--------------------------------------------------------等待
                
                //NO4)
                ajax.onreadystatechange = function(){
                    if(ajax.readyState == 4){
                        if(ajax.status == 200){
                            //NO5)
                            var tip = ajax.responseText;
                            //NO6)
                            document.getElementById("resID").innerHTML = tip;
                        }
                    }
                }
            }
        }
    </script>
    
  </body>
</html>
View Code

 

java深入探究13-js,ajax