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

Bertha 。 2022-08-24 11:30 169阅读 0赞

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

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");
    }

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

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

完美创建 XMLHttpRequest :

创建 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）