什么是 ajax
当浏览器输入网页以后是需要向服务器获取资源，浏览器渲染了页面之后还想获取更多的网页信息页面就得又刷新一次重新渲染
如果我们不想让网页重新渲染得通过操作页面来实现，比如点击按钮之类的事件，这些事件都是通过 javascript 代码设置的，通过 javascript 代码触发事件告诉浏览器我们的需求，但是 javacript 并没有网络通讯能力，但是浏览器有，浏览器内建的 XMLHttpRequest 构造函数可以通过 javascript 来操控
既然 XMLHttpRequest 是构造函数，那么 XMLHttpRequest 就可以创建新的实例对象，实例对象有很多自己的属性方法，send(请求体)，open(请求方法，URL，是否异步)，readyState 等等
创建 ajax
创建一个 html 文档，里面有一个按钮和一个 div，点击按钮创建 ajax 发起请求，将返回的数据渲染到 div 里，
<button>点击发送请求</button><div id="result"></div><script> const btn=document.getElementsByTagName('button')[0] const result=document.getElementById('result')</script>
复制代码
1.点击按钮的时候创建一个 XMLHttpRequest 实例，接着定义一下请求也就是用 open()方法填写请求类型，URL 和是否异步
2.使用 send()发送请求
3.然后要监听 readyState 属性值的变化，用 onreadystatechange 监听，当 readyState 的值==4 表示收到所有响应了，虽然收到响应了但是不代表成功接收到了数据，还需要判断响应状态码，2 开头的都是成功，成功之后打印数据到浏览器控制台上和将数据渲染到 div 里
btn.onclick=function(){ const xhr=new XMLHttpRequest()//创建XMLHttpRequest对象 xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300')//初始化 设置请求方法和url 设置请求参数可以在url后添加？ xhr.send()//发送 //事件绑定 处理服务端返回的结果 //readystate是xhr对象中的属性，表示状态 0 1 2 3 4 // 0为初始化,尚未调用open()方法 1初始化完毕，已经调用open方法，未派发请求（调用send） 2发送,此时调用了send()方法,但是还没有接收到来自服务器的响应 3接收:已经接收到部分响应 4完成:已经接收到全部响应数据,而且可以在客户端响应 xhr.onreadystatechange=function(){//onreadystatechange监听 //判断 if(xhr.readyState===4){ //判断响应状态码 200 404 403 401 500 2开头的都是成功 if(xhr.status>=200 && xhr.status<300){ //处理结果 //1.响应行 console.log(xhr.status);//状态码 console.log(xhr.statusText);//状态字符串 console.log(xhr.getAllResponseHeaders());//所有响应头 console.log(xhr.response);//响应体 result.innerHTML=xhr.response }else{
} } }}
复制代码
使用 prommise 封装
将 ajax 以 promise 的形式封装起来，新建一个方法在里面创建一个 Promise 对象，Promise 有 resolve 和 reject 两种状态，可以对应 ajax 不同的接收结果，成功 resolve xhr.response，失败 reject xhr.statusText,最后 return 出去
function ajaxPromise(){ let promise=new Promise((resolve,reject)=>{ const xhr=new XMLHttpRequest()
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300')
xhr.send()
xhr.onreadystatechange=function(){ if(xhr.readyState===4){ if(xhr.status>=200 && xhr.status<300){ resolve(xhr.response) }else{ reject(new Error(xhr.statusText)) } } } }) return promise}btn.onclick=function(){ ajaxPromise() .then(response=>{ result.innerHTML=response }) .catch(statusText=>{ console.log(statusText); })}
复制代码
结果是一样的
评论