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

---恢复内容开始---

1.什麼是Ajax

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

　（XML设计用来传送及携带数据信息，不用来表现或展示数据，HTML则用来表现数据，所以XML用途的焦点是它说明数据是什么，以及携带数据信息。）

　　　　涵蓋：

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

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

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

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

　　　　　　使用JavaScript將所有的東西綁定在一起

　　　　知識補充：

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

　　　　　　　　1、form表單

　　　　　　　　2、<a>標籤

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

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

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

2.為什麼需要Ajax

　　需求：

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

　　解決：

　　　　1、在後台服務器端將多次響應內容重新拼接成一個jsp頁面，響應

　　　　　　但是這樣會趙成很多響應內容被重複的響應，資源浪費

　　　　2、使用Ajax

3.使用Ajax

　　3.1. 使用Ajax訪問原理

　　3.2. Ajax的基本使用流程

　　　　1、創建ajax引擎對象

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

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

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

　　　　3、發送請求

　　　　　　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>

---恢复内容结束---