21天学通Java学习笔记-Day13(javascript-ajax)

HTML & CSS : 不知道怎么做笔记,不知道怎么系统学习!

JavaScript:

    两种表现形式:

        1:直接在 HTML 中嵌入 javascript 脚本:

            demo.html

          

  <html>
                 <head>
                      <title>
                           test
                      </title>
                 </head>
                 <body >
                      <script type="text/javascript">
                           alert("hello javascript wolrd!!");
                     </script> 
                 </body>
            </html>

 

        2:将 javascript 代码放在 js 文件中:

            demo.html

           

 <html>
                 <head>
                      <title>
                           test
                      </title>
                 </head>
                 <body >
                      <script type="text/javascript" src="demo.js">
                      </script>
                 </body>
            </html>

 demo.js

           

 alert("hello javascript wolrd!!");

 

JavaScript 是弱类型语言,不需要声明数据类型,声明变量要用关键字 var :

    var name = "joe";  //字符串类型

    var age = 12;  //整数类型

 

    也可以连着声明和赋值:

        var name = "joe" , age = 12 ;

javascript 没有声明类型所以变量可以放任何类型:

            var name = "joe";

            name = 12;  //会覆盖掉原来的"joe"

 

javascript 基础类型:

    数值:

        整数    var a = 123;

        浮点    var b = 12.34;

        负数    var c = -23;

    字符串:    var d = "hello";

    布尔值:    var e = true 或者 false

    数组:var f = new Array( );  也可以规定数组长度  var f = new Array( 5 );

                     f[ 0] = 1;   

                     f[ 1] = 2; 

                     .................. 

    数组简化定义:

        var f = [ ];

        数组也可以直接赋值:

            var f = new Array(1, 2, 3, 4);

        数组甚至可以呼和类型:

            var f = new Array("a", 2, false);

    关联数组(不以下标作为索引):

        var g = new Array( );

        g["name"] = "joe";

        g["age"] = 12;

        g["living"] = false;

        //关联数组提高可读性

 

算术操作符:

    +(加) , -(减) , *(乘) , /(除) , %(求模)

 

javascript 支持 ++(自增) , --(自减)

javascript 也支持快捷操作:

    a += 1;

    a *= 1;

    a -= 1;

    a /= 1;

    a %= 1;        

 

javascript 比较操作符:

    ==    等于

    <        小于

    >        大于

    <=        小于等于

    >=        大于等于

    !=         不等于

 

javascript 逻辑操作符:

    &&    逻辑与

    ||        逻辑或

    !        逻辑非

 

循环分支语句,if else , while , do while , for 与java用法一样

 

javascript 函数,定义函数要用关键字 function:(函数可以带有参数)

   

 function show( ){
        var bea = Array("name" , "age" );
        for( var a = 0; a<bea.length; a++) {
            alert(bea[ a]);
        }
    }

 

在函数中的变量使用 var 就会视为局部变量,如果没有 var 就视为全局变量

 

javascript 可以直接 new 一个对象并且赋值给一个变量

    var a = new e;

 

javascript 内置对话框:

    alert( );            对话框

    confirm( );    确认对话框

 

<html>
 <head>
  <script type="text/javascript">
   function confirmit(){
    if(confirm("are you ok?")){
     document.test.submit();
    }
   }
  </script>
 </head>
 <body>
  <form name="test" action="" method="post" >
  <input type="button" value="delete" οnclick="javascript:confirmit()" name="aaa">
 </body>
</html>


 

form 表单    οnclick="......"事件在点击后发生

 

DOM 的一些内置对象:

    window    当前窗口

        window.onload = function(){  }; //当页面全部加载以后再执行里面的代码

<html>
 <head>
  <script type="text/javascript">
   window.onload = function(){
    alert("hello javascript wolrd!!");
   };
  </script>
 </head>
 <body>
  HELLO
 </body>
