[JavaScript知识库]06Asynchronous

Asynchronous (异步)

概念

异步与同步(synchronous)是相对的概念。在之后我们会接触到vue，会大量使用大异步数据交互。 小鹿也会在之后的vue学习中来重点讲异步。在我们之前学习的单线程编程中，程序的运行是同步的，同步不是指所有步骤同时运行，而是指步骤在一个控制流 序列中按顺序执行；而异步是指执行过程不再与原有的序列有顺序关系。即同步是指按照你的代码顺序执行；异步不按照你的代码顺序执行，异步的效率更高。 异步就是从主线程发射的一个子线程来完成任务。

使用异步

在前后端编程中，我们在处理一些简单，快速的操作时，往往主线程就可以完成。主线程作为一个线程，不能够同时接 收多方面的请求，即当一个事件没有结束，无法处理其他请求。我们会使用子线程来完成一些事情，因为子线程独立于 主线程，即使出现阻塞也不会影响主线程的运行。但子线程存在局限：一旦发射就会与与主线程失去同步，我们无法确定它的结束，如果结束后需要处理一些信息，也无法将其合并到主线程中。为解决这一问题，通过回调函数来实现异步任务的结果处理。

回调函数(callback function)

回调函数是在我们启动一个异步任务就告诉它：等完成任务之后接下来要干什么。这样一来主线程就不用关心异步任务的状态。回调函数就是将函数当参数传递给另一个函数。

//高阶函数
function count(number,callback) {
    return callback(number)
}
//回调函数
function plusNumber(number) {
    return number - 1
}

count(10,plusNumber)//plusNumber函数(回调函数)作为参数传递给count函数

在这讲一个数学中的概念高阶函数：接受其他函数作为参数的函数被称为高阶函数

const names = ['c1','c2','c3'];
const nameLengths = names.map(function (name) {
    return name.length;
})

console.log(nameLengths);

const arr = ['c1','c2','c3'];
const length = arr.map(function f1 (name) {
    return name.length;
})//f1()作为参数(回调函数)传给arr.map方法
alert(length);

异步AJAX(Asynchronous JavaScript and XML)

• ajax不是新的编程语言，而是一种使用现有标准的新方法
• 其最大的优点是通过在后台与服务器进行少量的数据交换，不在重新加载整个页面的情况下，可与服务器交换数据并更新部分网页内容
• 可运用JavaScript操作DOM(Document Object Model)来执行动态效果
• ajax案例：哔哩哔哩 知乎 CSDN 现在几乎所有的网站和app都实现了异步通信
• XMLHttpRequest是AJAX的实现基础，它用于在后台与服务器交换数据，这意味着在不用重新加载整个网页的情况下，对网页的某部分进行更新

创建XMLHttpRequest对象

variable = new XMLHttpRequest();

使用AJAX向服务器发送请求

如需将请求发送到服务器，则使用XMLHttpRequest对象的open()和send()方法

open(method,url,async)

• method：请求的类型(GET/POST)
• url：文件在服务器的位置
• async：true(异步)/false(同步)

GET or POST?

• POST没有数据的数量限制
• 发送包含未知字符的用户输入时，POST比GET更稳定，更可靠

variable = new XMLHttpRequest();
variable.open("GET","",true);
variable.send();