【AJAX】请求原理 同步和异步

一、.AJAX概念

本质：使用JS提供的异步对象，在页面不刷新的情况下，发送http请求，得到http响应，实现页面的局部刷新，涉及到的技术HTML JS HTTP/HTTPS 接口 XML JSON

二、完整的WEB请求原理

比如：我们在网页中输入www.jd.com，过了2秒后网页成功显示出来了，那么这2秒发生了什么？

(1)用户输入了域名www.jd.com，想要访问京东的服务器

       注：计算机间的互相查找是通过IP地址来访问的，计算机不认识域名，域名只是为了方便人的记忆与使用的。

(2)客户端向DNS(域名解析)服务器发送请求，请求将域名转换成IP地址

(3)DNS将转换后的IP地址响应给客户端

(4)客户端拿到IP地址后向京东服务器发送请求

(5)京东服务器处理客户发来的请求，请求过程中可能会涉及到数据库 文件系统 其他服务器的交互

(6)京东服务器把响应的信息返回给客户端，客户端浏览器渲染页面给用户看

 

三、同步与异步

同步：在一个任务进行的过程中，不能开启其他的任务

1.同步访问：浏览器在向服务器发送请求的时候，只能等待服务器给出的响应，在这个过程中，浏览器不能做其他事情

客户端浏览器与服务器： “你执行时我等待，我执行时你等待”

2.同步访问出现的场合

• 浏览器地址栏输入URL访问页面
• a 标签跳转
• form 提交请求

异步：在一个任务开启的过程中，可以执行其他操作

 1.异步访问：浏览器在向服务器发送请求时，用户可以在页面上做其他操作

     客户端浏览器和服务器 同时执行各自的代码 不同的任务

2.异步访问出现的场合

• 注册用户名重复的验证
• 聊天室同时打开多个聊天窗口，其中一个窗口操作的时候可以看到另外的窗口发来的消息

用生活的例子解释同步与异步:

场景1:顾客打电话问空桌,酒店让用户先别挂电话,查询一圈后告诉顾客结果(同步)

场景2:顾客打电话问空桌,酒店让用户先挂电话,查询一圈后给顾客回电告知结果—酒店在查询时顾客没有在等电话,而是在做自己的事情(异步)

 

四、客户端提交给服务器的两种方式

方式1：表单提交（同步，页面整体刷新）

客户端发送请求后开始等待

服务器接收请求开始处理，最后返回响应消息

客户端接收到响应消息，销毁掉页面中已有的内容，跳转到新的页面

 

 

方式2：AJAX异步提交（异步执行，页面局部刷新）

new XMLHttpRequest().open('get', '/user/login')

客户端提交请求后不会等待，继续执行其他业务

服务器接收到请求后开始处理，最后返回响应消息

客户端接收到响应消息，使用回调函数处理响应消息，修改页面中的部分内容