2九、Jquery Ajax

時間 2019-11-16

標籤 jquery ajax 欄目 JQuery 简体版

原文原文鏈接

Ajaxjavascript

Asynchronsous Javascript and XML（異步Javascript和XML）。php

Ajax 是一種無需從新加載整個頁面的狀況下，更新局部頁面的技術。css

不是指一種單一的技術，是利用了一系列技術：Javascript + XMLHttpRequest + css + 服務器端的集合。html

http請求java

get請求ajax

主要用於獲取數據，由於在url中鏈接參數，而且容量很低，相對來說不安全。json

post請求bootstrap

主要用於上傳數據，由於會封裝在請求報文中，安全性通常，容量幾乎無限。跨域

Javascript Ajax瀏覽器

首先查看一下在Javascript中如何使用Ajax請求

<input type="button" value="讀取txt" id="btn" />

<script type="text/javascript">
    var btn = document.getElementById("btn");
    btn.onclick = function () {

        //一、建立Ajax對象
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest(); //ie6以上、frefox 等
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP'); //ie6
        }

        //二、鏈接服務器
        xhr.open("get", "price.txt?time=" + Date.parse(new Date()), true); //get請求，url地址，是否異步
        //使用get請求時，要加一個時間戳來讓每次請求都不同，不然當目標頁面發生變化時，瀏覽器會緩存

        xhr.setRequestHeader("If-Modified-Since", "0"); //或者不使用時間戳 設置請求頭爲不緩存

        //三、發送請求
        xhr.send(null); //爲了兼容寫上null　　　　

        /* post方式　　
        xhr.open("post", "price.txt", true); //post　　
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //添加HTTP請求頭
        xhr.send("name=bai&last=wei"); //發送數據到服務器　　
        */

        //四、接收返回值　　
        //異步使用XMLHttpRequest對象時，必須使用onreadystatechange事件，並檢查readyState屬性，看是否完成請求
        xhr.onreadystatechange = function () { //當readyState 改變時就會觸發onreadystatechange 事件
            //readyState共有4個狀態：0（未初始化），1（正在載入），2（載入完成），3（開始解析），4（請求完成）。
            //status表明請求結果，返回http狀態碼，如：200 表明成功， 404 找不到頁面
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.write(xhr.responseText); //服務器相應並不是XML時 使用responseText屬性。　　　　　　　document.write(xhr.responseXML); //服務器相應爲XML時 並且須要XML對象進行解析 使用responseXML屬性。            return false;
            }
        }
    }
</script>

XMLHttpRequest經常使用方法

abort() 取消請求

setRequestHeader() 設置請求頭

getAllResponseHeaders() 獲取http響應頭整個列表

getResponseHeader('key') 獲取指定http相應頭

注意事項

Ajax只能向同一個域名中的相同端口號、相同協議的url發起請求，不能夠跨域，不然會引起錯誤。

爲了瀏覽器兼容 get請求send最後傳遞null參數。

get請求時最好使用encodeURIComonent()進行編碼，不然某些瀏覽器下沒法獲取值。

解析Json格式時 eval("("+json+")")，但有安全性問題。

Jquery Ajax

使用原始Ajax, 咱們須要作較多的事情, 好比建立XmlHttpRequest對象, 判斷請求狀態, 編寫回調函數等.

Jquery提供了幾個用於發送Ajax請求的函數，包括load、get、getJSON、post、Ajax。其中Ajax是核心方法，其餘方法只是他的一個簡化調用。

1、load(url,[data],[callback])

load()方法能夠將遠程的一個頁面加載到當前DOM中。

默認使用get方式，若是傳遞了data參數則使用post方式。

可使用選擇器選擇將部份內容載入。

<div id="container"></div>
<input type="button" value="loadGet" id="loadGet" />
<input type="button" value="loadPost" id="loadPost" />
<input type="button" value="loadCallBack" id="loadCallBack" />
<input type="button" value="loadFiltHtml" id="loadFiltHtml" />

添加點擊事件

