web程序最初的目的就是将信息放到公共的服务器上，让所有的网络用户都可以通过浏览器进行访问
在此之前，通过以下的方式可以使浏览器对服务器发送请求（无法通过编程的手段来进行编程（对服务器发出请求并且接受服务器端返回的数据））
地址栏输入地址，回车，刷新特定元素的href或者src表单提交js直接发送网络请求，它使得我们可以直接通过js来获取服务器最新的内容而不必进行重新加载页面，简而言之就是AJAX是一个浏览器提供的一套API，通过js调用，从而实现通过代码控制网络请求，实现网络编程
初始化（unsent）——>建立连接（opened）——>接受到响应头（header-received）——>响应体加载中（loading）——>加载完成（done）
涉及到AJAX的页面不能使用文件协议方式访问（firle://方式）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX 的快速上手（发送请求）</title> </head> <body> <script> // AJAX 是一套 API 核心提供的类型：XMLHttpRequest // 1. 安装浏览器 // xhr 就类似于浏览器的作用（发送请求接收响应） //创建一个XMLHttpRequest类型的对象——相当于打开了一个浏览器 var xhr = new XMLHttpRequest() // 2. 打开浏览器 输入网址——相当于在地址栏输入一个访问地址 xhr.open('GET', 'http://day-11.io/time.php') // 3. 敲回车键 开始请求——相当于回车或者点击访问发送请求 xhr.send() // 4. 等待响应，指定xhr状态变化的事件处理函数-相当于处理网页呈现后的操作 xhr.onreadystatechange=function(){ } // 5. 看结果 </script> </body> </html>因为客户端永远不知道服务端何时才能返回我们需要的响应，所以采用的是事件机制[ onreadystatechange事件 ]
结论： 证明readyState值为4的时候，我们才可以响应的后续逻辑问题
xhr.onreadystatechange=function(){ if(this.readyState===4){ //后续逻辑问题...... }}onload事件就类似于onreadyStage事件，但是onload事件是由H5提供的定义XMLHttpRequest2.0的事件
var xhr=new XMLHttpRequest() xhr.open("Get","time.php") xhr.send() xhr.onload=function(){ console.log(this.readyState) console.log(this.responseText) }遵守HTTP协议就要有设置:请求体的编码格式和请求头保持一致
//设置请求行 xhr.open("Post",'/time.php'） //设置一个请求头 xhr.setRequestHeader('foo','bar') //*若请求体是urlencoded格式，那么设置请求头的编码格式为urlencoded xhr.setRequestHeader("contentType","applation/x-www-form-urlencoded") //*设置请求体（以urlencoded格式编码请求体） xhr.send('key1=value1&key2=value2') xhr.onreadyStatechange=function(){ if(this.readyState===4){ //获取响应状态码（0,1,2,3,4,） console.log(this.status) //状态描述 console.log(this.statusText) //获取响应头信息（指定响应头） console.log(this.getResponseHeader("content-type")) //全部响应头的信息 console.log(this.getAllResponseHeader()) //获取响应体（文本形式） console.log(this.responseText) //（以XML形式） console.log(this.responseXML) }数据接口就是返回数据的地址一般我们将其称为接口（API）
案例1:
<ul id="list"></ul> <script> //获取list元素 var listElement =document.getElementById('list') // 发送请求获取列表数据呈现在页面 var xhr = new XMLHttpRequest() xhr.open('GET', 'users.php') xhr.send() xhr.onreadystatechange = function () { if (this.readyState !== 4) return var data = JSON.parse(this.responseText) // data => 数据 for (var i = 0; i < data.length; i++) { //创建li元素 var liElement =document.createElement('li') //li元素放置文本 liElement.innerHTML = data[i].name liElement.id = data[i].id //将li元素放置到list里 listElement.appendChild(liElement) //绑定点击事件（在创建li元素的时候进行注册点击事件） liElement.addEventListener('click', function () { // 通过AJAX操作获取服务端对应数据的信息 // 如何获取当前被点击元素对应的数据的ID var xhr1 = new XMLHttpRequest() xhr1.open('GET', 'users.php?id=' + this.id) xhr1.send() xhr1.onreadystatechange = function () { if (this.readyState !== 4) return var obj = JSON.parse(this.responseText) alert(obj.age) } }) } } 找一个合适的时机，做一件合适的事情
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX发送POST请求</title> </head> <body> <div id="loading"></div> <table border="1"> <tr> <td>用户名</td> <td><input type="text" id="username"></td> </tr> <tr> <td>密码</td> <td><input type="password" id="password"></td> </tr> <tr> <td></td> <td><button id="btn">登录</button></td> </tr> </table> <script> var btn = document.getElementById('btn') // 1. 获取界面上的元素 value var txtUsername = document.getElementById('username') var txtPassword = document.getElementById('password') var loading = document.getElementById('loading') btn.onclick = function () { loading.style.display = 'block' var username = txtUsername.value var password = txtPassword.value // 2. 通过 XHR 发送一个 POST 请求 var xhr = new XMLHttpRequest() xhr.open('POST', 'login.php') xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') // xhr.send('username=' + username + '&password=' + password) xhr.send(`username=${username}&password=${password}`) // 3. 根据服务端的反馈 作出界面提示 xhr.onreadystatechange = function () { if (this.readyState !== 4) return console.log(this.responseText) loading.style.display = 'none' } } </script> </body> </html>