快速上手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

相关内容

    暂无相关文章