ajax執行流程1

時間 2019-11-29

標籤 ajax 執行流程欄目 Ajax 简体版

原文原文鏈接

/*
 第一步建立ajax對象：
	new XMLHttpRequest();
第二步填寫請求信息:
	xhr.open('method',url,Asynchronous)
	method(請求方式):
		一、get一般用來獲取數據，偶爾也會攜帶一些數據
			(1)發送的內容顯示在瀏覽器地址欄上。
			(2)由於瀏覽器地址欄長度有限制，而get是經過url向服務器發送數據的，因此發送的數據大小會被限制。
		二、post一般用來向服務器發送數據，偶爾也會攜帶一些數據到客戶端。
			(1)顯示在請求頭信息。
			(2)post傳輸數據理論來講是沒有大小限制的,post的大小限制來自於服務器。
	url：請求文件的地址
	Asynchronous(是否異步):
		異步：不會等待數據請求結束繼續執行下邊的代碼，當數據請求成功的時候，在回去進行處理。
		同步：必須等待前邊的數據請求結束才能夠執行下一行代碼，可能會形成頁面假死。
第三步監控請求結果
	ajax對象下邊有一個onload在數據拿到以後就會觸發
	xhr.responseText表示請求到的文本內容。
	xhr.responseXML表示請求到的XML。
第四步發送請求
	xhr.send(data)
	data發送給服務器的數據

 * */
document.onclick=function(){
	var xhr=new XMLHttpRequest();
	xhr.open('get','1.txt',true);
	
	xhr.onload=function(){
		alert(xhr.responseText);
	}
	xhr.send();
}

