一、ajax的概念
AJAX: Asynchronous JavaScript And XML 异步的JS和XML 2000年左右,由Google公司提出的技术 本质:使用JS提供的异步对象,在页面不刷新的情况下,发送http请求,得到http响应,实现页面的局部刷新。 涉及到的技术:HTML、JS、HTTP/HTTPS、接口、XML或JSON |
二、完整的WEB请求原理
比如:我们在网页种输入"jd.com",过了2秒以后页面成功显示出来了,那在这2s发生了什么? 1.用户输入了域名"jd.com",想要访问京东的服务器 注意:计算机之间的互相查找是通过IP地址来访问的,计算机不认识域名,域名只是为了方便用户记忆,计算机不认识域名,该怎么办? 2.客户端向DNS(域名解析)服务器发送请求,请求将域名转换为IP地址 3.DNS服务器将转换后的IP地址响应给客户端 4.客户端拿到IP地址后向京东服务器发送请求 5.京东服务器处理客户端发来的请求,处理的过程中可能会涉及到数据库 文件系统 其他服务器的交互 6.京东服务器把处理完毕的响应消息返回给客户端,客户端浏览器将结果渲染成页面展示给用户 我们可以win+R打开cmd窗口,ping www.baidu.com,发现响应的是一个IP地址的回复 说明:中间发生了将域名转换为IP地址的过程 |
三、同步与异步
同步(Synchronous):在一个任务进行的过程中,不能开启其他任务 1.同步访问:浏览器在向服务器发送请求的时候,只能等待服务器给出响应,在这个过程中,服务器与客户端浏览器"你执行时我等待,我执行时你等待"—同一个任务 2.同步访问出现的场合: (1)浏览器地址栏输入url,访问页面 (2)a标签的跳转 (3)form提交请求 |
异步(Asynchronous):在一个任务开启的过程中,可以执行其他的操作 1.异步访问:浏览器在向服务器发送请求时,用户可以在页面上做其他操作 服务器与客户端浏览器"同时执行各自的的代码"—不同的任务 2.异步访问出现的场合: (1)注册页面用户名重复的验证 (2)百度的搜索建议:每多输入一个字,输入框下面的提示内容就会改变 (3)聊天室:同时打开多个聊天窗口,在其中一个窗口操作的时候可以看到另外的窗口发来的消息 (4)股票软件:查看走向的同时还能做操作 (5)地图加载:随着用户的移动,加载出新的地图 (6)学子商城后台商品列表:首页 — 学子商城后台管理系统 |
用生活的例子理解同步与异步: 场景1:顾客打电话问空桌,酒店让顾客先别挂电话,查询一圈后告诉顾客结果【同步】 场景2:顾客打电话问空桌,酒店让顾客先挂电话,酒店查询一圈后再给顾客回拨告知结果,顾客挂电话后可以干自己的事情【异步】 |
四、客户端提交数据给服务器的两种方式
方式1:表单提交(同步,页面整体刷新) <form action="/user/login" method="get"></form> 客户端发送请求后开始等待... 服务器接收到请求开始处理,处理完毕返回响应消息 客户端接收到响应消息,销毁掉页面中已有的内容,跳转到新的页面 |
方式2:AJAX异步提交(异步,页面局部刷新) new XMLHttpRequest().open('get','/user/login') 客户端提交请求后不会等待,继续执行其他任务 服务器接收到到请求后开始处理,最后返回响应消息 客户端接收到响应消息,使用毁掉函数处理响应消息,修改页面中的部分内容 |
五、其他补充知识点
1.URL
常见的url的结构 <scheme>://<host>:<port>/<path>?<query>#<flag> 协议+域名/主机名+端口号+目录结构+资源名称+查询字符串+锚点 |
(1)<scheme>
方案:协议,规范以那种方式传递数据 |
(2)<host>
主机名称 IP地址 127.0.0.1 --------------------网站在互联网上真正的门牌号 域名 www.baidu.com------------标志性建筑 |
(3)<port>
端口号,端口就是计算机中各种服务对外公开的"柜台号" |
(4)<path>
目录结构,资源在服务器上具体存放的位置 |
(5)<query>
get方法提交请求时,带参数的查询字符串 |
(6) <flag>也可以记成anchor,都是锚点的意思
锚点/书签,指一个资源中某一部分的名字,该字段在客户端内部使用,不会传给服务器 |
2.后端接口回顾练习
步骤:
|