Ajax笔记

qqqyyy741
133 阅读7分钟

Ajax

通过 Ajax 技术，可以在不刷新整个页面的情况下，向服务器发送请求，获取数据并进行处理，从而实现更加流畅、响应更快的 Web 应用程序。

概念

url

  • 互联网上的资源都有一个url，通过url就可以定位到互联网上的某个资源。
  • 协议名称 + 主机名称 + 端口号 + 路径 + 文件 + 查询所需的字符串 + HASH
  • http:// baidu.com 8 /css/reset.css ?a=1&b=2&c=3 #abc

http：

  • HyperText Transfer Protocol 超文本传输协议。本质就是客户端和服务器之间沟通交流的规则。
  • http请求（Request）：由客户端（浏览器）向服务器发出请求
  • http响应（Response）：由服务器给出响应

http请求（请求报文）：

  • 请求行
    • 请求方法 get post put ....
    • url 不管是什么样的请求方式，都可以通过url传递参数
    • http协议版本
  • 请求头
    • Content-Type: text/plain, application/x-www-form-urlencoded, application/json, mutipul/form-data
  • 请求体（请求正文），就是传给服务器的数据，post请求和put请求才有请求体，get请求没有请求体

1.基本使用

构建服务器

生成项目配置文件 ： npm init -y /产生一个package.json的文件

安装后端用到的依赖： npm i

每次修改服务器代码，都要重启服务器

ctrl+c两次关闭服务器，node xxx.js重启

基本使用流程

1.创建一个对象

const xhr= new XMLHttpRequest();

2.监听成功的响应（服务器成功响应了数据，就会出发load事件）

xhr.onload = () =>{ }

3.设置请求

第一个参数 请求方式 get、post、delete、head

第二个参数请求URL http//127.0.0.1:3000/getData（本地服务器) 协议 IP 端口 不写表示向当前页面所在的服务器发请求 第三个参数是否异步，默认异步

4.发出请求

发请求时，可以给服务器传递参数 send(请求体)

2.通过url传数据

接收到get请求 url:getData?username=admin&pwd=123456 前端传递的数据：XXx=XXx&yyy=yyy

从ur]中提取数据 {username:'admin',pwd:'123456'} 后端接收到的数据：{Xxx:XXx,yyy:yyy}

url ？之后就是 查询字符串（就是扔给服务器的数据）

截荷就表示传递给服务器的数据

预览查看服务器给我们的响应

3.通过请求体传数据

get请求只能通过url把数据扔给服务器，post，put请求可以不仅可以通过url把数据扔给服务器，也可以通过请求体把数据扔给服务器。

请求体

  • text/plain
    • 默认的请求体类型，如果不设置请求头字段 Content-type，默认就是该种类型
    • 求体只要是字符串就可以，后端不会做任何处理，一般不用
  • application/x-www-form-urlencoded
    • 需要设置请求头 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    • 要求请求体是查询字符串，如 a=100&b=200
    • 点击提交按钮提交表单（非Ajax），如果 Method 是 Post，默认请求体内容就是 x-www-form-urlencoded
  • application/json
    • 设置设置请求头 xhr.setRequestHeader('Content-type', 'application/json');
    • 要求请求体是 json 格式的字符串，JSON.stringfy（）转化成字符串
  • multipart/form-data

4.通过FormData传数据

请求体（send()的方法的参数）除了是字符串，也可以是 formData 对象。如果请求体是 FormData 对象，浏览器会自动设置请求头字段 Content-type 为 multipart/form-data。

FormData不仅可以传递普通数据，还可以上传文件。

5.ajax中的事件

  • readystatechange 当ajax状态发生变化，就会触发，触发至少 4 次
  • load 响应结束的时候触发，此时 readyState 的值是 4
  • loadstart 开始请求的时候触发，此时 readyState 的值是 1
  • loadend 响应结束之后触发，不论请求是否成功都会触发
  • error 请求失败触发，应用层面的错误也算是请求成功（如 404错误），只有网络错误才算请求失败，指请求无法发出的错误
  • progress 当开始接收响应内容，被触发多次，该事件的回调函数可以获取一个 progressEvent 对象

