原生ajax理解

1.客户端和服务端

使用个人电脑，通过浏览器的形式，访问服务器对外提供的各种资源

客户端：在网络中，客户端就是 获取和消费资源的电脑，就是展示

服务端：服务器的本质就是一台电脑，但是配置要比个人电脑高很多，不需要显示器，只需要主机，负责存放和对外提供资源的电脑

172.xx.cc.3 ip地址对应域名，www.xx.com

绑定ip地址和域名

在浏览器输入域名，浏览器会有一个DNS会把域名解析成ip地址，会根据地址找到这台服务器，然后服务器提供资源，资源再返回到客户端，再展示资源。

域名后面跟的一堆东西，就是返回回来的资源

不租服务器的话，只能自己访问写好的网页，别人搜索不到

总结：

客户端向服务端请求资源，服务端给客户端提供资源

2.URL地址

统一资源定位符，标识互联网上每个资源的存放位置，浏览器只有通过URL地址，才能正确定位资源的存放位置，访问到对应的资源。

比如

百度一下，你就知道 后面什么资源都不跟的话，就是请求index页面

域名一样端口号不一样，里面存放不同客户的东西

80 3000 5173是端口号，类似于房间号，端口号是0-65535之间的一个整数

如果url地址中的端口号是80，那么80是可以省略的，相当于简写为

客户端和服务端传递要有协议，还有https协议

3.网页的打开过程

请求资源后，服务端要处理请求，然后服务端响应资源

1.客户端和服务端的通信过程

概括：请求和响应

2.客户端向服务端发送数据

get 直接在浏览器上可以看到数据 xxxxxxx 所以发送了两条数据 a1=34，a2=123

比如表单提交数据时，点了提交之后，网址栏那里会多出一个 ?数据

比如提交了两个数据，那么就会出现一个&后面紧跟数据

4.服务器对外提供了哪些资源

文字，图片，音频，视频，网页，数据..............

5.ajax介绍

前端如何向后端请求数据？前端可以通过Ajax技术请求服务器上的数据资源，Ajax核心就是XMLHttpRequest对象

1.Ajax

是 异步JavaScript和XML，全称是 Asynchronous JavaScript and XML

XML是一种数据格式，通俗理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，这种方式就是Ajax

ajax是浏览器的技术，web数据交互技术

2.Ajax请求数据的方式

请求方式	描述
POST	向服务端新增数据，本来服务器没有数据，新增
GET	刷新页面，就是从服务端获取数据，本来服务器有，拿过来
DELETE	删除服务端上的数据
PUT	更新服务端的数据（侧重完整更新）所有的都更新，比如用户的完整信息--------用的较多
PATCH	更新服务端的数据（侧重部分更新）比如只更新用户名，年龄

使用原生ajax发起get请求

1.创建xhr对象

2.调用open函数 用GET获取数据

3.调用send方法

4.监听onreadystatechange事件

xhr.reponseText 就是服务端响应回来的数据

客户端到服务端不是一步完成的

原生Ajax发送请求，是有一个过程的，过程分为5个阶段，

xhr.readyState

0 未调用open方法 还没出家门

1 open方法已经调用 出家门还没到

2 send方法已经调用 敲门

3 xhr.reponseText 只包含部分数据，没有传回来全部，只找到一部分

4 数据全部获取到 全找到了

status 响应http状态码 服务端响应数据的状态

1xx 没有发送成功 101 102 103 104

2xx 响应数据成功，响应回来了

3xx 重定向

4xx 请求地址错误 404资源错误，找不到这个资源

5xx 服务器错误

使用xhr发起POST请求

步骤：在第二步后面，多一步，设置编码方式Content-Type

设置请求头xhr.setRequestHeader('Content-Type','application')

第三步：send里面写bookname=js编程&author=jxx&publisher=出版社，-----这是向服务端传递数据的一种格式。链接里不加s，是addbook，然后在preview里可以看到添加图书成功。

再次打开get请求，能看到刚刚使用post添加的数据已经添加到服务器上