AJAX技術筆記（自用，來自百戰程序員教程）

時間 2019-12-10

標籤 ajax 自用程序教程欄目 Ajax 简体版

原文原文鏈接

---恢復內容開始---javascript

1.什麼是Ajax

　　Asynchronous javaScript and XML（異步JavaScript和xml），是一種創建交互式網頁應用的網頁開發技術，是瀏覽器端的技術css

　（XML設計用來傳送及攜帶數據信息，不用來表現或展現數據，HTML則用來表現數據，因此XML用途的焦點是它說明數據是什麼，以及攜帶數據信息。）html

　　　　涵蓋：java

　　　　　　基於web標準的XHTML+CSS的表示（XHTML：HTML的規範化，編碼要求與XML相同，每個標籤都要有結束標簽</標籤名>）web

　　　　　　使用DOM進行動態顯示及交互ajax

　　　　　　使用XML和XSLT進行數據交換及相關操做異步

　　　　　　使用XMLHttpRequest進行異步數據查詢、檢索jsp

　　　　　　使用JavaScript將全部的東西綁定在一塊兒async

　　　　知識補充：ui

　　　　　　傳統頁面發起請求的三種方式

　　　　　　　　一、form表單

　　　　　　　　二、<a>標籤

　　　　　　　　三、js中的window.location.host()

　　　　　　　　三種方式都會改地址欄的信息

　　　　　　Ajax則是通過引擎對象XMLHttpRequest來向服務器發請求

2.為什麼須要Ajax

　　需求：

　　　　有時候我們須要將本次的相應結果和前面的相應結果內容在同一個頁面中展現給用戶

　　解決：

　　　　一、在後臺服務器端將屢次響應內容從新拼接成一個jsp頁面，響應

　　　　　　可是這樣會趙成不少響應內容被重複的響應，資源浪費

　　　　二、使用Ajax

3.使用Ajax

　　3.1. 使用Ajax訪問原理

　　3.2. Ajax的基本使用流程

　　　　一、創建ajax引擎對象

　　　　　　var ajax = new XMLHttpRequest(); //在此以前最好作一下瀏覽器兼容處理，具體以下面的示例代碼

　　　　二、複寫onreadystatechange函數（監聽函數）

　　　　　　ajax.onreadystatechange = function(){ 方法體，每次readystate響應狀態碼發生改變就觸發執行方法體 }

　　　　三、發送請求

　　　　　　ajax.open(method, URI, async); async：true（異步）或 false（同步）

　　　　　　ajax.send(String); string：僅用於 POST 請求

　　3.3. Ajax的狀態碼

　　3.4. Ajax的請求

　　3.5 Ajax的異步和同步

　　3.6. Ajax的響應數據類型

　　3.7. Ajax的封裝

　　3.8. 示例

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'firstTest.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript">
        function getDate(){
            //創建ajax引擎對象
                var ajax;
                //兼容器處理，高版本ie已支持火狐寫法
                if(window.XMLHttpRequest){//火狐
                    ajax = new XMLHttpRequest();
                } else if(window.ActiveXObject){//ie7一下
                    ajax = new ActiveXObject("Msxml2.XMLHTTP");
                }
            //複寫onreadystatement函數(監聽函數)
                ajax.onreadystatechange = function(){
                    //判斷Ajax狀態碼,readystate==4時為數據接收成功,數據來的時候才響應
                    if(readystate == 4){
                        //獲取元素對象
                            var showdiv = document.getElementById("showdiv");
                        //判斷響應狀態碼
                        if(ajax.status == 200){
                            //獲取響應內容
                            var result = ajax.responseText;
                            //顯示
                            showdiv.innerHTML = result;
                        } else if(ajax.status == 404){
                            showdiv.innerHTML = "請求資源不存在";
                        } else if(ajax.status == 500) {
                            showdiv.innerHTML = "服務器繁忙";
                        }
                    }
                }
            //發送請求
                ajax.open("get", "ajax");
                //send的參數火狐要，ie無所謂
                ajax.send(null);
            //獲取元素對象
            var showdiv = document.getElementById("showdiv");
            //修改元素內容
            
        }
    </script>
    <style type="text/css">
        #showdiv{
            border:1px solid pink;
            height: 200px;
            width: 300px;
        }
    </style>
  </head>
  
  <body>
    <input type="button" value="測試" onclick="getDate()"/>
    <div id="showdiv">
        
    </div>
  </body>
</html>

---恢復內容結束---

1.什麼是Ajax

　　Asynchronous javaScript and XML（異步JavaScript和xml），是一種創建交互式網頁應用的網頁開發技術，是瀏覽器端的技術

　（XML設計用來傳送及攜帶數據信息，不用來表現或展現數據，HTML則用來表現數據，因此XML用途的焦點是它說明數據是什麼，以及攜帶數據信息。）

　　　　涵蓋：

　　　　　　基於web標準的XHTML+CSS的表示（XHTML：HTML的規範化，編碼要求與XML相同，每個標籤都要有結束標簽</標籤名>）

　　　　　　使用DOM進行動態顯示及交互

　　　　　　使用XML和XSLT進行數據交換及相關操做

　　　　　　使用XMLHttpRequest進行異步數據查詢、檢索

　　　　　　使用JavaScript將全部的東西綁定在一塊兒

　　　　知識補充：