javascript之Ajax

本文轉載自查看原文 2018-10-09 19:13 1717 jQuery語言

一、load() 加載頁面數據

　　load(url,[data],[callback])　　url:加載的頁面地址,[data]傳送的數據，[callback]加載完成時回調函數。

　　設計一個load.html代碼如下：

1 <body>
2 　　　　<div id="div1">
3 　　　　　　我是div1
4 　　　　</div>
5 　　　　<div id="div2">
6 　　　　　　我是div2
7 　　　　</div>
8 　　</body>

　　$("div1").load("load.html");　　//將load.html頁面的內容顯示在id=div1的div元素內

　　加載完成后，由於是AJAX所以頁面代碼不改變，但是頁面變為

　　另外‘：url：參數還可以用於篩選要加載頁面中的某部分內容

　　$("div1").load("load.html #div1");

　　加載完成后的效果為：

　　可以看到，篩選出了div上的id="div1"的元素內容。

二、getjson() 獲取json文件

語法：getJson(url,[data],[callback])　　

　　設計一個json文件UserInfo.json如下：

　　[
　　　　{
　　　　　　"name":"劉德華",
　　　　　　"sex":"男",
　　　　　　"email":"liudehua@qq.com"
　　　　},
　　　　{
　　　　　　"name":"張學友",
　　　　　　"sex":"男",
　　　　　　"email":"zhangxueyou@qq.com"
　　　　}
　　]

　　$(function(){

　　　　$.getJson("/UserInfo.json",function(){

　　　　　　$("#div1").empty();

　　　　　　var strHtml = "";

　　　　　　$.each(data,function(InfoIndex,info){

　　　　　　　　strHtml += "姓名:" + Info["name"] + "<br>";

　　　　　　　　strHtml += "性別:" + Info["name"] + "<br>";

　　　　　　　　strHtml += "郵箱:" + Info["name"] + "<br>";

　　　　　　})

　　　　　　$("#div1").html(strHtml);

　　　　})

三、$.getstricp() 獲取js文件

語法: $.getScript(url,[callback])　　獲取js腳本，通過全局函數$.getScript()獲取到的腳本會自動執行。

　　新建一個js文件，命名userinfo.js

var data = [
    {
        "name": "劉德華",
        "sex": "男",
        "email": "liudehua@qq.com"
    },
    {
        "name": "張學友",
        "sex": "男",
        "email": "zhangxueyou@qq.com"
    }
];
var strHtml = "";
$.each(data, function () {
    strHtml += "姓名:" + this["name"] + "<br/>";
    strHtml += "性別:" + this["sex"] + "<br/>";
    strHtml += "郵箱:" + this["email"] + "<hr/>";
})
$("#div1").html(strHtml);

　　頁面代碼：

　　$(function(){
　　　　$.getScript("userinfo.js",function(){
　　　　　　alert("js腳本加載完成!");
　　　　})
　　})
　　<div id="div1">
　　　
　　</div>

　　執行結果:

四、$.get 請求數據

　語法：$.get(url,[data],[callback],[type])　　url:等待加載的數據地址,[data]發送到服務器的數據,key/value形式,[callback]加載成功時執行的回調函數,[type]表示返回數據的個數。

　　1、$.get()　　異步請求xml文件。

　　新建一個xml文件：

<?xml version="1.0" encoding="utf-8" ?> 
<Info>
  <User id="1">
    <name>劉德華</name>
    <sex>男</sex>
    <email>liudehua@qq.com</email>
  </User>
  <User id="2">
    <name>張學友</name>
    <sex>男</sex>
    <email>zhangxueyou@qq.com</email>
  </User>
 </Info>

　　頁面代碼：

    $(function () {
        $.get("UserInfo.xml", function (data) {
            $("#div1").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/>";
            })
            $("#div1").html(strHtml);
        })
    })

　HTML：　
  <div id="div1">

　　</div>

　　執行結果：

　　2.$.get()　　請求服務器數據

