JavaScript，Ajax基礎

時間 2020-12-27

標籤 ajax 欄目 JavaScript 简体版

原文原文鏈接

轉載自這篇文章

JavaScript，Ajax基礎

一）什麼是JavaScript【以下簡稱JS】

JS是腳本語言

（1）基於對象

JS本身就有一些現成的對象可供程序員使用，例如：Array，Math，String。。。

JS並不排除你可以自已按一定的規則創建對象

（2）事件驅動

JS代碼寫好後，需要外界觸發後，方可運行，例如：單擊事件，定時執行，。。。

（3）解釋性

每次運行JS代碼時，得需要將原代碼一行一行的解釋執行

相對編譯型語言（例如：Java、C++）執行速度相對較慢

（4）基於瀏覽器的動態交互網頁技術

如果JS嵌入到HTML中，可以不需要服務器支持，直接由瀏覽器解釋執行

如果JS嵌入到JSP或Servlet中，必需要服務器支持，直接由瀏覽器解釋執行

（5）嵌入在HTML標籤中

JS必須嵌入到一個名叫<script src="引入外部js文件"></script>的標籤中，方可運行

注意：多個script塊中的變量可以相互訪問。

二）JS中的三種類型

（1）基本類型：number，string，boolean

number包含正數，負數，小數

string由''或""定界

boolean由true或false，但js中的boolean也包含更多情況，例如：存在表示true，不存在表示false

        var num = 100;  //num爲number類型
        var str = "哈哈";//str爲string類型
        var flag = false;//flag爲boolean類型
        window.alert(num);
        window.alert(str);
        window.alert(flag);

（2）特殊類型：null，undefined

null表示一個變量指向null

undefined表示一個變量指向的值不確定

        var array = null;
        var student;  聲明瞭，但是還沒有賦值，爲undefined
        alert(array);
        alert(student);
        if(student==undefined){  //判斷是否爲undefined

        }

（3）複合類型：函數，對象，數組

對象包含內置對象和自定義的對象

三）JS中有三種定義函數的方式參看JScript.chm文檔

（1）正常方式：function mysum(num1,num2){return num1+num2;}

        function mysum(num1,num2){
            return num1 + num2;
        }
        var myresult = mysum(100,200);
        alert("myresult="+myresult);

（2）構造器方式：new Function("num1","num2","return num1+num2;")

        var youresult = new Function("num1","num2","return num1+num2");
        alert( youresult(1000,2000) );

（3）直接量或匿名或無名方式：var mysum = function(num1,num2){return num1+num2;}

 var theyresult = function(num1,num2){ return num1 + num2; }
        alert( theyresult(10000,20000) );

四）JS中有四種對象

（1）內置對象：Date，Math，String，Array，。。。

        var str = new Date().toLocaleString();
        window.document.write("<font size='44' color='red'>"+str+"</font>");

<script type="text/javascript">
        
        //Date
        //var nowStr = new Date().toLocaleString();
        //window.document.write(nowStr + "<br/>");    
        
        
        //Math
        //for(var i=1;i<=10;i++){
        //    //1到9之間的隨機整數
        //    document.write(Math.floor(Math.random()*9)+1 + "<br/>");
        //}
        
        
        //string
        //var str = "Hello你好";JAVASCRIPT採用Unicode編碼
        //var size = str.length; 
        //alert(size);//7
        
        
        //Array
        //var array = new Array("語文","數學","英語",true,123);
        //for(var i=0;i<array.length;i++){
        //    document.write(array[i] + "   ");
        //}
        
    </script>

（2）自定義對象：Person，Card，。。。

       function Student(id,name,sal){
            //this指向s引用
            this.id = id;
            this.name = name;
            this.sal = sal;
        }
        var s = new Student(1,"波波",7000);
        document.write("編號:" + s.id + "<br/>");
        document.write("姓名:" + s.name + "<br/>");
        document.write("薪水:" + s.sal + "<br/>");

（3）瀏覽器對象： window，document，status，location，history。。。

        function myrefresh(){
            window.history.go(0);
        }

<script type="text/javascript">
        //window對象，打開新窗口
        //var url = "04_images.html";
        //window.open(url);            
    </script>
    
    <script type="text/javascript">
        //status對象，將當前時間設置到狀態欄中 即瀏覽器的下邊沿
        //var nowStr = new Date().toLocaleString();
        //window.status = nowStr;
    </script>
    
    <script type="text/javascript">
        //location對象，模擬用戶在地址欄輸入url訪問其它頁面的情況
        //var url = "04_images.html";
        //window.location.href = url;
    </script>
    
    <script type="text/javascript">
        //history對象，演示刷新
        window.history.go(0); 1 -1 表示前進，後退，0表示刷新 瀏覽器不停刷新，會有個圈圈在轉。 </script>

