AJAX day_01(6.2) AJAX基础、URL

一、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>

协议+域名/主机名+端口号+目录结构+资源名称+查询字符串+锚点

比如:http://www.codeboy.com:9999/img/footer/icon2.png

(1)<scheme>

方案:协议,规范以那种方式传递数据

(2)<host>

主机名称 IP地址  127.0.0.1 --------------------网站在互联网上真正的门牌号

         域名     www.baidu.com------------标志性建筑

(3)<port>

端口号,端口就是计算机中各种服务对外公开的"柜台号"

(4)<path>

目录结构,资源在服务器上具体存放的位置

(5)<query>

get方法提交请求时,带参数的查询字符串

(6) <flag>也可以记成anchor,都是锚点的意思

锚点/书签,指一个资源中某一部分的名字,该字段在客户端内部使用,不会传给服务器

2.后端接口回顾练习

步骤:

  1. 在day03文件夹下创建proApp文件夹【自定义的商品服务器】
  2. 在proApp文件夹下放入node_modules文件夹【第三方模块文件】
  3. 在proApp文件夹下放入datajson.js文件【里面有10条商品数据】
  4. 在proApp文件夹下创建server.js文件【自定义服务器,监听8080】
  5. 在proApp文件夹下创建Router文件夹【里面是各种路由器文件】
  6. 在Router文件夹下创建product.js文件【商品路由器模块】
  7. 商品路由器记得暴露,并在server.js中引入和配置前缀
  8. 在product.js中写接口并进行测试
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值