$(function(){
    //get方式請求 注意時間戳 不然瀏覽器緩存
    $("#loadGet").click(function(){
        $("#container").load("abc.aspx?time=" + Date.parse(new Date()));
    });
    
    //post方式請求
    $("#loadPost").click(function(){
        $("#container").load("abc.aspx",{
            id:12,
            name:'david'
        });
    });
    
    //發送post請求，並調用回調函數
    $("#loadCallBack").click(function(){
        $("#container").load("abc.aspx",{
            id:12,
            name:"david"
        },function(responseText,textStatus,XMLHttpRequest){
            //responseText 返回的字符串
            //textStatus 請求狀態
            //XMLHttpRequest 對象
            alert(responseText + "," + textStatus + "," + XMLHttpRequest);
        });
    });
    
    //發送get請求，只獲取id爲targetContent的內容
    $("#loadFiltHtml").click(function(){
        $("#container").load("abc.aspx?time=" + Date.parse(new Date()) + " #targetContent")
    });
});

注意 load不能夠跨域如load("http://www.baidu.com/") 報錯。

2、$.get(url,[data],[callback],[type])

get()方法的參數能夠在路徑中拼接

$.get("abc.aspx?id=1&name=3&time=" + Date.parse(new Date()))

也能夠在參數中指定，兩種效果相同。

$.get("abc.aspx",{id:1,name:"3"});

type參數用於設置返回的數據類型，能夠是xml，html（默認），script，json，jsonp，text

$("#btn").click(function(){
    $.get("abc.aspx",{id:1,name:"3"},function(data,textStatus){
        alert(data + "," + textStatus); //data返回的數據,textStatus狀態碼
    },"html");
});

3、$.getJSON(url,[data],[callback])

經過HTTP GET請求載入 JSON 數據，等同於$.get(url,[data],[callbak],"json")。

什麼是JSON呢？

JSON是一個標準，就像XML同樣，JSON規定了對象以什麼樣的格式保存爲一個字符串，將複雜對象序列化爲一個字符串，在瀏覽器端再將字符串反序列化爲javascript能夠讀取到對象。

數據使用鍵值對存儲 "key":"value"，使用逗號分割 "key1":"value1","key2":"value2"。使用花括號保存對象 lala:{"name":"value","name":123}

在C#中使用JSON

C#將.NET對象序列化爲Javascript字符串的方法：JavaScriptSerializer().Serialize(p)，JavaScriptSerializer在System.Web.Extensions.dll中，是3.0新增的類。

創建一個hanlder文件。

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    List<value> lists = new List<value>();
    lists.Add(new value(1, "嘉文", 18));
    lists.Add(new value(2, "蓋倫", 28));
    lists.Add(new value(3, "趙信", 38));
    System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
    var jsonData = js.Serialize(lists);
    context.Response.Write(jsonData);
}
public class value
{
    public value(int id, string name, int age)
    {
        this.id = id;
        this.name = name;
        this.age = age;
    }
    public int id { get; set; }
    public string name { get; set; }
    public int age { get; set; }
}

在頁面上異步獲取JSON

<button type="button" class="btn btn-primary" id="getJSON">getJSON</button>

<script>
    $("#getJSON").click(function () {
        $.getJSON("Handler1.ashx?r=" + Math.random(), function (data, textStatus) {
            var json = eval(data); //使用eval解析JSON
            for (var i = 0; i < json.length; i++) {
                console.log(json[i].name);
            }
        });
    });
</script>

瀏覽器返回數據以下：

[{"id":1,"name":"嘉文","age":18},{"id":2,"name":"蓋倫","age":28},{"id":3,"name":"趙信","age":38}]

4、$.getScript(url,[callbak])

經過 HTTP GET 請求載入並執行一個 JavaScript 文件，至關於 $.get(url, null, [callback], "script")

<button type="button" class="btn btn-primary" id="getScript">getScript</button>
<button type="button" class="btn btn-primary" id="getScriptCross">跨域調用</button>


<script type="text/javascript">
    //調用同站點內的js文件
    $("#getScript").click(function () {
        $.getScript("bootstrap3.34/js/bootstrap.js", function (data, textStatus) {
            alert(this.url); //返回調用路徑
        });
    });

    //跨域調用js文件
    $("#getScriptCross").click(function () {
        $.getScript("http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js", function (data, textStatus) {
            alert(this.url); //返回調用路徑
        });
    });
</script>

5、$.post(url,[data],[callback],[type])

經過遠程 HTTP POST 請求載入信息，具體操做和get()請求同樣，只是換了個$.post。

6、$.ajax( options )

ajax方法是Jquery Ajax 的底層實現，返回其建立的XMLHttpRequest對象，該方法只有一個參數 key/value 對象。