（4）ActiveX對象：ActiveXObject("Microsoft.XMLHTTP")，。。。

五）演示JS對象的屬性，方法和事件的使用

（1）window.location.href

            var url = "04_array.html";
            window.location.href = url;

（2）form.submit() 實現表單提交的功能

    <form action="/js-day01/04_array.html" method="POST">
        <input type="button" value="提交到服務端" onclick="doSubmit()"/>
    </form>

    <script type="text/javascript">
        function doSubmit(){
            //表單提交
            document.forms[0].submit();
        }
    </script>

<body>
    
    <form action="04_images.html" method="POST">
        <input type="button" value="提交"/>
    </form>    
    
    <!-- 演示用JS提交表單，重要 -->
    <script type="text/javascript">
        //定位提交按鈕
        var inputElement = document.getElementsByTagName("input")[0];
        //爲提交按鈕添加單擊事件
        inputElement.onclick = function(){
                                        //定位<form>標籤，forms表示document對象中所有表單的集合，通過下標引用不同的表單，從0開始
                                        var formElement = document.forms[0];
                                        //提交表單，提交到action屬性指定的地方
                                        formElement.submit();
                               }
    
        
    </script>
    
  </body>

（3）inputElement.onblur = 函數

（4）document.createElement(「img」)

（5）imgElement.style.width/height

六）回顧傳統Web應用請求和響應特點【顯示當前時間】

（1）請求：瀏覽器以HTTP協議的方式提交請求到服務器

（2）響應：服務器以HTTP協議的方式響應內容到瀏覽器

注意：HTTP是WEB大衆化非安全協議

HTTPS是WEB安全協議，是基於HTTP協議的，且加了一些加密等特殊功能，常用於在線支付，或者是需要安全性較高的網站中，例如：12306網站

HTTP請求有三個部份組成：請求行，請求頭，請求體

HTTP響應有三個部份組成：響應行，響應頭，響應體

（3）狀態欄：有明顯的進度條刷新現象，如果服務器響應較慢的話，進度條刷新也會變慢，IE9等中高版本瀏覽器，有明顯轉圈圈圖標

（4）歷史欄：會收集原來已訪問過的web頁面，進行緩存可以前進，後退

（5）缺點：不需變化的大量數據，也全部刷新，造成瀏覽器加載和處理負擔

（6）可改進的地方：讓不需變化的大量數據，原封不動，不用緩存到歷史欄中，無需全部刷新，只刷新某些需要變化的數據區域，例如：當前時間的區域

傳統方式獲取時間

jsp頁面：

    
   當前時間:<span>${requestScope.str}</span><br/>
    <input type="button" value="同步方式提交"/>
        
    <script type="text/javascript">
        //定位button按鈕，同時添加單擊事件
        document.getElementsByTagName("input")[0].onclick = function(){
            var url = "${pageContext.request.contextPath}/TimeServlet?id="+new Date().getTime();
            window.location.href = url;    
        }
    </script>

public class TimeServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        System.out.println("TimeServlet::doGet");
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String str = sdf.format(new Date());
        request.setAttribute("str",str);
        request.getRequestDispatcher("/06_time.jsp").forward(request,response);
    }
}

七）什麼是AJAX【Asynchronous異步的JS和XML】，工作原理與特點

（1）什麼是同步：

請求1->響應1->請求2->響應2->

Web1.0時代

（2）什麼是異步：

請求1->請求2->請求3->響應1->響應2->響應3->

請求1->響應1->請求2->請求3->響應2->響應3->

Web2.0時代

項目中：Web1.0爲主（整個瀏覽器刷新），Web2.0爲輔（瀏覽器局部刷新）

（3）什麼是AJAX

客戶端（特指PC瀏覽器）與服務器，可以在【不必刷新整個瀏覽器】的情況下，與服務器進行異步通訊的技術

即，AJAX是一個【局部刷新】的【異步】通訊技術

AJAX不是全新的語言，是2005年Google公司推出的一種全新【編程模式】，不是新的編程語言

（4）不用刷新整個頁面便可與服務器通訊的辦法有：

（A）Flash/ActionScript

（B）框架Frameset

（C）iFrame（內嵌入框架)

（D）XMLHttpRequest(非IE瀏覽器)和ActiveXObject(IE瀏覽器)

背景：早上IE5時，微軟就開發出了第一個異步通訊對象，叫ActiveXObject對象，

Firefox等其它瀏覽器廠商也慢慢引入異步通訊對象，叫XMLHttpRequest對象，

IE的高版本，也將這個異步對象取名叫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>>

（6）AJAX包含的技術

參見<<AJAX包含的技術.JPG>>