</html>


 

    document    当前文档对象

DOM 的一些方法:

    getElementById( id);  //返回一个给定 id 属性值的元素节点相对应对象。

代码:

<html>
 <head>
  <title>
   test
  </title>
 </head>
   <body >
  <h1>hello</h1>
  <ul id="uu">
   <li>aaaaa</li>
   <li>bbbbb</li>
   <li>ccccc</li>
   <li>ddddd</li>
  </ul>
  <script type="text/javascript">
   alert(typeof document.getElementById("uu"));  //typefo:返回对象类型 ; documen:页面本身对象
  </script>
   </body>
</html>


 

    getElementsByTagName( );  //返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。

代码:

 

<html>
 <head>
  <title>
   test
  </title>
 </head>
   <body >
  <h1>hello</h1>
  <ul id="uu">
   <li>aaaaa</li>
   <li>bbbbb</li>
   <li>ccccc</li>
   <li>ddddd</li>
  </ul>
  <script type="text/javascript">
    var a = document.getElementsByTagName("li");
    for(var i=0;i<a.length;i++){  
    alert(typeof a[i]);   //会跳出三个对话框
    }
 </script>
   </body>
</html>

 

    getAttribute( );   //获取属性值。

     代码:

<html>
 <head>
 </head>
 <body>
   <p id="intro" title="tiin">
 Hello World!!
 </p>
 </body>
 <script type="text/javascript">
    var a = document.getElementById("intro");
    var t = a.getAttribute("title");;
     alert(typeof a);
  </script>
</html>


 

 

<html>
 <head>
  <script type="text/javascript">
   function check(){           //定义方法
    if(document.test.t.value==""){  //判断页面对象document 中的 test.t 的值是否是空
     alert("NOT NULL!!");
     return false;     //返回flase
    }
    return true;                 //返回true
   }
  </script>
 </head>
 <body>
  <form name="test" action="" method="post" οnsubmit="return check()">
  <input type="text" name="t">
  <input type="submit" value="ok">
 </body>
</html>


 

form表单    action=""提交后转到哪个页面    method="post"提交方式    onsubmit ="return true(true表示提交,flase表示不提交)"必须完成里面内容才提交成功 

 

<html>
 <head>
  <script type="text/javascript">
   function check(){
    if((test.t.value.length<3)||(test.t.value.length>6)){ //直接获取form的name和input的name
     alert("t {3-6}");
     return false;
    }
 return true;
   }
  </script>
 </head>
 <body>
  <form name="test" action="" method="post" οnsubmit="return check()">
  <input type="text" name="t">
  <input type="submit" value="ok">
 </body>
</html>


 

 

<html>
 <head>
  <script type="text/javascript">
   function check(){
    if((test.t.value.length<3)||(test.t.value.length>6)){
     document.getElementById("usernameErr").innerHTML = "<font color='red'>请输入正确的用户名,用户名长度为3-6位!</font>"; //innerHTML 输出HTML内容标签
  test.t.focus();  //失去焦点
     return false;
    }
 return true;
   }
  </script>
 </head>
 <body>
  <form name="test" action="" method="post" οnsubmit="return check()">
  <input type="text" name="t">
  <input type="submit" value="ok">
 <span id="usernameErr"></span>
 </body>
</html>


 

 

Ajax:

    HMLHttpRequest:

        创建实例:

         

var xhr = new XMLHttpRequest( );

  IE浏览器中创建 ActiveX 对象:

 

 var xhr =new ActiveXObject("Microsoft.XMLHTTP");

检测是否存在 ActiveX:

if( window.ActiveXObject ) {
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
} 


 

    将检测对象打包成可复用函数:

      

  function getHTTPObject( ) {
            var xhr = false;
            if( window.ActiveXObject ) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }else{
                  xhr = new XMLHttpRequest( );   
              }
            return xhr;    
        }

 

        

var request = getHTTPObject( );   //赋给变量,方便调用

