《黑馬程序員_超全面的JavaWeb視頻教程vedio\JavaWeb視頻教程_day23_ajax》

\JavaWeb視頻教程_day23_ajax\day23ajax_avi\14.打包ajax生成小工具.avi; 有介紹；

個人理解：就是封裝了 XMLHttpRequest 的請求方法；演變而成我們常用的 ajax；

=====原始的請求方式：

ajax發送異步請求（四步操作）

1. 第一步（得到XMLHttpRequest）
  * ajax其實只需要學習一個對象：XMLHttpRequest，如果掌握了它，就掌握了ajax！！！
  * 得到XMLHttpRequest
    
 
> 大多數瀏覽器都支持：var xmlHttp = new XMLHttpRequest();
    > IE6.0：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    > IE5.5以更早版本的IE：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

  * 編寫創建XMLHttpRequest對象的函數
  function createXMLHttpRequest() {
      try {
          return new XMLHttpRequest();
      } 
 
catch(e) {
          try {
          return new ActiveXObject("Msxml2.XMLHTTP");
      } catch(e) {
          try {
              return new ActiveXObject("Microsoft.XMLHTTP");
          } catch(e) {
              alert("哥們兒，你用的是什麽瀏覽器啊？");
              throw e;
          }
      }
      }
  }

 
2. 第二步（打開與服務器的連接）
  * xmlHttp.open()：用來打開與服務器的連接，它需要三個參數：
    > 請求方式：可以是GET或POST
    > 請求的URL：指定服務器端資源，例如；/day23_1/AServlet
    > 請求是否為異步：如果為true表示發送異步請求，否則同步請求！
  * xmlHttp.open("GET", "/day23_1/AServlet", true);

3. 第三步（發送請求）
  * xmlHttp.send(null)：如果不給可能會造成部份瀏覽器無法發送！
    > 參數：就是請求體內容！如果是GET請求，必須給出null。

4. 第四步（）
  * 在xmlHttp對象的一個事件上註冊監聽器：onreadystatechange
  * xmlHttp對象一共有5個狀態：
    > 0狀態：剛創建，還沒有調用open()方法; 
    > 1狀態：請求開始：調用了open()方法，但還沒有調用send()方法
    > 2狀態：調用完了send()方法了；
    > 3狀態：服務器已經開始響應，但不表示響應結束了！
    > 4狀態：服務器響應結束！（通常我們只關心這個狀態！！！）
  * 得到xmlHttp對象的狀態：
    > var state = xmlHttp.readyState;//可能是0、1、2、3、4
  * 得到服務器響應的狀態碼
    > var status = xmlHttp.status;//例如為200、404、500
  * 得到服務器響應的內容1
    > var content = xmlHttp.responseText;//得到服務器的響應的文本格式的內容
    > var content = xmlHttp.responseXML;//得到服務器的響應的xml響應的內容，它是Document對象了！

  xmlHttp.onreadystatechange = function() {//xmlHttp的5種狀態都會調用本方法
      if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//雙重判斷：判斷是否為4狀態，而且還要判斷是否為200
          // 獲取服務器的響應內容
      var text = xmlHttp.responseText;
      }
  };

==========================================
==========================================

第二例：發送POST請求(如果發送請求時需要帶有參數，一般都用POST請求)

* open：xmlHttp.open("POST" ....);
* 添加一步：設置Content-Type請求頭：
  > xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
* send：xmlHttp.send("username=zhangSan&password=123");//發送請求時指定請求體

==老師封裝的js--- ajaxutils.js

// 創建request對象
function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();//大多數瀏覽器
    } catch (e) {
        try {
            return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
        } catch (e) {
            try {
                return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本    
            } catch (e) {
                alert("哥們兒，您用的是什麽瀏覽器啊？");
                throw e;
            }
        }
    }
}
/*
 * option對象有如下屬性
 */
         /*請求方式*/method, 
        /*請求的url*/ url, 
        /*是否異步*/asyn, 
        /*請求體*/params, 
        /*回調方法*/callback,
        /*服務器響應數據轉換成什麽類型*/type

function ajax(option) {
    /*
     * 1. 得到xmlHttp
     */
    var xmlHttp = createXMLHttpRequest();
    /*
     * 2. 打開連接
     */
    if(!option.method) {//默認為GET請求
        option.method = "GET";
    }
    if(option.asyn == undefined) {//默認為異步處理
        option.asyn = true;
    }
    xmlHttp.open(option.method, option.url, option.asyn);
    /*
     * 3. 判斷是否為POST
     */
    if("POST" == option.method) {
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    /*
     * 4. 發送請求
     */
    xmlHttp.send(option.params);
    
    /*
     * 5. 註冊監聽
     */
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//雙重判斷
            var data;
            // 獲取服務器的響應數據，進行轉換！
            if(!option.type) {//如果type沒有賦值，那麽默認為文本
                data = xmlHttp.responseText;
            } else if(option.type == "xml") {
                data = xmlHttp.responseXML;
            } else if(option.type == "text") {
                data = xmlHttp.responseText;
            } else if(option.type == "json") {
                var text = xmlHttp.responseText;
                data = eval("(" + text + ")");
            }
            
            // 調用回調方法
            option.callback(data);
        }
    };
};

在jsp中調用它：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP ‘json3.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" src="<c:url value=‘/ajax-lib/ajaxutils.js‘/>"></script>  //引用

<script type="text/javascript">
window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
        /*
        1. ajax
        */
        ajax(
            {
                url:"<c:url value=‘/AServlet‘/>",
                type:"json",
                callback:function(data) {
                    document.getElementById("h3").innerHTML = data.name + ", " + data.age + ", " + data.sex;
                }
            }
        );
    };
};
</script>
  </head>
  
  <body>
<%-- 點擊按鈕後，把服務器響應的數據顯示到h3元素中 --%>
<button id="btn">點擊這裏</button>
<h1>顯示自己封裝的ajax小工具</h1>
<h3 id="h3"></h3>
  </body>
</html

======而現在標準的用法：

$(function(){
    $(‘#send‘).click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $(‘#resText‘).empty();   //清空resText裏面的所有內容
                         var html = ‘‘;
                         $.each(data, function(commentIndex, comment){
                               html += ‘<div class="comment"><h6>‘ + comment[‘username‘]
                                         + ‘:</h6><p class="para"‘ + comment[‘content‘]
                                         + ‘</p></div>‘;
                         });
                         $(‘#resText‘).html(html);
                      }
         });
    });
});

===個人理解：其實就是調用了一個方法，方法裏面填了參數而已（參數有一般類型 和 對象類型，方法類型）

AJAX的來龍去脈（由來）-如果被封裝出來的--ajax發送異步請求（四步操作）