（7）AJAX開發步驟

步一：創建AJAX異步對象，例如：createAJAX()

步二：準備發送異步請求，例如：ajax.open(method,url)

步三：如果是POST請求的話，一定要設置AJAX請求頭，例如：ajax.setRequestHeader()

如果是GET請求的話，無需設置設置AJAX請求頭

步四：真正發送請求體中的數據到服務器，例如：ajax.send()

步五：AJAX不斷的監聽服務端響應的狀態變化，例如：ajax.onreadystatechange，後面寫一個無名處理函數

步六：在無名處理函數中，獲取AJAX的數據後，按照DOM規則，用JS語言來操作Web頁面

（8）AJAX適合用在什麼地方

AJAX【適合】不用來傳遞大量數據，而只用來【傳遞少量數據】，在用戶的【體驗】上，【更加人性化】

AJAX是一個和服務器無關的技術，即服務器可使用：JavaEE，.NET，PHP，。。。這些技術都可

AJAX只管向服務器發送請求，同時只管接收服務器的HTML或XML或JSON載體響應

服務端不能使用轉發或重定向到web頁面，因爲這樣會起瀏覽器全面刷新

即只能以流的方式響應給瀏覽器

AJAX開發步驟

步一：創建AJAX異步對象，例如：createAJAX()

步二：準備發送異步請求，例如：ajax.open(method,url)

步三：如果是POST請求的話，一定要設置AJAX請求頭，例如：ajax.setRequestHeader()

如果是GET請求的話，無需設置設置AJAX請求頭

步四：真正發送請求體中的數據到服務器，例如：ajax.send()

步五：AJAX不斷的監聽服務端響應的狀態變化，例如：ajax.onreadystatechange，後面寫一個無名處理函數

步六：在無名處理函數中，獲取AJAX的數據後，按照DOM規則，用JS語言來操作Web頁面（通過io流輸出數據，而不是轉發和重定向了）

八）AJAX應用

（1）無需刷新整個Web頁面顯示服務器響應的當前時間（text/html;charset=UTF-8）

jsp頁面：

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>無需刷新整個Web頁面顯示服務器響應的當前時間</title>
  </head>
  <body>
    
    當前時間：<span id="time"></span><br/>
    <input id="buttonID" type="button" value="獲取當前時間"/><p/>
    
    
    <script type="text/javascript">
        //創建AJAX異步對象
        function createAJAX(){
            var ajax = null;
            try{
                //如果IE5~IE12的話  
                ajax = new ActiveXObject("microsoft.xmlhttp");
            }catch(e1){
                try{
                    //如果是非IE的話
                    ajax = new XMLHttpRequest();
                }catch(e2){
                    alert("你的瀏覽器中不支持異步對象，請換瀏覽器");
                }
            }
            return ajax;
        }
    </script>

    <script type="text/javascript">
        document.getElementById("buttonID").onclick = function(){
            //NO1)創建AJAX異步對象
            var ajax = createAJAX(); //NO2)準備發送請求
            var method = "GET";
            var url = "${pageContext.request.contextPath}/AjaxTimeServlet?time=" + new Date().getTime();//如果不加時間，ie瀏覽器會認爲url沒變化，不再向服務器發請求，firefox是會發請求的。所以爲了兼容性，一般會加時間，每次都發送請求。
            ajax.open(method,url);
            //NO3)真正發送請求體的數據到服務器，如果請求體中無數據的話，就用null表示
            ajax.send(null);
            
            //-------------------------------------------------------------等待
        
            //NO4)AJAX異步對象不斷監聽服務器響應的狀態0-1-2-3-【4】
            //一定要狀態變化後，纔可觸發function(){}函數
            //如果狀態永遠是4-4-4-4-4，是不會觸發function(){}函數的
            ajax.onreadystatechange = function(){ //如果狀態碼爲4的話
                if(ajax.readyState == 4){
                    //如果響應碼爲200的話
                    if(ajax.status == 200){
                        //NO5)從AJAX異步對象中獲取服務器響應的HTML數據（怎麼知道服務端發送過來的是html數據呢，可以在服務端設置，參見下面的服務端代碼）
                        var nowStr = ajax.responseText;
                        
                        //NO6)將結果按照DOM規則，動態添加到web頁面指定的標籤中
                        var spanElement = document.getElementById("time");
                        spanElement.innerHTML = nowStr;
                    }
                }
            } 
            
        }
    </script>
    靜態文本靜態文本靜態文本靜態文本靜態文本靜態文本靜態文本靜態文本靜態文本<br/>
  </body>
</html>

