java深入探究13-js,ajax

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

2024-09-29 14:15:02 215人阅读

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

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

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

java深入探究13-js,ajax

看完仍有疑问？有类似问题直接问程序猿