AJAX
同步和异步
- 同步:必须等待当前事情完成之后,才能进行其他事情
- 异步: 不需要等待当前事情完成,同时进行,多件事情互不干扰
AJAX简介
-
AJAX
=Asynchronous JavaScript and XML
(异步的JavaScript
和XML
)。 -
AJAX
不是新的编程语言,而是一种使用现有标准的新方法。 -
AJAX
是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下,更新页面的数据。 -
如何查看自己电脑的
IP
地址
什么是AJAX
AJAX
= 异步JavaScript
和XML
。AJAX
是一种用于创建快速动态网页的技术。- 通过在后台与服务器进行少量数据交换,
AJAX
可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 - 传统的网页(不使用
AJAX
)如果需要更新内容,必需重载整个网页面。 - 有很多使用
AJAX
的应用程序案例:新浪微博、Google 地图、开心网等等。
创建 XMLHttpRequest
对象(一)
-
XMLHttpRequest
对象 -
所有现代浏览器均支持
XMLHttpRequest
对象(IE5
和IE6
使用ActiveXObject
)。 -
XMLHttpRequest
用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 -
所有现代浏览器(
IE7+
、Firefox
、Chrome
、Safari
以及Opera
)均内建XMLHttpRequest
对象。var xhr = new XMLHttpRequest();
-
老版本的
Internet Explorer
(IE5
和IE6
)使用ActiveX
对象:var xhr = new ActiveXObject("Microsoft.XMLHTTP");
创建 XMLHttpRequest
对象(二)
-
为了应对所有的现代浏览器,包括
IE5
和IE6
,请检查浏览器是否支持XMLHttpRequest
对象。如果支持,则创建XMLHttpRequest
对象。如果不支持,则创建ActiveXObject
:// 判定当前浏览器是否支持 XMLHttpRequest 对象 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { // IE5 IE6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
readState-onreadystatechange
事件
-
onreadystatechange
事件 -
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
-
每当
readyState
改变时,就会触发onreadystatechange
事件。 -
readyState
属性存有XMLHttpRequest
的状态信息。0
: 请求未初始化1
: 服务器连接已建立2
: 请求已接收3
: 请求处理中4
: 请求已完成,且响应已就绪
-
status
200
: “OK”404
: 未找到页面
// onreadystatechange 监听state请求状态变化 // state = 0 1 2 3 4 // 0 请求为初始化 // 1 服务器的连接已经建立 // 2 请求已经被服务器接收到了 // 3 服务器正在处理 // 4 响应已经完成 xhr.onreadystatechange = function () { // 200 在网络中表示请求响应成功 // 404 路径错误 // 401 未登录 // 403 为授权 // 500 服务器内部错误 if (xhr.readyState == 4 && xhr.status == 200) { // 请求响应成功的操作 }
向服务器发送请求
-
如需将请求发送到服务器,我们使用
XMLHttpRequest
对象的open()
和send()
方法:// 开启连接 // xhr.open('GET','',boolean); // 第一个参数是请求方式 get、post // 第二个参数是请求地址 // 第三个参数是一个boolean,true表示异步,false表示同步的请求 xhr.open("GET", "http://192.168.43.142:3000/home/goods", true); // 发送请求 xhr.send();
-
open
(method
,url
,async
)规定请求的类型、url
、以及是否异步处理请求method
:请求的类型,GET
和`POST``url
:文件在服务器上的位置async
:true
(异步)、false
(同步)
-
send
(string
)将请求发送到服务器String
:仅用于POST
请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> var xhr = null; // 判定当前浏览器是否支持 XMLHttpRequest 对象 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { // IE5 IE6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } // onreadystatechange 监听state请求状态变化 // state = 0 1 2 3 4 // 0 请求为初始化 // 1 服务器的连接已经建立 // 2 请求已经被服务器接收到了 // 3 服务器正在处理 // 4 响应已经完成 xhr.onreadystatechange = function () { // 200 在网络中表示请求响应成功 // 404 路径错误 // 401 未登录 // 403 为授权 // 500 服务器内部错误 if (xhr.readyState == 4 && xhr.status == 200) { // 请求响应成功的操作 // xhr.responseText 响应的结果 JSON格式的数组 // console.log(xhr.responseText); var response = JSON.parse(xhr.responseText); console.log(response.data); } }; // 开启连接 // xhr.open('GET','',boolean); // 第一个参数是请求方式 get、post // 第二个参数是请求地址 // 第三个参数是一个boolean,true表示异步,false表示同步的请求 xhr.open("GET", "http://192.168.43.142:3000/home/goods", true); // 发送请求 xhr.send(); </script> </html>
GET
、POST
区别
-
与
POST
相比,GET
更简单也更快,并且在大部分情况下都能用。 -
然而,在以下情况中,请使用
POST
请求:- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(
POST
没有数据量限制) - 发送包含未知字符的用户输入时,
POST
比GET
更稳定也更可靠
-
get
请求<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> /** * get 和 post 请求的区别 * 1. get 请求会将请求的数据跟在浏览器地址栏的后边 ? * 2. get 请求会受到浏览器的限制,导致数据长度有限制 * 3. get 请求不安全 * 4. post 请求将数据放在请求体中 * 5. post 安全的 * 6. post 请求的数据大小是没有限制的 */ var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { // IE5 IE6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // get 请求的结果 var response = JSON.parse(xhr.responseText); console.log(response.data); } }; // get 请求 xhr.open( "GET", "http://192.168.43.142:3000/home/goods?type=pop&page=10", true ); xhr.send(); </script> </html>
-
post
请求<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> <script> /** * get 和 post 请求的区别 * 1. get 请求会将请求的数据跟在浏览器地址栏的后边 ? * 2. get 请求会受到浏览器的限制,导致数据长度有限制 * 3. get 请求不安全 * 4. post 请求将数据放在请求体中 * 5. post 安全的 * 6. post 请求的数据大小是没有限制的 */ var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { // IE5 IE6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 201) { // post 请求的结果 var response = JSON.parse(xhr.responseText); console.log(response.data); } }; // post 请求 xhr.open("POST", "http://192.168.43.142:3000/user/login", true); xhr.setRequestHeader("Content-Type", "application/json"); // post 请求参数需要传入send方法中,而且是以 JSON 格式传递 var loginInfo = { phone: 17602900172, password: "123456", }; xhr.send(JSPN.stringify(loginInfo)); </script> </html>
服务器响应
-
如需获得来自服务器的响应,请使用
XMLHttpRequest
对象的responseText
或responseXML
属性 -
responseText
:获得字符串形式的响应数据 -
responseXML
:获得XML
形式的响应数据books.xml
<?xml version="1.0" encoding="ISO-8859-1"?> <!-- Copyright w3school.com.cn --> <!-- W3School.com.cn bookstore example --> <bookstore> <book category="children"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="cooking"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="web" cover="paperback"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> <book category="web"> <title lang="en">XQuery Kick Start</title> <author>James McGovern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49.99</price> </book> </bookstore>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <ul></ul> </body> <script> /** * 跨域:跨域(CORS)问题的产生 * 1. 协议的不同 * 2. ip 地址不同 * 3,端口号不同 * 跨域的解决方案 * 1. 后端解决 * 2. JSONP * 3. Proxy(代理) */ var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { // IE5 IE6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // get 请求的结果 // console.log(xhr.responseXML); var doc = xhr.responseXML; var titles = doc.querySelectorAll("title"); var str = ""; for (var item of titles) { str += `<li> ${item.innerHTML} </li>`; } document.querySelector("ul").innerHTML = str; } }; // get 请求 // 这里应该是http请求 而不是file请求 // 开启 Open with live Server xhr.open("GET", "./books.xml", true); xhr.send(); </script> </html>