　　　　新建一個aspx文件，userinfo.aspx.cs內容

        protected void Page_Load(object sender, EventArgs e)
        {
            string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);
            string strHtml = "<div class='div1'>";
            if (strName == "劉德華")
            {
                strHtml += "姓名:劉德華<br/>";
                strHtml += "性別:男<br/>";
                strHtml += "郵箱:liudehua@qq.com<hr/>";
            }
            else if (strName == "張學友")
            {
                strHtml += "姓名:張學友<br/>";
                strHtml += "性別:男<br/>";
                strHtml += "郵箱:zhangxueyou@qq.com<hr/>";
            }
            strHtml += "</div>";
            Response.Write(strHtml);
        }

　　　　頁面代碼：

        $(function () {
            $.get("UserInfo.aspx", {name:encodeURI("張學友")}, function (data) {
                $("#div1").empty().html(data);
            })
        })

五、$.post()　　$.post()與$.get()沒有本質上的區別，不容的是$.get()不適合傳遞數據量較大的數據。

　　語法：$.post(url,[data],[callback],[type])　　url:等待加載的數據地址,[data]發送到服務器的數據,key/value形式,[callback]加載成功時執行的回調函數,[type]表示返回數據的個數。

　　新建一個userinfo.aspx文件，其中userinfo.aspx.cs代碼為：

        protected void Page_Load(object sender, EventArgs e)
        {
            string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);
            string strSex = System.Web.HttpUtility.UrlDecode(Request["sex"]);

            string strHtml = "";
            if (strName == "劉德華" && strSex == "男")
            {
                strHtml += "姓名:劉德華<br/>";
                strHtml += "性別:男<br/>";
                strHtml += "郵箱:liudehua@qq.com<hr/>";
            }
            else if (strName == "張學友" && strSex == "男")
            {
                strHtml += "姓名:張學友<br/>";
                strHtml += "性別:男<br/>";
                strHtml += "郵箱:zhangxueyou@qq.com<hr/>";
            }
            Response.Write(strHtml);
        }

　　　頁面代碼：

        $(function () {
            $.post("UserInfo.aspx", {name:encodeURI("劉德華"),sex:encodeURI("男")}, function (data) {
                $("#div1").empty().html(data);
            })
        })
　　　　 Html：
 　　　　<div id="div1">

</div>

六、$.ajax()　　最底層的jQuery AJAX函數

　　語法：$.ajax([options])　　其中[options]為可選參數，對應的意思參見下表。

　　參數名　　　　　　　　類型　　　　　　　　　　　描述　　　　

　　 url　　　　　　　　 String　　　　　　　　發送請求的地址

　 type　　　　　　　　 String　　　　　　　　數據請求方式(post或get),默認為get

　　data　　　　　　　　 String　　　　　　　發送到服務器上的數據，如果不是字符串格式則自動轉為i字符串格式，get方法則附在html請求地址后面。

　　dataType　　　　　　String　　　　　　　服務器返回的數據類型，如果不指定，jQuery自動根據HTTP包判斷。可為:html、script、text、xml、json。

　　beforeSend　　　　 Function　　　　　　該函數用於發送請求前修改XMLHttpRequest對象。其中參數就是XMLHttpRequest對象，由於該函數本身是jQuery事件，　　　　　　　　　　　　　　　　　　　　　　　　因此，如果函數返回false，則表示取消本次事件。

　　complete　　　　　　Function　　　　　　請求完成后調用的回調函數，該函數無論數據發送成功或失敗都會調用，該函數有兩個參數，一個是XMLHttpRequest對　　　　　　　　　　　　　　　　　　　　　　　　　象，另一個是strStatus，用於描述成功請求類型的字符串。

　　success　　　　　　 Function　　　　　　請求成功后調用的回調函數，該函數有三個參數。第一個是XMLHttpRequest對象，第二個是strError，第三個是捕捉到　　　　　　　　　　　　　　　　　　　　　　　　　的錯誤對象strObject、

　　error　　　　　　　　Function　　　　　　　請求失敗后調用的回調函數，該函數有三個參數，第一個是XMLHttpRequest對象，第二個是出錯信息strError，第三個是　　　　　　　　　　　　　　　　　　　　　　　　捕捉到的錯誤對象strObject。