<button type="button" class="btn btn-primary" id="Ajax">Ajax</button>
<script>
    $("#Ajax").click(function () {
        $.ajax({
            url: "Handler1.ashx",
            type: "get", //默認get
            timeout: "1000", //超時時間毫秒
            async: true, //默認true異步
            beforeSend: function () { //發送請求前執行
                alert("發送請求前執行！");
            },
            cache: false, //不緩存
            complete: function (responseText, textStatus) { //請求成功或失敗均調用，能夠進行一些判斷
                alert(responseText);
            },
            contentType: "application/x-www-form-urlencoded", //application/x-www-form-urlencoded 默認這個報文頭 表單
            data: { id: 1, name: "嘉文" },
            dataType: "html", //返回類型
            error: function (e) {
                alert(e); //返回錯誤信息
            },
            global: true, //默認true 是否觸發全局AJAX事件
            success: function (data, textStatus) { //請求成功後的回調
                alert(textStatus);
                alert(data);
            }
        })
    });
</script>

7、AJAX相關函數

一、$.ajaxSetup( options )

設置全局AJAX默認 options 選項。

ajax方法的全部屬性均可以在此進行設置，設置完畢後，就能夠進行調用無參的get()、post()等方法發送請求。

若是在調用時，指定了某些屬性，將優先使用該屬性，不會衝突。

$.ajaxSetup({
    url: "index1.html",
    global: false,
    type: "post",
    success: function (data) {
        alert(data);
    }
});

$("#test").click(function(){
　　$.post(); //會發送到index1.html
});

$("#btn").click(function () {
    $.get("index3.html"); //使用自定義的url 其餘用默認的
});

二、serializer()

有些時候，咱們須要異步提交表單，這是須要本身手動輸入全部參數，使用serializer()方法能夠自動將表單上的元素進行拼接，返回一個參數字符串。

html代碼

<form class="form-horizontal" role="form" style="margin-top:100px;" id="form1">
    <div class="form-group">
        <label class="col-lg-2 control-label">用戶名：</label>
        <div class="col-lg-8"><input type="text" name="userName" placeholder="請輸入用戶名" class="form-control" /></div>
    </div>
    <div class="form-group">
        <label class="col-lg-2 control-label">
            密碼：
        </label>
        <div class="col-lg-8">
            <input type="password" name="passWord" placeholder="請輸入密碼" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-offset-2 col-lg-8">
            <button type="button" class="btn btn-default" id="login">登錄</button>
        </div>
    </div>
</form>

之前你要這麼作

$("#login").click(function () {
    $.post("login.ashx", { userName: $("input[name='userName'").val(), passWord: $("input[name='passWord'").val() }, function () {
        //location.href='index.html';
    });
});

使用方法

$("#login").click(function () {
    $.post("login.ashx", $("#form1").serialize(), function () {
        //location.href='index.html';
    });
});

自動拼接的參數：userName=123123&passWord=123

三、serializeArray()

該方法返回JSON對象。

$("#login").click(function () {
    var objs = $("#form1").serializeArray();
    var str = JSON.stringify(objs); //將json轉換爲字符串
    document.write(str);
});

運行結果

[{"name":"userName","value":"123123"},{"name":"passWord","value":"asd"}]

8、JSONP

JSON with Padding是json的一種使用模式，可讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。

注意 url?jsoncallback=? Jquery會自動將？編譯爲正確的函數名來執行回調函數。

$("#btn").click(function () {
    $.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function (data) {
        for (var i = 0; i < data.length; i++) {
            alert(data[i]);
        }
    });
});

對應的$.ajax方法查詢手機歸屬地

<p>請輸入手機號<input type="text" id="tel" /></p>
<p>歸屬地：<span id="province"></span></p>
<p>運營商：<span id="operators"></span></p>
<button type="button" id="btn">查詢</button>

<script>
    $("#btn").click(function () {
        $("#province").html("");
        $("#operators").html("");
        var tel = $("#tel").val();
        $.ajax({
            type: "get",
            url: "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=" + tel,
            dataType: "jsonp",
            jsonp: "callback",
            success: function (data) {
                $("#province").html(data.province);
                $("#operators").html(data.catName);
            },
            error: function (e) {
                alert(e);
            }
        });
    });
</script>