快速上手Ajax【一篇文章就搞懂】,
快速上手Ajax【一篇文章就搞懂】,
目录:
- 1.什么是 AJAX ?
- 2.快速上手
- 2.1 AJAX工作流程图
- 2.2 readyState 和status
- 3. 具体用法
- 3.1 GET 请求
- 3.2. POST 请求
- 3.3选择GET还是POST?
- 3.4 同步与异步
1.什么是 AJAX ?
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
而传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
AJAX它使我们可以通过 JavaScript 直接获取服务端最新的内容而不必重新加载
页面。让 Web 更能接近桌面应用的用户体验。
说白了,AJAX 就是浏览器提供的一套 API,我们可以通过 JavaScript 调用,从而实现通过代码控制请求与响应。实现网络编程。
2.快速上手
使用Ajax是非常容易的,我们可以类比我们平时使用浏览器一样,一般需要 4个步骤就可以获取到后端响应过来的内容。
//步骤1: 创建一个 XMLHttpRequest 类型的对象 ———— 相当于我们平时打开一个浏览器
var xhr = new XMLHttpRequest();
//步骤2: open打开一个与网址之间的联系 ———— 相当于在地址栏输入网址访问
xhr.open('GET','./time.php');
//步骤3: send通过连接发送一次请求 ———— 相当于回车或者点击访问发送请求
xhr.send(null);
//步骤4: 指定 xhr 状态发生变化的时候的处理函数 ———— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
if (xhr.readyState === 4 && xhr.status=== 200) { //如果是请求已完成,并且响应已就绪
// 通过 xhr 的 responseText 获取到响应的响应体
console.log(this)
}
}
这样就完成Ajax的全部操作啦。
2.1 AJAX工作流程图
2.2 readyState 和status
由于 readystatechange 事件是在 xhr 对象状态变化时触发(不单是在得到响应时),也就意味着这个事件会被触发多次,所以我们有必要了解每一个状态值代表的含义:
注释:onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。
通过了解每一个状态值的含义,我们可以得出,在readyState等于4的时候就已经完成请求了,所以我们一般都会进行判断是否等于4,这样才能完整得拿到响应内容。
3. 具体用法
3.1 GET 请求
通常在一次 GET 请求过程中,参数传递都是通过 URL 地址中的 ? 参数传递。
var xhr = new XMLHttpRequest()
// GET 请求传递参数通常使用的是问号传参
// 这里可以在请求地址后面加上参数,从而传递数据到服务端
xhr.open('GET', './delete.php?id=1')
// 一般在 GET 请求时无需设置响应体,可以传 null 或者干脆不传
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4 && status === 200) {
console.log(this.responseText)
}
}
// 一般情况下 URL 传递的都是参数性质的数据,而 POST 一般都是业务数据
3.2. POST 请求
POST 请求过程中,都是采用请求体承载需要提交的数据.
var xhr = new XMLHttpRequest()
// open 方法的第一个参数的作用就是设置请求的 method
xhr.open('POST', './add.php')
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
// 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 需要提交到服务端的数据可以通过 send 方法的参数传递
// 格式:key1=value1&key2=value2
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}
3.3选择GET还是POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
3.4 同步与异步
在open方法中有三个参数,其中第3个参数就是设置Ajax是通过异步进行请求还是同步请求,它是一个bool值,不填写时,默认为true。采用异步方式执行。如果需要同步执行可以通过传递 false 实现。
那到底什么是同步还是异步呢?我们通过生活的小例子进行讲解。
同步:当你排队去买彩票时候,你就只能排队买彩票,中途不能做其它的事情,只能干愣着,等待完成才能执行下一步。
异步:在你买彩票排队的时候,你可以去做一些其它的事情,比如玩手机,玩游戏,而不是等待
console.log('before ajax')
var xhr = new XMLHttpRequest()
// 默认第三个参数为 true 意味着采用异步方式执行
xhr.open('GET', './time.php', true)
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 这里的代码最后执行
console.log('request done')
}
}
console.log('after ajax')
如果采用同步方式执行,则代码会卡死在 xhr.send() 这一步:
console.log('before ajax')
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open('GET', './time.php', false)
// 同步方式 执行需要 先注册事件再调用 send,否则 readystatechange 无法触发
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 这里的代码最后执行
console.log('request done')
}
}
xhr.send(null)
console.log('after ajax')
不推荐使用 async=false,但是对于一些小型的请求,也是可以的。
请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。
当您使用 async=false 时,一定在发送请求 send() 之前注册 readystatechange (不管同步或者异步)——— 为了让这个事件可以更加可靠(一定触发),一定是先注册!
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
下一章我们将继续讲解响应数据格式的处理和封装,如果该文章对您有所帮助,记得点个赞再走哟~谢谢
如果您也正在学习前端的路上,记得关注该博主,学习更多关于前端的知识~
博主主页 Poetic Code
文章最后发布于: 2019-10-20 12:47:22
评论暂时关闭