荐 AJAX初识Day1——POST & GET请求
AJAX
1. 简介
AJAX（Asynchronous JavaScript and XML ），最早出现在 05 年的 google ，是让浏览器端进行网络编程的技术方法，它使我们可以通过 Javascript 直接获取服务端最新的内容而不必重新加载页面。
- 涉及到 AJAX 操作的页面
不能使用文件协议访问（文件形式访问file:…）- 某些情况可以 （少）
- AJAX 是一套 API 核心提供的类型：
XMLHttpRequest
2.快速上手
- 此图常问(了解)
手写:
// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest() // 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('GET', './time.php') // 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null) // 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () { // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
if (this.readyState === 4) { // 通过 xhr 的 responseText 获取到响应的响应体
console.log(this)
}
}
1. 1readyState
| readyState | 状态描述 | 说明 |
|---|---|---|
| 0 | UNSENT | 代理（XHR）被创建，但尚未调用 open() 方法 |
| 1 | OPENED | open() 方法已经被调用，建立了连接 |
| 2 | HEADERS_RECEIVED | send()方法已经被调用，并且已经可以获取状态行和响应体 |
| 3 | LOADING | 响应体下载中，responseText 属性可能 |
| 4 | DONE | 响应体下载完成，可以自己使用 responseText |
3.具体用法
3.1 GET请求
通常在一次 GET 请求过程中没参数传递都是通过 URL 地址中的 ？ 参数传递
var xhr = new XMLHttpRequest()
// GET 请求传递参数通常使用的是问好传参
// 这里可以在请求地址后面加上参数，从而传递数据到服务端
xhr.open('GET', './user.php?id=1')
// 一般在 GET 请求时无需设置响应体，可以传 null 或者干脆不传
xhr.send(null)
xhr.addEventListener('readystate', () => {
if (this.readyState != 4) return;
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 同步模式和异步模式
关于同步和异步的概念在生活有很多例子：
同步：做饭的时候，等水开了再切菜
异步：做饭的时候，在烧水的同时去切菜，而不是等待
xhr.open() 方法第三个参数要求传入的是一个 bool 值，其作用就是设置此次请求是否采用异步方式执行
默认为 ture ，如果需要同步执行可以通过 false 参数实现。
<script>
console.time('异步');
var xhr = new XMLHttpRequest();
// open 方法第三个参数是 async 可以传入一个布尔值 默认为 true 默认采用异步模式
xhr.open('GET', './time.php', true);
xhr.send();//期间的计时阻塞就发生在send（）方法
console.timeEnd('异步');
console.time('同步');
var _xhr = new XMLHttpRequest();
// open 方法第三个参数是 async 可以传入一个布尔值 默认为 true 默认采用异步模式
_xhr.open('GET', './time.php', false);
_xhr.send();
console.timeEnd('同步');
</script>
结果：(时间不一定) —> 期间的计时阻塞就发生在send（）方法
- 正常网络：
- 异步: 0.808837890625ms
- 同步: 8.543212890625ms
- 3G 下：
- 异步：0.427978515625ms
- 同步：4045.179931640625ms
console.time(’ name ‘) & console.timeEnd(’ name ')
开启计时器
3.4 相应数据格式
提问：如果希望服务端返回一个复杂数据。该如何处理?
关心的问题就是服务端发出何种格式的数据，这种格式如何在客户端用 javascript 解析
不管服务器是采用 xml 还是采用 json 本质上收拾将数据返回给客户端
服务端应该设置一个合理的
Content-Type
3.4.1 XML
一种数据描述手段
老掉牙的东西，写起来复杂，基本现在的项目不用了
数据冗余过多
3.4.2 JSON
类似于 javascript 字面量方式
服务端采用 JSON 格式返回数据，客户端安装 JSON 格式解析数据。
不管是 JSON 也好，还是 XML ，只是再 AJAX 请求过程中用到，并不代表它们之间有必然的联系，它们只是数据协议罢了
3.5 处理响应数据渲染
模板引擎：
- artTemplate: http://aui.github.io/art-template/
3.6 兼容方案()
XMLHttpRequest 在老版本浏览器（i5 和 i6）有兼容问题，可以通过另外一种方式代替
var xhr = window.XMLHttpRequset ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
4.封装
4.1 AJAX 请求封装
函数就可以理解为一个想要做的事情，函数体中约定了这件事情做的过程，直到调用才开始工作
将函数作为参数传递就像是将一个事情交给别人，这就是委托的概念
5.进程与线程
5.1 进程
- 进(运)行中的程序
5.2 线程
- 照着代码 做已经设计好的程序 进行工作
5.3 多线程
- 一个演员演一个角色，要切换角色的时候，瞬间化妆再去演另一个角色…重复(累)
此笔记有两天，明天更完更 Vue…
本文地址：https://blog.csdn.net/weixin_46313446/article/details/107268033