ajax执行流程1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
/* 第一步创建ajax对象: new XMLHttpRequest(); 第二步填写请求信息: xhr.open('method',url,Asynchronous) method(请求方式): 1、get通常用来获取数据,偶尔也会携带一些数据 (1)发送的内容显示在浏览器地址栏上。 (2)因为浏览器地址栏长度有限制,而get是通过url向服务器发送数据的,所以发送的数据大小会被限制。 2、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(); } |
例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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>