public class TimeServletAjax extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String str = sdf.format(new Date());
        //注意：在Web2.0時代，即異步方式下，不能用轉發或重定向
        //因爲：轉發或重定向會引起瀏覽器全部刷新，而不是局部刷新
        //所以得用以輸出流的方式將服務器的結果輸出給異步對象，然後輸出到瀏覽器
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(str);
        pw.flush();
        pw.close();
    }
}

（2）基於HTML，以GET或POST方式，檢查註冊用戶名是否在數據庫中已存在（text/html;charset=UTF-8）

Get方式

<%@ 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); 注意：get方式中，參數有中文要用encodeuri編碼，post方式要設置請求頭。 //NO1)
                var ajax = createAJAX();
                //NO2)
                var method = "GET";
                var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username;
                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>

package cn.itcast.javaee.js.user;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 基於HTML，以GET或POST方式，檢查註冊用戶名是否在數據庫中已存在 
 * @author AdminTC
 */
public class UserServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        String username = request.getParameter("username");
        byte[] buf = username.getBytes("ISO8859-1"); username = new String(buf,"UTF-8");
        System.out.println("username=" + username);
        String tip = "<font color='green'>可以註冊</font>";
        if("傑克".equals(username)){
            tip = "<font color='red'>該用戶已存在</font>";
        }
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(tip);
        pw.flush();
        pw.close();
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");
        System.out.println("username=" + username);
        
        String tip = "images/MsgSent.gif";
        if("傑克".equals(username)){
            tip = "images/MsgError.gif";
        }
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(tip);
        pw.flush();
        pw.close();
    }
}

POST方式：注意：ajax默認的請求方式是get，爲post方式時，必須設置請求頭，否則會錯誤，

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基於HTML，以GET或POST方式，檢查註冊用戶名是否在數據庫中已存在</title>
    <!-- 引入外部js文本 -->
    <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>
    
    
    用戶名[POST]：<input id="usernameID" type="text" maxlength="4"/>
    <span id="resID">
        <!-- 
        <img src="tip變量" width="12px" height="12px"/>
        -->
    </span>
    
    
    <hr/>

    
    <script type="text/javascript">
        document.getElementById("usernameID").onblur = function(){
            var username = this.value;//傑克
            //NO1)
            var ajax = createAJAX();
            //NO2)
            var method = "POST";
            var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
            ajax.open(method,url);
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基於HTML，以GET或POST方式，檢查註冊用戶名是否在數據庫中已存在</title>
    <!-- 引入外部js文本 -->
    <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>
    
    
    用戶名[POST]：<input id="usernameID" type="text" maxlength="4"/>
    <span id="resID">
        <!-- 
        <img src="tip變量" width="12px" height="12px"/>
        -->
    </span>
    
    
    <hr/>

    
    <script type="text/javascript">
        document.getElementById("usernameID").onblur = function(){
            var username = this.value;//傑克
            //NO1)
            var ajax = createAJAX();
            //NO2)
            var method = "POST";
            var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
            ajax.open(method,url);
            //注意：ajax默認的請求方式是get，爲post方式時，必須設置如下請求頭，否則會錯誤，設置AJAX請求頭爲POST，他會將請求體中的漢字自動進行UTF-8的編碼
 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); 固定的寫法，post請求時必須寫，且必須放在open與send之間。 //NO3)
            var content = "username=" + username;
            ajax.send(content);
            
            
            //===========================================等待
            
            
            //NO4)
            ajax.onreadystatechange = function(){
                if(ajax.readyState == 4){
                    if(ajax.status == 200){
                        //NO5)
                        var src="js/ajax.js"></script>
  </head>
  <body>
    
    
    用戶名[POST]：<input id="usernameID" type="text" maxlength="4"/>
    <span id="resID">
        <!-- 
        <img src="tip變量" width="12px" height="12px"/>
        -->
    </span>
    
    
    <hr/>

    
    <script type="text/javascript">
        document.getElementById("usernameID").onblur = function(){
            var username = this.value;//傑克
            //NO1)
            var ajax = createAJAX();
            //NO2)
            var method = "POST";
            var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
            ajax.open(method,url);
            //注意：ajax默認的請求方式是get，爲post方式時，必須設置如下請求頭，否則會錯誤，設置AJAX請求頭爲POST，他會將請求體中的漢字自動進行UTF-8的編碼
 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); 固定的寫法，post請求時必須寫，且必須放在open與send之間。 //NO3)
            var content = "username=" + username;
            ajax.send(content);
            
            
            //===========================================等待
            
            
            //NO4)
            ajax.onreadystatechange = function(){
                if(ajax.readyState == 4){
                    if(ajax.status == 200){
                        //NO5)
                        var tip = ajax.responseText;
                    
                        //NO4)
            ajax.onreadystatechange = function(){
                if(ajax.readyState == 4){
                    if

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。