29、JqueryAjax

2024-04-27 15:00:56

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

Ajax

Asynchronsous javascript and xml（異步Javascript和XML）。

Ajax 是一種無需重新加載整個頁面的情況下，更新局部頁面的技術(shù)。

不是指一種單一的技術(shù)，是利用了一系列技術(shù)：Javascript + xmlhttpRequest + CSS + 服務(wù)器端的集合。

http請求

get請求

主要用于獲取數(shù)據(jù)，因為在url中連接參數(shù)，并且容量很低，相對來講不安全。

post請求

主要用于上傳數(shù)據(jù)，因為會封裝在請求報文中，安全性一般，容量幾乎無限。

Javascript Ajax

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

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

<script type="text/javascript">    var btn = document.getElementById("btn");    btn.onclick = function () {        //1、創(chuàng)建Ajax對象        var xhr = null;        if (window.XMLHttPRequest) {            xhr = new XMLHttpRequest(); //ie6以上、frefox 等        } else {            xhr = new ActiveXObject('Microsoft.XMLHTTP'); //ie6        }        //2、連接服務(wù)器        xhr.open("get", "price.txt?time=" + Date.parse(new Date()), true); //get請求，url地址，是否異步        //使用get請求時，要加一個時間戳來讓每次請求都不一樣，否則當(dāng)目標(biāo)頁面發(fā)生變化時，瀏覽器會緩存        xhr.setRequestHeader("If-Modified-Since", "0"); //或者不使用時間戳 設(shè)置請求頭為不緩存        //3、發(fā)送請求        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"); //發(fā)送數(shù)據(jù)到服務(wù)器　　        */        //4、接收返回值　　        //異步使用XMLHttpRequest對象時，必須使用onreadystatechange事件，并檢查readyState屬性，看是否完成請求        xhr.onreadystatechange = function () { //當(dāng)readyState 改變時就會觸發(fā)onreadystatechange 事件            //readyState共有4個狀態(tài)：0（未初始化），1（正在載入），2（載入完成），3（開始解析），4（請求完成）。            //status代表請求結(jié)果，返回http狀態(tài)碼，如：200 代表成功， 404 找不到頁面            if (xhr.readyState == 4 && xhr.status == 200) {                document.write(xhr.responseText); //服務(wù)器相應(yīng)并非XML時 使用responseText屬性。　　　　　　　document.write(xhr.responseXML); //服務(wù)器相應(yīng)為XML時 而且需要XML對象進行解析 使用responseXML屬性。            return false;            }        }    }</script>

XMLHttpRequest常用方法

abort() 取消請求

setRequestHeader() 設(shè)置請求頭

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

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

注意事項

Ajax只能向同一個域名中的相同端口號、相同協(xié)議的url發(fā)起請求，不可以跨域，否則會引發(fā)錯誤。

為了瀏覽器兼容 get請求send最后傳遞null參數(shù)。

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

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

Jquery Ajax

使用原始Ajax, 我們需要做較多的事情, 比如創(chuàng)建XmlHttpRequest對象, 判斷請求狀態(tài), 編寫回調(diào)函數(shù)等.

Jquery提供了幾個用于發(fā)送Ajax請求的函數(shù)，包括load、get、getJSON、post、Ajax。其中Ajax是核心方法，其他方法只是他的一個簡化調(diào)用。

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

load()方法可以將遠程的一個頁面加載到當(dāng)前DOM中。

默認使用get方式，如果傳遞了data參數(shù)則使用post方式。

可以使用選擇器選擇將部分內(nèi)容載入。

<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'        });    });        //發(fā)送post請求，并調(diào)用回調(diào)函數(shù)    $("#loadCallBack").click(function(){        $("#container").load("abc.aspx",{            id:12,            name:"david"        },function(responseText,textStatus,XMLHttpRequest){            //responseText 返回的字符串            //textStatus 請求狀態(tài)            //XMLHttpRequest 對象            alert(responseText + "," + textStatus + "," + XMLHttpRequest);        });    });        //發(fā)送get請求，只獲取id為targetContent的內(nèi)容    $("#loadFiltHtml").click(function(){        $("#container").load("abc.aspx?time=" + Date.parse(new Date()) + " #targetContent")    });});

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

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

get()方法的參數(shù)可以在路徑中拼接

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

也可以在參數(shù)中指定，兩種效果相同。

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

type參數(shù)用于設(shè)置返回的數(shù)據(jù)類型，可以是xml，html（默認），script，json，jsonp，text

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

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

通過HTTP GET請求載入 JSON 數(shù)據(jù)，等同于$.get(url,[data],[callbak],"json")。

什么是JSON呢？

JSON是一個標(biāo)準，就像XML一樣，JSON規(guī)定了對象以什么樣的格式保存為一個字符串，將復(fù)雜對象序列化為一個字符串，在瀏覽器端再將字符串反序列化為javascript可以讀取到對象。

數(shù)據(jù)使用鍵值對存儲 "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>

瀏覽器返回數(shù)據(jù)如下：

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

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

通過 HTTP GET 請求載入并執(zhí)行一個 JavaScript 文件，相當(dāng)于 $.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">跨域調(diào)用</button><script type="text/javascript">    //調(diào)用同站點內(nèi)的js文件    $("#getScript").click(function () {        $.getScript("bootstrap3.34/js/bootstrap.js", function (data, textStatus) {            alert(this.url); //返回調(diào)用路徑        });    });    //跨域調(diào)用js文件    $("#getScriptCross").click(function () {        $.getScript("http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js", function (data, textStatus) {            alert(this.url); //返回調(diào)用路徑        });    });</script>

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

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

六、$.ajax( options )

ajax方法是Jquery Ajax 的底層實現(xiàn)，返回其創(chuàng)建的XMLHttpRequest對象，該方法只有一個參數(shù) 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 () { //發(fā)送請求前執(zhí)行                alert("發(fā)送請求前執(zhí)行！");            },            cache: false, //不緩存            complete: function (responseText, textStatus) { //請求成功或失敗均調(diào)用，可以進行一些判斷                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 是否觸發(fā)全局AJAX事件            success: function (data, textStatus) { //請求成功后的回調(diào)                alert(textStatus);                alert(data);            }        })    });</script>

七、AJAX相關(guān)函數(shù)

1、$.ajaxSetup( options )

設(shè)置全局AJAX默認 options 選項。

ajax方法的所有屬性都可以在此進行設(shè)置，設(shè)置完畢后，就可以進行調(diào)用無參的get()、post()等方法發(fā)送請求。

如果在調(diào)用時，指定了某些屬性，將優(yōu)先使用該屬性，不會沖突。

$.ajaxSetup({    url: "index1.html",    global: false,    type: "post",    success: function (data) {        alert(data);    }});
$("#test").click(function(){
　　$.post(); //會發(fā)送到index1.html
});
$("#btn").click(function () {    $.get("index3.html"); //使用自定義的url 其他用默認的});

2、serializer()

有些時候，我們需要異步提交表單，這是需要自己手動輸入所有參數(shù)，使用serializer()方法可以自動將表單上的元素進行拼接，返回一個參數(shù)字符串。

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';    });});

自動拼接的參數(shù)：userName=123123&passWord=123

3、serializeArray()

該方法返回JSON對象。

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

運行結(jié)果

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

八、JSONP

JSON with Padding是json的一種使用模式，可以讓網(wǎng)頁從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)。

注意 url?jsoncallback=? Jquery會自動將？編譯為正確的函數(shù)名來執(zhí)行回調(diào)函數(shù)。

$("#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]);        }    });});

對應(yīng)的$.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>