　　timeout　　　　　　 Number　　　　　　請求超時的時間(毫秒)，該設置將覆蓋$.ajaxSetup()方法中同樣的設置。

　　global　　　　　　　 Boolean　　　　　　　是否相應全局事件，默認是true,表示響應，如果設置成false,表示不響應，那么全局事件$.ajaxStart等將不響應。例如：　　　　　　　　　　　　　　　　　　　　　　　　　全局時間設定了清除緩存 $.ajaxSetup({ cache:false; });但啟動了global:false;將忽略全局中的設置,繼續使用緩存，同　　　　　　　　　　　　　　　　　　　　　　　　　時不觸發全局事件。

　　async　　　　　　　 Boolean　　　　　　　是否為異步請求，默認是true,表示是異步，如果設置成false，表示是同步請求。

　　cache　　　　　　　 Boolean　　　　　　　是否進行頁面緩存，true表示進行緩存，false表示不進行頁面緩存。　　

　　traditional　　　　　 Boolean　　　　　　　是否使用傳統的方式傳遞參數。目前知道的默認傳遞數組，后面會加[]。

　　新建一個Login.aspx　　其中Login.aspx.cs代碼為

        protected void Page_Load(object sender, EventArgs e)
        {
            string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]);
            string strPass = System.Web.HttpUtility.UrlDecode(Request["txtPass"]);
            bool blnLogin = false;
            if (strName == "admin" && strPass == "123456")
            {
                blnLogin = true;
            }
            Response.Clear();　　　　//注意要先清空，再寫，再end()至於為什么要這樣，暫時還不清楚，但是如果不這樣做，會將整個頁面的都返回給AJAX請求。
            Response.Write(blnLogin);
            Response.End();
        }

　　　前台JS代碼：

        $(function () {
            $("#btnLogin").click(function () {
                $.ajax({
                    url: "userinfo.aspx",
                    dataType: "html",
                    data: {
                        txtName: encodeURI($("#txtName").val()),
                        txtPass: encodeURI($("#txtPass").val())
                    },
                    success: function (response) {
                        alert(response.length);
                        if (response == "True") {
                            $(".clsShow").html("登錄成功");
                        }
                        else {
                            $("#divError").html("用戶名或密碼錯誤");
                        }
                    }
                })
            })
        })

　　　　前台HTML代碼：

    <div class="divFrame">
        <div>
            <span>用戶登錄</span>
        </div>
        <div class="divContent">
            <div class="clsShow">
                <div id="divError" class="clsError">
                </div>
                <div>
                    名稱:<input id="txtName" type="text" class="txt" /></div>
                <div>
                    名稱:<input id="txtPass" type="password" class="txt" /></div>
                <div>
                    <input id="btnLogin" type="button" value="登錄" class="btn" />&nbsp;&nbsp;
                    <input id="btnReset" type="button" value="取消" class="btn" />&nbsp;&nbsp;
                </div>
            </div>
        </div>
    </div>

七、全局函數

　　全局事件列表

　　　事件名稱　　　　　　　　　　　　　　參數　　　　　　　　　　　　　　　　　　功能描述

　　ajaxComplete(fn)　　　　　　　　　　function　　　　　　　　　　　　　　Ajax請求完成時的函數

　　ajaxError(fn)　　　　　　　　　　　　function　　　　　　　　　　　　　　Ajax請求發生錯誤時執行函數，捕捉到的錯誤可作為最后一個參數傳遞。

　　ajaxSend(fn)　　　　　　　　　　　　function　　　　　　　　　　　　　　Ajax請求發送前執行函數

　　ajaxStart(fn)　　　　　　　　　　　　function　　　　　　　　　　　　　　Ajax請求開始時執行函數

　　ajaxStop(fn)　　　　　　　　　　　　function　　　　　　　　　　　　　　Ajax請求結束時實行函數