完美创建 XMLHttpRequest :

 

 var xhr;
   var myxhr;
 
   function getHttpObject(){
    xhr = false;
    if(window.XMLHttpRequest){
     xhr = new XMLHttpRequest();
     
    }else if(window.ActiveXObject){
     try{
      xhr = new ActiveObject("Msxml12.XMLHTTP");
     
     }catch(e){
      try{
       xhr = new ActiveXObject("Microsoft.XMLHTTP");
       
      }catch(e){
       xhr = false;
       }
      }
     }
     return xhr;
   }

 

创建 XMLHttpRequest 实例后,实现与服务器进行通讯,包含三个关键部分:

   ( 1 )   onreadystatechange 事件处理函数

       

 var myxhr = getHttpObject();
            if( myxhr ) {
                myxhr.onreadystatechange = huidiaohanshu; //一个回调函数,不需要括号
            }

    ( 2 ) open 方法

        open方法必须要有三个参数( 请求类型,服务器上文件的位置,true )

            请求类型 分为:POST,    GET(从服务器检索文件用GET,向服务器发送数据用POST)

            服务器文件位置 URL

            true,表示异步传输

                url = "test.txt";

                myxhr.open( "GET", url, true );

    ( 3 ) send 方法

            请求类型是GET,参数null

                myxhr.send(null);

接收响应:

    readyState 属性表示 Ajax 请求的当前状态。

        0 代表未初始化。还没有调用 open 方法。

        1 代表正在加载。open 方法已经调用,单 send 方法还没有被调用。

        2 代表已经加载完毕。send 方法已经被调用,请求已经开始。

        3 代表交互中。服务器正在发送响应。

        4 代表完成。响应发送完毕。