例子javascript

	document.onclick = function(){
		var xhr = new XMLHttpRequest();

		xhr.open('get','php/data.xml',true);
		xhr.onload = function(){
			var entrys = xhr.responseXML.getElementsByTagName('entry');

			for(var i=0;i<entrys.length;i++){
				var names = entrys[i].getElementsByTagName('name')[0].innerHTML;
				console.log(names);
			}
		};
		xhr.send();
	};

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:db="http://www.douban.com/xmlns/" xmlns:gd="http://schemas.google.com/g/2005" xmlns:openSearch="http://a9.com/-/spec/opensearchrss/1.0/" xmlns:opensearch="http://a9.com/-/spec/opensearchrss/1.0/">
    <title>搜索 javascript 的結果</title>
    <opensearch:startIndex>1</opensearch:startIndex>
    <opensearch:totalResults>1151</opensearch:totalResults>
    <entry>
        <id>http://api.douban.com/book/subject/3332698</id>
        <title>JavaScript</title>
        <category scheme="http://www.douban.com/2007#kind" term="http://www.douban.com/2007#book"/>
        <author>
            <name>克羅克福特</name>
        </author>
        <link href="http://api.douban.com/book/subject/3332698" rel="self"/>
        <link href="http://book.douban.com/subject/3332698/" rel="alternate"/>
        <link href="http://img3.douban.com/spic/s3400022.jpg" rel="image"/>
        <link href="http://m.douban.com/book/subject/3332698/" rel="mobile"/>
        <db:attribute name="isbn10">7564114479</db:attribute>
        <db:attribute name="isbn13">9787564114473</db:attribute>
        <db:attribute name="author">克羅克福特</db:attribute>
        <db:attribute name="price">28.00元</db:attribute>
        <db:attribute name="publisher">東南大學出版社</db:attribute>
        <db:attribute name="pubdate">2009-1</db:attribute>
        <gd:rating average="9.1" max="10" min="0" numRaters="39"/>
    </entry>
    <entry>
        <id>http://api.douban.com/book/subject/3590768</id>
        <title>JavaScript語言精粹</title>
        <category scheme="http://www.douban.com/2007#kind" term="http://www.douban.com/2007#book"/>
        <author>
            <name>Douglas Crockford</name>
        </author>
        <link href="http://api.douban.com/book/subject/3590768" rel="self"/>
        <link href="http://book.douban.com/subject/3590768/" rel="alternate"/>
        <link href="http://img3.douban.com/spic/s3651235.jpg" rel="image"/>
        <link href="http://m.douban.com/book/subject/3590768/" rel="mobile"/>
        <db:attribute name="isbn10">7121084376</db:attribute>
        <db:attribute name="isbn13">9787121084379</db:attribute>
        <db:attribute name="translator">趙澤欣</db:attribute>
        <db:attribute name="translator">鄢學鵾</db:attribute>
        <db:attribute name="author">Douglas Crockford</db:attribute>
        <db:attribute name="price">35.00</db:attribute>
        <db:attribute name="publisher">電子工業出版社</db:attribute>
        <db:attribute name="pubdate">2009年</db:attribute>
        <gd:rating average="9.1" max="10" min="0" numRaters="1082"/>
    </entry>
    <entry>
        <id>http://api.douban.com/book/subject/1921890</id>
        <title>JavaScript DOM編程藝術</title>
        <category scheme="http://www.douban.com/2007#kind" term="http://www.douban.com/2007#book"/>
        <author>
            <name>Jeremy Keith</name>
        </author>
        <link href="http://api.douban.com/book/subject/1921890" rel="self"/>
        <link href="http://book.douban.com/subject/1921890/" rel="alternate"/>
        <link href="http://img3.douban.com/spic/s1958902.jpg" rel="image"/>
        <link href="http://m.douban.com/book/subject/1921890/" rel="mobile"/>
        <db:attribute name="isbn10">7115139210</db:attribute>
        <db:attribute name="isbn13">9787115139214</db:attribute>
        <db:attribute name="translator">楊濤</db:attribute>
        <db:attribute name="translator">王建橋</db:attribute>
        <db:attribute name="translator">楊曉雲</db:attribute>
        <db:attribute name="author">Jeremy Keith</db:attribute>
        <db:attribute name="price">39.00元</db:attribute>
        <db:attribute name="publisher">人民郵電出版社</db:attribute>
        <db:attribute name="pubdate">2006年12月</db:attribute>
        <gd:rating average="8.7" max="10" min="0" numRaters="959"/>
    </entry>
    <entry>
        <id>http://api.douban.com/book/subject/1869705</id>
        <title>JavaScript高級程序設計</title>
        <category scheme="http://www.douban.com/2007#kind" term="http://www.douban.com/2007#book"/>
        <author>
            <name>Nicholas C. Zakas</name>
        </author>
        <link href="http://api.douban.com/book/subject/1869705" rel="self"/>
        <link href="http://book.douban.com/subject/1869705/" rel="alternate"/>
        <link href="http://img5.douban.com/spic/s1888787.jpg" rel="image"/>
        <link href="http://m.douban.com/book/subject/1869705/" rel="mobile"/>
        <db:attribute name="isbn10">7115152098</db:attribute>
        <db:attribute name="isbn13">9787115152091</db:attribute>
        <db:attribute name="translator">曹力</db:attribute>
        <db:attribute name="translator">張欣</db:attribute>
        <db:attribute name="author">Nicholas C. Zakas</db:attribute>
        <db:attribute name="price">59.00元</db:attribute>
        <db:attribute name="publisher">人民郵電出版社</db:attribute>
        <db:attribute name="pubdate">2006年9月</db:attribute>
        <gd:rating average="8.6" max="10" min="0" numRaters="945"/>
    </entry>
    <entry>
        <id>http://api.douban.com/book/subject/1232061</id>
        <title>JavaScript 權威指南</title>
        <category scheme="http://www.douban.com/2007#kind" term="http://www.douban.com/2007#book"/>
        <author>
            <name>David Flanagan</name>
        </author>
        <link href="http://api.douban.com/book/subject/1232061" rel="self"/>
        <link href="http://book.douban.com/subject/1232061/" rel="alternate"/>
        <link href="http://img3.douban.com/spic/s1504052.jpg" rel="image"/>
        <link href="http://m.douban.com/book/subject/1232061/" rel="mobile"/>
        <db:attribute name="isbn10">7111110919</db:attribute>
        <db:attribute name="isbn13">9787111110910</db:attribute>
        <db:attribute name="translator">張銘澤</db:attribute>
        <db:attribute name="translator">等</db:attribute>
        <db:attribute name="author">David Flanagan</db:attribute>
        <db:attribute name="price">99.00</db:attribute>
        <db:attribute name="publisher">機械工業出版社</db:attribute>
        <db:attribute name="pubdate">2003-1-1</db:attribute>
        <gd:rating average="8.7" max="10" min="0" numRaters="662"/>
    </entry>
    <entry>
        <id>http://api.douban.com/book/subject/2228378</id>
        <title>JavaScript權威指南</title>
        <category scheme="http://www.douban.com/2007#kind" term="http://www.douban.com/2007#book"/>
        <author>
            <name>弗拉納根</name>
        </author>
        <link href="http://api.douban.com/book/subject/2228378" rel="self"/>
        <link href="http://book.douban.com/subject/2228378/" rel="alternate"/>
        <link href="http://img3.douban.com/spic/s5860151.jpg" rel="image"/>
        <link href="http://m.douban.com/book/subject/2228378/" rel="mobile"/>
        <db:attribute name="isbn10">7111216326</db:attribute>
        <db:attribute name="isbn13">9787111216322</db:attribute>
        <db:attribute name="translator">李強</db:attribute>
        <db:attribute name="author">弗拉納根</db:attribute>
        <db:attribute name="price">109.00元</db:attribute>
        <db:attribute name="publisher">機械工業</db:attribute>
        <db:attribute name="pubdate">2007-8</db:attribute>
        <gd:rating average="8.9" max="10" min="0" numRaters="591"/>
    </entry>
    <entry>
        <id>http://api.douban.com/book/subject/10546125</id>
        <title>JavaScript高級程序設計（第3版）</title>
        <category scheme="http://www.douban.com/2007#kind" term="http://www.douban.com/2007#book"/>
        <author>
            <name>[美] Nicholas C. Zakas</name>
        </author>
        <link href="http://api.douban.com/book/subject/10546125" rel="self"/>
        <link href="http://book.douban.com/subject/10546125/" rel="alternate"/>
        <link href="http://img3.douban.com/spic/s8958650.jpg" rel="image"/>
        <link href="http://m.douban.com/book/subject/10546125/" rel="mobile"/>
        <db:attribute name="isbn10">7115275793</db:attribute>
        <db:attribute name="isbn13">9787115275790</db:attribute>
        <db:attribute name="translator">李鬆峯</db:attribute>
        <db:attribute name="translator">曹　力</db:attribute>
        <db:attribute name="author">[美] Nicholas C. Zakas</db:attribute>
        <db:attribute name="price">99.00元</db:attribute>
        <db:attribute name="publisher">人民郵電出版社</db:attribute>
        <db:attribute name="pubdate">2012-3-29</db:attribute>
        <gd:rating average="9.4" max="10" min="0" numRaters="550"/>
    </entry>
    <entry>
        <id>http://api.douban.com/book/subject/10733304</id>
        <title>基於MVC的JavaScript Web富應用開發</title>
        <category scheme="http://www.douban.com/2007#kind" term="http://www.douban.com/2007#book"/>
        <author>
            <name>麥卡勞(Alex MacCaw)</name>
        </author>
        <link href="http://api.douban.com/book/subject/10733304" rel="self"/>
        <link href="http://book.douban.com/subject/10733304/" rel="alternate"/>
        <link href="http://img5.douban.com/spic/s27269298.jpg" rel="image"/>
        <link href="http://m.douban.com/book/subject/10733304/" rel="mobile"/>
        <db:attribute name="isbn10">7121109565</db:attribute>
        <db:attribute name="isbn13">9787121109560</db:attribute>
        <db:attribute name="translator">李晶</db:attribute>
        <db:attribute name="translator">張散集</db:attribute>
        <db:attribute name="author">麥卡勞(Alex MacCaw)</db:attribute>
        <db:attribute name="price">59.00元</db:attribute>
        <db:attribute name="publisher">電子工業出版社</db:attribute>
        <db:attribute name="pubdate">2012-5</db:attribute>
        <gd:rating average="8.4" max="10" min="0" numRaters="286"/>
    </entry>
    <entry>
        <id>http://api.douban.com/book/subject/3007076</id>
        <title>精通JavaScript</title>
        <category scheme="http://www.douban.com/2007#kind" term="http://www.douban.com/2007#book"/>
        <author>
            <name>John Resig</name>
        </author>
        <link href="http://api.douban.com/book/subject/3007076" rel="self"/>
        <link href="http://book.douban.com/subject/3007076/" rel="alternate"/>
        <link href="http://img3.douban.com/spic/s25000520.jpg" rel="image"/>
        <link href="http://m.douban.com/book/subject/3007076/" rel="mobile"/>
        <db:attribute name="isbn10">7115175403</db:attribute>
        <db:attribute name="isbn13">9787115175403</db:attribute>
        <db:attribute name="translator">江疆</db:attribute>
        <db:attribute name="translator">陳賢安</db:attribute>
        <db:attribute name="author">John Resig</db:attribute>
        <db:attribute name="price">49.00元</db:attribute>
        <db:attribute name="publisher">人民郵電出版社</db:attribute>
        <db:attribute name="pubdate">2008-4-1</db:attribute>
        <gd:rating average="8.6" max="10" min="0" numRaters="387"/>
    </entry>
    <entry>
        <id>http://api.douban.com/book/subject/5362856</id>
        <title>高性能JavaScript</title>
        <category scheme="http://www.douban.com/2007#kind" term="http://www.douban.com/2007#book"/>
        <author>
            <name>Nicholas C.Zakas</name>
        </author>
        <link href="http://api.douban.com/book/subject/5362856" rel="self"/>
        <link href="http://book.douban.com/subject/5362856/" rel="alternate"/>
        <link href="http://img3.douban.com/spic/s6245861.jpg" rel="image"/>
        <link href="http://m.douban.com/book/subject/5362856/" rel="mobile"/>
        <db:attribute name="isbn10">7121119323</db:attribute>
        <db:attribute name="isbn13">9787121119323</db:attribute>
        <db:attribute name="translator">丁琛</db:attribute>
        <db:attribute name="translator">趙澤欣</db:attribute>
        <db:attribute name="author">Nicholas C.Zakas</db:attribute>
        <db:attribute name="price">49.00元</db:attribute>
        <db:attribute name="publisher">電子工業出版社</db:attribute>
        <db:attribute name="pubdate">2010-11</db:attribute>
        <gd:rating average="9.0" max="10" min="0" numRaters="323"/>
    </entry>
    <opensearch:itemsPerPage>10</opensearch:itemsPerPage>
</feed>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。