前端学习笔记-AJAX

AJAX

原生AJAX

AJAX简介

Ajax全称Asynchronous JavaScript And Xml，即异步的JS和XML。通过Ajax可以在浏览器中向服务器发送异步请求。优势：不刷新页面获取数据。

XML简介

可扩展标记语言，被设计用来传输和存储数据。和HTML类似，不同的是HTML是预定义标签，xml里都是自定义标签

已经被JSON取代

Ajax特点

1. 优点
   • 可以不刷新页面与服务器进行通信
   • 允许根据用户事件来更新部分页面内容
2. 缺点
   • 没有浏览历史，不能回退
   • 存在跨域问题
   • SEO不友好，爬虫爬不到数据，影响网站排名

HTTP

HTTP(hypertext transport protocol)，超文本传输协议，协议详细规定了浏览器和万维网服务器之间相互通信的规则。

请求报文

行 请求方式（GET/POST） 参数 协议/版本号

头 请求头地址、Cookie 、请求体类型等

空行

体 GET请求为空 POST请求可以不为空

响应报文

行 响应协议/版本号 响应状态码 响应状态含义

头 响应体类型、长度、压缩方式等

空行

体 响应内容

Ajax请求步骤

1.创建对象

const xhr = new XMLHttpRequest()

2.初始化，设置请求方法和url

xhr.open(请求方法，url)

3.发送

xhr.send()

4.事件绑定，处理服务器端返回结果

1. readyState 是xhr对象中的属性，表示状态
   • 0 未初始化
   • 1 open方法调用完毕
   • 2 send方法调用完毕
   • 3 服务端返回部分结果
   • 4 服务端返回所有结果
2. status 响应状态码
   • 1xx
   • 2xx 表示成功
   • 3xx
   • 4xx
   • 5xx

xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if(xhr.status >= 200 && xhr.status < 300){
      //处理结果
      //1.响应行
      xhr.statue //状态码
      xhr.statusText //状态字符串
      xhr.getAllResponseHeaders() //所有响应头
      xhr.response //响应体
    }
  }
}

get请求

app.get('/server', (request, response) => {
    //设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('express response');
})

post请求

1. 创建对象
2. 初始化，设置请求方法和url
3. 设置请求头：可以使用预定义的请求头，也可使用自定义请求头。
4. 发送
5. 事件绑定，处理服务器端返回结果

服务端响应JSON数据

1. 服务端需要对数据进行字符串转换：JSON.stringify(数据)
2. 客户端收到数据
   • 手动转换：JSON.parse(xhr.response)
   • 自动转换：初始化之前，这周响应体数据的类型 xhr.responseType=‘json’

nodemon

1. 安装 npm i -g nodemon 或 npm --save-dev nodemon
2. nodemon xxx.js

解决ie缓存问题

增加时间戳，使得每次都请求服务端新的数据

xhr.open(‘GET’, ‘http://127.0.0.1:8080/ie?t=’ + Date.now());

请求超时与网络异常

 xhr.ontimeout = function() {
                alert('timeout, please try later')
            }
 xhr.onerror = function() {
                alert('Internet is not work')
            }

取消请求

 xhr.abort()

避免重复请求（节流阀）

设置一个flag值，若请求发送成功则更改flag值，判断flag值，若已经发送过相同请求，则取消请求

jQuery中的Ajax

1.get请求

$get(url,[data],[callback],[type])

1. url 请求的url地址
2. data：请求携带的参数
3. callback：载入成功时回调函数
4. type：设置返回内容格式：xml html script json text default

2.post请求

$post(url, [data], [callback], [type])

1. url 请求的url地址
2. data：请求携带的参数
3. callback：载入成功时回调函数
4. type：设置返回内容格式：xml html script json text default

3.通用方法Ajax

$.ajax({url,data,type,dataType,success,timeout,error,headers})

常用参数

1. url：请求的url地址
2. data：请求携带的参数
3. type：请求方式（GET、TYPE）
4. dataType:设置返回内容格式：xml html script json text default
5. success：请求成功时回调函数
6. timeout:设置超时时间
7. error：请求失败时回调函数
8. headers：请求头设置，可自定义

注：自定义请求头信息时，服务端需要设置response.setHeader(‘Access-Control-Allow-Headers’, ‘*’);并且返回内容格式为json

axios发送Ajax

1.特点

1. 从浏览器中创建XMLHttpRequests
2. 可以在nodejs中发送请求
3. 支持promise
4. 拦截器机制
5. 数据自动转换
6. 取消请求
7. 自动转换为json
8. 安全防护，避免跨站点请求伪造（XSRF/CSRF）攻击

2.get请求

axios.get(url, data, config).then(response=>{})

3.post请求

axios.post(url, data, config).then(response=>{})

4.通用Ajax请求

axios(url,method,params,headers,data).then()

fetch发送Ajax

语法：fetch(url,{method,headers,body}).then(response=>{return response.text()/response.json()}).then(response=>{})

1. input 定义要获取的资源
   • 一个USVString字符串，包含要获取资源的URL
   • 一个request对象
2. init（可选）
   • method：请求使用的方法，如GET、POST
   • headers：请求的头信息，形式为headers的对象或包含ByteString值的对象字面量
   • body：请求的body信息，GET或HEAD请求不包含body信息
   • mode：请求的模式
   • credentials：请求的credentials，为了在当前域名自动发送cookie，必须提供该选项
   • cache：请求的cache模式default、no-store、reload、no-cache、force-cache、only-if-cached
   • redirect：可用的redirect模式follow（自动重定向）、error（如果发送重定向将自动终止并且抛出错误）、manual（手动处理重定向）
   • reference：一个USVString可以是no-reference、client或一个URL，默认client

跨域

同源策略

同源策略是浏览器的一种安全策略，同源：协议、域名、端口号必须完全相同，违背同源策略是跨域

解决跨域

JSONP

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发，只支持get请求

1. 工作方式：JSONP利用scrip标签的跨域能力来发送请求
2. 使用步骤：
   1. 动态创建一个script标签 var script = doucument.createElement(‘script’);
   2. 设置script的src，设置回调函数;
   3. 将script标签插入到文档中 document.body.appenChild(script)

CORS(跨域资源共享)

CORS是官方的跨域解决方案，特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理。支持get和post请求，跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

1. 工作方式：CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行
2. 使用:对服务器端的设置：router.get(‘xxx’,function(req,res){})

更多前端学习笔记： gitee仓库.