13、前端知识点--ajax原理以及实现过程
一、简略版的
Ajax简介
Ajax(Asyncchronous JavaScript and Xml),翻译过来就是说:异步的javaScript和xml, Ajax不是新的编程语言,而是一种使用现有标准的新方法。
Ajax的优点:在不重新加载整个页面的情况下,可以与服务器交换数据,并更新部分网页的艺术。
1. Ajax的工作原理
Ajax的工作原理相当于在用户和服务器之间加了一个中间层(Ajax引擎),使用户操作与服务器响应异步化。并不是所有用户请求都提交服务器。像一些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
来看看和传统方式的区别:
Ajax与服务器通信有一个核心的对象XMLHttpRequest,在IE低版本浏览器是使用ActiveXObject来实现 。
XMLHttpRequest对象的几个常用的属性
1. readyState属性
readyState属性存在有服务器响应的状态信息。每当readyState改变时,onreadystatechange函数就会被执行。readyState属性的值有:
2. onreadystatechange 属性
onreadystatechange属性存在有处理服务器响应的函数。下面的代码定义一个空的函数,可同时对onreadystatechange属性进行设置:
xhr.onreadystatechange = function() { }
3. status 属性
status是服务器状态码(如:404: 文件未找到, 200: 成功等)
4. statusText 属性
服务器返回状态文件信息, HTTP状态码的相应文本(OK或Not Found)
5. responseText 属性
可以通过responseText属性来取回由服务器返回的数据。
xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) } }
XMLHttpRequest对象上的属性总览:
XMLHttpRequest对象上的方法
1. open()方法
open()有三个参数,第一个参数定义发送请求所使用的方法,第二个参数规定服务器端脚本的URL,第三个参数规定应当对请求进行异步地处理。
xhr.open('GET', 'test.php', true)
2. send()方法
xhr.send(null)
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。
xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded;charset=UTF-8”);
3. 其他方法
2. Ajax实现步骤
要实现Ajax,大体上有四个步骤:
创建XMLHttpRequest 设置请求方式 调用回调函数 发送请求
function ajax(url, data, method='POST', async=true) { return new Promise((resolve, reject) { // 第一步,创建xmlHttpRequest let xhr = null if (window.XMLHttpRequest) { // 支持XMLHttpRequest xhr = new XMLHttpRequest() } else { // IE5或者IE6 xhr = new ActiveXObject('Microsoft.XMLHTTP') } // 第二步,设置请求方式 xhr.open(method, url, async) // 第三步, 调用回调函数 xhr.onreadyStateChange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(xhr.responseText) } else { reject(xhr.statusText) } } else { reject(xhr.statusText) } } // 第四步, 发送请求 xhr.send(data) }) }
详细版一:https://blog.csdn.net/weixin_37580235/article/details/81459282
AJAX的实现步骤(完整过程):https://blog.csdn.net/qq_29569183/article/details/79259889