一、.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:表单提交(同步,页面整体刷新)
<form action=" /user/login" method="get"></form>
客户端发送请求后开始等待
服务器接收请求开始处理,最后返回响应消息
客户端接收到响应消息,销毁掉页面中已有的内容,跳转到新的页面
方式2:AJAX异步提交(异步执行,页面局部刷新)
new XMLHttpRequest().open('get', '/user/login')
客户端提交请求后不会等待,继续执行其他业务
服务器接收到请求后开始处理,最后返回响应消息
客户端接收到响应消息,使用回调函数处理响应消息,修改页面中的部分内容