Ajax異步操做集合啦(阿賈克斯)

/*
 * Ajax的核心操做對象是xmlHttpRequest
 *    簡化操做步驟:實例化一個xmlHttpRequest對象 ==> 發送請求 ==> 接受響應 ==> 執行回調
 */javascript

實例化對象php

  考慮到兼容問題,非IE5/IE6 使用 => new XMLHttpRequest();html

  IE5/IE6使用 => new ActiveXObject(Microsoft.XMLHTTP);    ☯神吶,請帶走IE吧!java

 

發送請求jquery

  使用 XMLHttpRequest 對象的 open('GET',url,async) 和 send() 方法:ajax

  ❶ open() 有三個參數:chrome

    分別爲http請求方式(get/post) ==》與 POST 相比,GET 更簡單也更快,POST 沒有數據量限制,不會緩存,相對安全json

    http請求地址 ==》url(統一資源定位符)文件所在服務器的地址瀏覽器

    async:true(異步)或 false(同步)緩存

  ❷send(string)   string:僅用於 POST 請求

 

接受響應,執行回調

  readyState的值發生改變時,觸發readystatechange事件,事件中就能夠隨心所欲了

  readyState==4  =>請求加載完成  /    http的狀態爲200 =>響應成功

 

 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>異步操做集合啦</title>
		<script type="text/javascript">
			/*
			 * Ajax的核心操做對象是xmlHttpRequest
			 *    簡化操做步驟:實例化一個xmlHttpRequest對象  ==> 發送請求  ==> 接受響應 ==> 執行回調
			 */
			var jsAjax = function() {
				var xmlHttpR = null;
				if(window.ActiveXObject) {
					//IE5/IE6把xmlHttpRequest封裝在window的子對象ActiveXObject中
					xmlHttpR = new ActiveXObject(Microsoft.XMLHTTP);
				} else if(window.XMLHttpRequest) {
					//非IE五、IE6
					xmlHttpR = new XMLHttpRequest();
				}

				if(xmlHttpR) {
					xmlHttpR.open("GET", "ajax.xml", true);
					xmlHttpR.onreadystatechange = function(e) {
						if(xmlHttpR.readyState == 4) {
							if(xmlHttpR.status == 200) {
								console.log(xmlHttpR.responseText);
							}
						}
					}
					xmlHttpR.send(null);
				}
			}
		</script>
	</head>

	<body>

	</body>

</html>
<?xml version="1.0" encoding="utf-8"?>
<bookstore>
    <book category="COOKING">
        <title lang="en">Everyday Italian</title>
        <author>Giada De Laurentiis</author>
        <year>2005</year>
        <price>30.00</price>
    </book>
    <book category="CHILDREN">
        <title lang="en">Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="WEB">
        <title lang="en">Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
</bookstore>

 

 

 

 

/*

 *  js就是這麼複雜,一套行雲流水的操做下來,瀏覽器F5,哎,咋沒效果,不行,修改代碼,再刷,還有bug等着你! (∪。∪)。。。zzz  敲兩行jQuery放鬆一下!

 *  jQuery操做ajax用一個封裝的函數 $.ajax() 就能夠搞定,操做步驟及其簡化!!!

 */

 

經常使用參數

type:"get",  //http請求方式,值爲 get/post 默認值爲get

url:"",  //統一資源定位符   !!!重要參數

async:true,  //值爲 true/false  默認值爲true,爲異步,ajax發送請求後,在等待server端返回的這個過程當中,會繼續執行ajax塊後面的腳本(異步思想),直到server端返回正確的結果纔會去執行success

dataType:"xml",  //返回數據的類型 ,值爲 xml/html/script/json/jsonp/text  

data:obj,  //傳給sever的數據 能夠是字符串也能夠是對象(好比登錄時傳用戶名密碼)

cache:true,  //默認爲true(當dataType爲script時,默認爲false),設置爲false將不會從瀏覽器緩存中加載請求信息

complete:function(){},  //請求完成後調用的回調函數(請求成功或失敗時均調用)

success:function(res){}, //成功時調用回調函數  !!!重要回調

error: function (err) {} //發生錯誤時調用回調函數

 

jquery封裝了 "jquery.ajax()"   "jquery.post()"   "jquery.get() "  "jquery(selector).load()"   "jquery.getJson()"   "jquery.getScript()"   

其實弄懂$.ajax()就行了,別的都是它延伸出來,具備某種特異功能,$.ajax是大一統,霸天下,廢話很少說,直接上實例,看註釋

  

            $(".loadDom").load("ajax.html", function(responseText, textStatus, xmlHttpRequest) {
                /*
                 * 經常使用與把某段文本(如 :html文檔) 嵌入當前文檔中,更逆天的是能夠把某文檔的某片斷加載進來 如$(".loadDom").load("load.htm  div.test").
                 * load() 有四個參數:
                 *                 ① url:能夠加入querystring ==》'login.php?uname="wbx_2018@qq.com"&pwd="jiubugaosuni"',很明顯這已然是get請求
                 *                 ② data:附帶參數就會轉換爲post請求,基本會省略
                 *                 ③ function:回調函數        ↙☜下左繼續分析
                 *
                 * 回調函數也能夠攜帶三個參數:
                 *     ① responseText 服務端返回的文本
                 *     ② textStatus   值爲success或error
                 *     ③ xmlHttpRequest  這對象就很少說了,原生的
                 */
                console.log(responseText);
            })


            $.get("ajax.json", {
                para1: "val1",
                para2: "val2"
            }, function(data, textStatus) {
                console.log(data);
            }, "json")


            //$.post("ajax.php",{
            //        para1: "val1",
            //        para2: "val2"
            //}, function(data, textStatus) {
            //        console.log(data);
            //},"json")


            $.getScript('ajax.js', function(data) {
                console.log(data);
            });


            $.getJSON('ajax.json', function(data) {
                console.log(data);
            });

 

            $.ajax({
                type: "get",
                async: true,
                url: "ajax.xml",
                dataType: "xml",
                complete: function(data) {
                    console.log(data);
                },
                success: function(res) {
                    //遍歷xml文檔 dom操做
                    var books=$(res).find("bookstore book"),
                        $this,
                        $htm=[];
                    $.each(books, function(index) {
                        $this=$(this);
                        $htm.push("第"+(index+1)+"本書: 《"+$this.find("title").text()+"》 --- ");
                        $htm.push($this.find("author").text());
                        $htm.push("&nbsp;("+$this.find("year").text()+")<br>");
                    });
                    $("#test").append($htm.join(""));
                }
            });

 

 

注:在進行ajax訪問時也許會遇到頁面無效果或是報錯---XMLHttpRequest cannot load,出現這種狀況通常是瀏覽器禁止ajax本地訪問(chrome)。把文件部署到服務器不會出現該問題。解決方法:

1.可在 Chrome 快捷方式中添加啓動參數: --allow-file-access-from-files(前面加空格)

2.用HBuilder這類具備內置服務器的編輯器,直接運行便可

 

 

固然咱們能夠用瀏覽器提供的調試工具,搞清楚  阿賈克斯  的一舉一動,仍是

 

相關文章
相關標籤/搜索