readystatechange，用来监测ajax状态变化的

  • 0 UNSET -- XHR对象已创建或已被 abort() 方法重置。
  • 1 OPENDED -- open() 方法已经被调用。
  • 2 HEADERS_RECEIVED -- send() 方法已经被调用，并且响应头和响应状态已经可获得。
  • 3 LOADING -- 下载中， responseText 属性已经包含部分数据。
  • 4 DONE -- 所有响应数据接收完毕。

6.总结

ajax对象的属性

属性名含义
readyState返回一个数字，表示请求的状态： 0 -- UNSET -- XHR对象已创建或已被 abort() 方法重置。 1 -- OPENDED -- open() 方法已经被调用。 2 -- HEADERS_RECEIVED -- send() 方法已经被调用，并且响应头和响应状态已经可获得。 3 -- LOADING -- 下载中， responseText 属性已经包含部分数据。 4 -- DONE -- 所有响应数据接收完毕。
status响应状态码，如 404、200 等。
statusText响应状态码的文本描述，如 200 对应的是 “OK”。
responseXML接收格式为 XML 的响应数据，返回一个 document 对象。
responseText获取响应文本，返回一个字符串。
responseType用于设置响应内容的类型 xhr2
response返回的类型取决于 responseType 的设置。 xhr2
timeout设置超时时间。xhr2

ajax对象的方法

方法名含义
open()初始化 HTTP 请求，用来指定请求方式和 URL。 xhr.open(method, url, [async], [user], [password])
send()发送 HTTP 请求，参数可以设置请求体，没有请求体无需设置参数。
setRequestHeader()设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用。
abort()如果请求已被发出，则立刻中止请求。
getAllResponseHeaders()以字符串形式返回所有的响应头。
getResponseHeader()返回指定的响应头。

ajax对象的事件

事件名含义
readystatechangereadyState 属性值发生变化触发该事件。
abort请求终止时触发。
error请求遇到错误时触发。
loadstart接收到响应数据时触发。
load请求成功完成时触发。
loaded当请求结束时触发, 无论请求成功 ( load) 还是失败 (abor 或 error)。
progress当请求接收到更多数据时，周期性地触发。
timeout在预设时间内没有接收到响应时触发。

7.跨域cors

同源策略是浏览器的一种安全策略，要求ajax代码所在的页面url中的协议，域名，端口与ajax请求中url中的协议，域名，端口要完全一样。

浏览器的同源策略

只有同源才能通过ajax获取数据，

不同源，因为浏览器的设置得不到数据

不受同源策略的限制

  • 资源的引入 如：img标签的src link标签的href script标签的src

  • 页面中的超连接 a标签中的href

  • 表单的提交

  • 重定向页面

要抵抗同源策略，叫跨域，常见解决跨域的方案：

  • cors
  • jsonp
  • 前端配置代理

JSONP

JSONP不是ajax，JSONP发请求本质是利用script标签的src发的请求

Fetch

Fetch API 被设计用来取代 XMLHttpRequest，它提供了许多与 XMLHttpRequest 相同的功能，但被设计成更具可扩展性和高效性。

8.Axios

Axios 是前端最流行的 ajax 请求库

axios特点

  • 基于 XMLHttpRequest + Promise 的异步的 Ajax 请求库
  • 浏览器端、Node端都可以使用
  • 支持请求和响应拦截器
  • 支持请求取消
  • 批量发送多个请求
  • 支持请求与响应的数据转换（二次封装）

Axios的基本使用

  • axios(config): 通用/最本质的发送意类型请求的方式。
  • axios(url,[config]): 第一个参数是地址，第二个参数是配置项。
  • axios.request(config): 等同于axios(config) （了解）
  • axios.get(url,[config]): 发get请求
  • axios.delete(url,[config]): 发delete请求
  • axios.post(url,[ data, config]): 发post请求
  • axios.put(url,[data, config]): 发put请求
  • axios.patch(url,[ data,[ config]]) 发送patch请求

Axios请求配置项

使用json-server参考文章：blog.csdn.net/liyou123456…

安装json-server npm install -g json-server

测试是否安装成功 json-server --version

启动json-server json-server --watch db.json

托管静态页面 json-server --watch db.json -s./static

avatar
文章
阅读
粉丝