　　ajaxSuccess(fn)　　　　　　　　　　 function　　　　　　　　　　　　　　Ajax請求成功時執行函數

八、ajax全局設置，對當前頁面所有的ajax請求有效。　　　　　　　　　

$.ajaxSetup({
　　cache: false //關閉AJAX相應的緩存，這樣就相當於加了個new Date();不會再獲取服務器緩存
});

參數名	類型	描述
url	String	(默認: 當前頁地址) 發送請求的地址。
type	String	(默認: “GET”) 請求方式 (”POST” 或 “GET”)，默認為 “GET”。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。
timeout	Number	設置請求超時時間（毫秒）。此設置將覆蓋全局設置。
async	Boolean	(默認: true) 默認設置下，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。
beforeSend	Function	發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。XMLHttpRequest 對象是唯一的參數。 function(XMLHttpRequest) {this;// the options for this ajax request}
cache	Boolean	(默認: true) jQuery 1.2 新功能，設置為 false 將不會從瀏覽器緩存中加載請求信息。
complete	Function	請求完成后回調函數 (請求成功或失敗時均調用)。參數： XMLHttpRequest 對象，成功信息字符串。 function(XMLHttpRequest, textStatus) {this;// the options for this ajax request}
contentType	String	(默認: “application/x-www-form-urlencoded”) 發送信息至服務器時內容編碼類型。默認值適合大多數應用場合。
data	Object, String	發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 ‘&foo=bar1&foo=bar2′。
dataType	String	預期服務器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息返回 responseXML 或 responseText，並作為回調函數參數傳遞，可用值: “xml”: 返回 XML 文檔，可用 jQuery 處理。 “html”: 返回純文本 HTML 信息；包含 script. 元素。 “script”: 返回純文本 JavaScript. 代碼。不會自動緩存結果。 “json”: 返回 JSON 數據。 “jsonp”:JSONP格式。使用JSONP形式調用函數時，如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。
error	Function	(默認: 自動判斷 (xml 或 html)) 請求失敗時將調用此方法。這個方法有三個參數：XMLHttpRequest 對象，錯誤信息，（可能）捕獲的錯誤對象。 function(XMLHttpRequest, textStatus, errorThrown) {// 通常情況下textStatus和errorThown只有其中一個有值this;// the options for this ajax request}
global	Boolean	(默認: true) 是否觸發全局 AJAX 事件。設置為 false 將不會觸發全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用於控制不同的Ajax事件
ifModified	Boolean	(默認: false) 僅在服務器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭信息判斷。
processData	Boolean	(默認: true) 默認情況下，發送的數據將被轉換為對象(技術上講並非字符串) 以配合默認內容類型 “application/x-www-form-urlencoded”。如果要發送 DOM 樹信息或其它不希望轉換的信息，請設置為 false。
success	Function	請求成功后回調函數。這個方法有兩個參數：服務器返回數據，返回狀態 function(data, textStatus) {// data could be xmlDoc, jsonObj, html, text, etc...this;// the options for this ajax request}

九、jQuery的Ajax狀態碼

　　"success":請求已成功完成

　　"notmodified":請求已正常完成，但服務器返回的響應內容是HTTP304 "Not Modified"

　　"error":請求沒有成功完成，原因是某些HTTP錯誤

　　"timeout":如果Ajax請求沒有指定的超時區間內完成，會調用錯誤回調，並傳入該狀態碼

　　"parsererror":HTTP請求已經完成，但jQuery無法按照期望的方式解析。例如服務器響應的是不符合格式的xml文檔或不符合格式的JSON文本時，就會出現該狀態碼

十、dataType的選項列表

　　"text"　　將服務器的響應作為純文本返回，不做任何處理。

　　"html"　　該類型與"text"一樣，響應是純文本。load()方法使用該類型，將返回的文本插入到文檔自身中。

　　"xml"　　請求的URL被認為指向XML格式的數據，jQuery使用xmlHttpRequest對象的responseXML屬性來替代responseText屬性，傳給回調函數的值是一個表示該　　　　　　　　XML文檔的Document對象，而不是保存文檔文本的字符串。

　　"script"　請求的URL被認為指向javascript文件，返回的文本在傳入回調函數前，會被當做腳本執行。$.getScript()使用該類型。

　　"json"　　請求的URL被認為指向JSON格式的數據文件，會使用jQuery.parseJSON()來解析返回的內容(parseJSON是把JSON轉成對象的。)，得到JSON對象后才傳入回　　　　　　　　調函數。jQuery.getJSON()使用該類型。如果類型是"json"，同時URL或數據字符串含有"=?"。該類型會被轉成"jsonp"。

　　"jsonp"　請求的URL被認為指向服務器腳本，該腳本支持"jsonp"協議，可以將JSON格式的數據作為參數傳遞給客戶端指定的函數。

　　如果調用$.get(),$.post(),$.ajax()函數時沒有指定以上類型中的任何一個，則jQuery會檢查HTTP響應中的Content-type頭。如果該頭部信息包含"xml"字符串，則傳入回調函數中的是XML文檔，如果頭部包含"json"字符串，則數據被解析成JSON並把解析后的對象傳給回調函數。如果頭部含有"javascript"字符串，則數據被當做腳本執行。如果以上都不符合，則數據會被當做純文本處理。

十一、同步AJAX

　　2013-05-30:

　　之前一直沒遇到過這個問題，上次記得有次面試的時候，被面試官考到，當時回答不出，今天特地來補上

　　后台代碼如下：

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            
            return View();
        }

        public ActionResult GetName()
        {
            return Content("張三");
        }
    }

　　前台代碼如下：

<!DOCTYPE html>
<html>
<head>
    <title>同步AJAX</title>
    <script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var str;
            $.ajax({
                url: "/Home/GetName",
                dataType: "text",
                type: "post",
                success: function (response) {
                    str = response;　　//此行代碼后執行
                }
            })
            alert(str);　　//此行代碼先執行
        })
    </script>
