ajax基础知识

ajax

同步：必须等待当前事情完成之后，才能进行其他事情
异步: 不需要等待当前事情完成，同时进行，多件事情互不干扰

什么是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对象
var xhr
// 判断当前浏览器是否支持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: 未找到页面

xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) { } }

向服务器发送请求

◼如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
◼ open（method,url,async）规定请求的类型、url、以及是否异步处理请求
◼method：请求的类型，GET和POST
◼ url：文件在服务器上的位置
◼ async：true（异步）、false（同步） ◼ send（string）将请求发送到服务器
◼ String：仅用于POST请求

	xhr.open('GET','http://localhost:8888/home',true)
xhr.send()

GET、POST区别

◼ 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
◼ 然而，在以下情况中，请使用 POST 请求：
◼ 无法使用缓存文件（更新服务器上的文件或数据库）
◼ 向服务器发送大量数据（POST 没有数据量限制）
◼ 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

// 普通get请求
xhr.open('get', 'http://49.233.3.222:8888/home', true)
xhr.send()
// 携带参数的get请求xhr.open('get', 'http://49.233.3.222:8888/home/goods?type=pop&page=10', true)
xhr.send()
// 普通POST请求
xhr.open('POST', http://49.233.3.222:8888/user/login', true) X
xhr.send()
// 携带参数的POST请求
var user = { "tel": "17602900172",
"password": "admin123“ }
// 设置请求头 请求数据的类型
xhr.setRequestHeader("Content-type","application/json");
// JSON.stringify(user) 转换json格式
xhr.send(JSON.stringify(user))

服务器响应

◼ 如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
◼ responseText：获得字符串形式的响应数据
◼ responseXML：获得 XML 形式的响应数据

// responseText 属性
document.getElementById("myDiv").innerHTML = xhr.responseText
// responseXML 属性
var xmlDOC = xhr.responseXML
var titles = xmlDOC.getElementsByTagName('title')
var txt = `<ul>`
for (i = 0; i < titles.length; i++) {
txt += `<li>${titles[i].childNodes[0].nodeValue}</li>`;
}
txt += '</ul>'
document.getElementById("myDiv").innerHTML = txt;