JQuery學習筆記 [Ajax] (6-1)

1). 傳統的JavaScript方法實現Ajax功能

var objXmlHttp = null; //聲明一個空的XMLHTTP變數

        function CreateXMLHTTP() {

            //根據瀏覽器的不同，返回該變數的實體物件

            if (window.ActiveXObject) {

                objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

            } else {

                if (window.XMLHttpRequest) {

                    objXmlHttp = new XMLHttpRequest();

                }

                else {

                    alert("初始化XMLHTTP錯誤！");

                }

            }

        }

        function GetSendData() {

            document.getElementById("divTip").innerHTML = "<img alt='' title='正在載入中...' src='Images/Loading.gif' />"; //初始化內容

            var strSendUrl = "6-1b.html?date=" + Date(); //設定發送地址變數並賦初始值

            CreateXMLHTTP(); //執行個體化XMLHttpRequest對象

            objXmlHttp.open("GET", strSendUrl, true); //open方法初始化XMLHttpRequest

            objXmlHttp.onreadystatechange = function() { //回調事件函數

                if (objXmlHttp.readyState == 4) { //如果請求完成載入

                    if (objXmlHttp.status == 200) { //如果響應已成功

                        //顯示擷取的資料

                        document.getElementById("divTip").innerHTML = objXmlHttp.responseText;

                    }

                }

            }

            objXmlHttp.send(null); //send發送設定的請求 

        }

6-1b.html:

<div class="clsShow">姓名：陶國榮<br />性別：男<br />郵箱：tao_guo1_rong@163.com</div>

 

2). load()方法實現Ajax功能

$(function() {

            $("#Button1").click(function() { //按鈕點擊事件

                $("#divTip").load("6-1b.html"); //load()方法載入資料

            })

        })

 

3). getJSON函數擷取資料

$(function() {

            $("#Button1").click(function() { //按鈕單擊事件

                //開啟檔案，並通過回呼函數處理擷取的資料

                $.getJSON("UserInfo.json", function(data) {

                    $("#divTip").empty(); //先清空標記中的內容

                    var strHTML = ""; //初始化儲存內容變數

                    $.each(data, function(InfoIndex, Info) { //遍曆擷取的資料

                        strHTML += "姓名：" + Info["name"] + "<br>";

                        strHTML += "性別：" + Info["sex"] + "<br>";

                        strHTML += "郵箱：" + Info["email"] + "<hr>";

                    })

                    $("#divTip").html(strHTML); //顯示處理後的資料

                })

            })

        })

4). getScript函數擷取資料

$(function() {

            $("#Button1").click(function() { //按鈕單擊事件

                //開啟已擷取返回資料的檔案

                $.getScript("UserInfo.js");

            })

        })

UserInfo.js:

var data = [

  {

      "name": "陶國榮",

      "sex": "男",

      "email": "tao_guo_rong@163.com"

  },

  {

      "name": "李建洲",

      "sex": "女",

      "email": "xiaoli@163.com"

  }

];

var strHTML = ""; //初始化儲存內容變數

$.each(data, function() { //遍曆擷取的資料

    strHTML += "姓名：" + this["name"] + "<br>";

    strHTML += "性別：" + this["sex"] + "<br>";

    strHTML += "郵箱：" + this["email"] + "<hr>";

})

$("#divTip").html(strHTML); //顯示處理後的資料

 

5). get實現非同步擷取xml文檔資料

$(function() {

            $("#Button1").click(function() { //按鈕單擊事件

                //開啟檔案，並通過回呼函數處理擷取的資料

                $.get("UserInfo.xml", function(data) {

                    $("#divTip").empty(); //先清空標記中的內容

                    var strHTML = ""; //初始化儲存內容變數

                    $(data).find("User").each(function() { //遍曆擷取的資料

                        var $strUser = $(this);

                        strHTML += "姓名：" + $strUser.find("name").text() + "<br>";

                        strHTML += "性別：" + $strUser.find("sex").text() + "<br>";

                        strHTML += "郵箱：" + $strUser.find("email").text() + "<hr>";

                    })

                    $("#divTip").html(strHTML); //顯示處理後的資料

                })

            })

        })

UserInfo.xml:

<?xml version="1.0" encoding="utf-8" ?>

<Info>

  <User id="1">

    <name>陶國榮</name>

    <sex>男</sex>

    <email>tao_guo_rong@163.com</email>

  </User>

  <User id="2">

    <name>李建洲</name>

    <sex>女</sex>

    <email>xiaoli@163.com</email>

  </User>

</Info>