</head>
<body>
</body>
</html>

　　猜下以上代碼彈出什么？

　　彈出如下：

　　為什么呢？需要特別注意AJAX是異步，因為有可能后面的alert彈出代碼比前面的success函數的代碼先執行，此時str還沒有被賦值。

　　如果想獲取到值怎么辦？這就要留意到jQuery提供的另一個重要屬性啦。async，默認設置下，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。

　　因此修改一下就正確了：

    <script type="text/javascript">
        $(function () {
            var str;
            $.ajax({
                url: "/Home/GetName",
                dataType: "text",
                async: false,
                type: "post",
                success: function (response) {
                    str = response;
                }
            })
            alert(str);
        })
    </script>

　　顯示結果如下：

　　jQuery AJAX傳遞數組時，會在參數后面增加[]，這個問題可以通過擴展ModleBinder解決，也可以將數組轉為字符串，然后后台再split解決。但是感覺都不爽，僅僅這樣一個小問題，就需要這么多的操作，有沒有更好的方法呢？經檢查，發現根本原因在於jQuery，是jQuery在后面增加了[]，據說是為了適應PHP，如果不希望增加這樣一個[]，那只需要增加一個屬性。

        $(function () {
            var ids = [28,29];
            alert(typeof (ids));
            $.ajax({
                url: "/Home/Index",
                type: "post",
                dataType: "text",
                data: {
                    id: ids
                },
                success: function (response) {
                    alert(123);
                }
            })
        })

　　增加屬性后：

        $(function () {
            var ids = [28,29];
            alert(typeof (ids));
            $.ajax({
                url: "/Home/Index",
                type: "post",
                dataType: "text",
                traditional:true,
                data: {
                    id: ids
                },
                success: function (response) {
                    alert(123);
                }
            })
        })

　　提交的參數：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaScript:Ajax JavaScript之Ajax 原生JavaScript封裝Ajax Ajax實現--javascript JavaScript AJAX原生寫法原生javascript替代AJAX 用原生JavaScript寫AJAX 【javascript】ajax 基礎 JavaScript Ajax + Promise JavaScript Ajax之美~