function displayResponse(myxhr){
         if(myxhr.readyState == 4){
                //加载完成
         }


status 属性表示服务器发送状态。

        404 表示找不到服务器资源。

        403 表示禁止访问。

        500 表示内部服务器出错。

        200 表示一切正常。

     

  function displayResponse(myxhr){
         if( myxhr.readyState == 4 ){
              if( myxhr.status==200 ){
                    //服务器正常
              }  
         }

responseText

        服务器返回字符串,返回时HTML还是XML取决于服务器

 

responseXML

        服务器返回的是XML

 

XML 是一种通用的标记语言,用于对数据进行描述。

XML 属于一种描述性语言,文档结构需要遵循一定的规范,但所用的词语没有任何限制。

    例子代码:

        

<?xml version="1.0" encoding="utf-8" ?>
        <person>
            <name>Joe</name>
            <age>20</age>
            <email>joe@email.com</email>
        </person>

第一行<?xml version="1.0" encoding="utf-8" ?>是XML声明,制定了版本和字符编码。

xml 的标签都是成对出现。

xml 不能进行任何操作,用来储存数据。

 

读取 XML 内容操作:(包含test1.xml,test2.xml,test3,xmldemo.html,)

xmldemo.html 代码:

<html>
 <head>
  <script type="text/javascript" src="xmltest.js"></script>
 </head>
 <body>
  <h1>People</h1>
  <ul>
   <li>
    <a href="test1.xml" οnclick="grabFile(this.href);return false;">Andy</a>
   </li>
   <li>
    <a href="test2.xml" οnclick="grabFile(this.href);return false">Tom</a>
   </li>
   <li>
    <a href="test3.xml" οnclick="grabFile(this.href);return false">Suy</a>
   </li>
  </ul>
  <div id="xxx"></div> 
 </body>
</html>


 

xmltest.js 代码:

var xhr;
var myxhr;
function getHttpObject(){
xhr = false;
if(window.XMLHttpRequest){
 xhr = new XMLHttpRequest();
 }else if(window.ActiveXObject){
 try{
  xhr = new ActiveObject("Msxml12.XMLHTTP");
 }catch(e){ 
  try{
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
   
  }catch(e){
   xhr = false;
   }
  }
 }
 return xhr;
}
 
function grabFile(file){
 myxhr = getHttpObject();
 if(myxhr){
   myxhr.onreadystatechange = function(){
   parseResponse(myxhr);
  }; //指定一个回调函数,处理从服务器返回的结果.
  url = file;
  myxhr.open("GET",url,true); //准备发送,,true表示同步处理
  myxhr.send(null); //发送请求
 }
}
 
function parseResponse(myxhr){
 if(myxhr.readyState == 4){
  if(myxhr.status == 200 || myxhr.status == 304){
   var data = myxhr.responseXML;
   var name = data.getElementsByTagName("name")[0].firstChild.nodeValue
   var website = data.getElementsByTagName("website")[0].firstChild.nodeValue
   var email = data.getElementsByTagName("email")[0].firstChild.nodeValue
   var a= "<font color='red'>"; 
   var b = "</font>";
   document.getElementById("xxx").innerHTML=a+name+"<br/>"+website+"<br/>"+email+b;
   } 
  }
}


 

test1.xml 代码:

<?xml version="1.0" encoding="utf-8" ?> 
<person> 
<name>Andy</name>
<website>www.andy.com</website>
<email>andy@email.com</email>
</person>


 

test2.xml 代码:

<?xml version="1.0" encoding="utf-8" ?> 
<person> 
<name>Tom</name>
<website>www.tom.com</website>
<email>tom@email.com</email>
</person>


 

test3.xml 代码:

<?xml version="1.0" encoding="utf-8" ?> 
<person> 
<name>Suy</name>
<website>www.suy.com</website>
<email>suy@email.com</email>
</person>


 

以上代码要放进服务器里跑(比如:Apache,Tomcat)

 

简单验证名字是否重复(包含test.html 和 test.txt 两个文件):
test.html代码:

<html>
 <head>
  <script type="text/javascript">
   var xhr;
   var myxhr;
   function getHttpObject(){
    xhr = false;
    if(window.XMLHttpRequest){
     xhr = new XMLHttpRequest();
     }else if(window.ActiveXObject){ 
     try{
      xhr = new ActiveObject("Msxml12.XMLHTTP");
     
     }catch(e){
      try{
       xhr = new ActiveXObject("Microsoft.XMLHTTP");
       
      }catch(e){
       xhr = false;
       }
      }
     }
     return xhr;
   }
   function grabFile(file){
    myxhr = getHttpObject(); 
    if(myxhr){
     myxhr.onreadystatechange = function(){
      displayResponse(myxhr);
     };         //指定一个回调函数,处理从服务器返回的结果.
    url = file;
     myxhr.open("GET",url,true);  //准备发送,,true表示同步处理
     myxhr.send(null);  //发送请求
    }
    function displayResponse(myxhr){
     
     if(myxhr.readyState == 4){
    //  alert(myxhr.status);
      if(myxhr.status == 200 || myxhr.status == 304){
      // alert(myxhr.responseText);
       var a = myxhr.responseText;  //从ajax引擎中取出结果
       var b = document.getElementById("ues").value;
       if( a==b){
        //alert("名字重复");
        document.getElementById("xxx").innerHTML = "<font color='red'>重复!</font>";
        }else{
         //alert('名字不重复');
         document.getElementById("xxx").innerHTML = "<font color='red'>不重复!!</font>";
        }
      }
     }
    }
   }
  </script>
  <title> test ajax </title>
 
 
</head>
 <body>
    <form action="" method="post" >
    <input type="text" name="t" id="ues">
    <input type="button" value="ok" οnclick="grabFile('test.txt');">  //选择 button , 使用 submit 会失效
    <span id="xxx"></span>
 </body>
</html>


 

test.txt 内容:

aaa

以上代码放在服务器里跑(比如:Apache,Tomcat)

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页