Ajax 一篇文章就够

余生一个秋
208 阅读6分钟

Ajax 与 Fetch API

一、Ajax是什么？

ajax全名async javascript and XML，是一种异步请求数据的web开发技术，其涉及发送服务器请求额外数据而不需要重新刷新页面。

二、Ajax的基本使用

示例

// 1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest()
// 2.设置请求的类型、url以及是否是异步请求。
xhr.open('GET', url, true)
// 3.自定义请求头Header
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4.发送数据请求
xhr.send()
// 5.接受服务器响应回来的数据
xhr.onload = function(){
    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
	  console.log(responseText)       
    }
}

1、readyState

  • readyState属性表示当前处在请求/响应过程的哪个阶段。该属性有可能的值有
    • 0：未初始化（Uninitialized）。还没有调用send()方法
    • 1：已打开（Open）。已调用open()方法，尚未调用send()方法。
    • 2：已发送（Sent）。已调用send()方法，尚未接到响应。
    • 3：接受中（Receiving）。已经收到部分响应
    • 4：完成（Complete）。已经接受到所有响应，可以使用了

根据readyState的值，我们可以提前给某些请求赋值。

2、HTTP头部

  • 每个请求和响应都会携带一些头部字段，默认发送的请求头有如下：
    • Accept：浏览器可以处理的内容类型。
    • Accept-Charset：浏览器可以显示的字符集。
    • Accept-Encoding：浏览器可以处理的压缩编码类型。
    • Accept-Language：浏览器使用的语言。
    • Connection：浏览器与服务器的链接类型。
    • Cookie：页面中设置的Cookie。
    • Host：发送请求的页面所在的域。
    • Referer：发送请求的页面的URL。
    • User-Agent：浏览器的用户代理字符串。
  • 自定义的头部可用setRequestHeader()方法，在open()方法之后，send()方法之前。

3、请求类型

  • GET：用于向服务器查询某些信息
// 1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest()
// 2.设置GET请求的类型、url以及是否是异步请求。
xhr.open('GET', url, true)
// 3.自定义请求头Header
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4.发送数据请求
xhr.send()
// 5.接受服务器响应回来的数据
xhr.onload = function(){
    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
	  console.log(responseText)       
    }
}
  • POST：用于向服务器发送应该保存的数据

发送的数据放在send()方法，示例

// 1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest()
// 2.设置POST请求的类型、url以及是否是异步请求。
xhr.open('POSE', url, true)
// 3.自定义请求头Header
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4.发送数据请求
xhr.send('保存的数据')
// 5.接受服务器响应回来的数据
xhr.onload = function(){
    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
	  console.log(responseText)       
    }
}

4、FormDate类型

  • XMLHttpRequest Level2新增了FormDate类型，方便于表单序列化

创建一个FormDate对象

let data = new FormDate()
data.append('name', 'Nicholas')
var xhr = new XMLHttpRequest()
xhr.open('POSE', url, true)
xhr.send('data')
xhr.onload = function(){
    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
	  console.log(responseText)       
    }
}

5、超时

  • XHR对象在IE8时新增了一个timeout属性，用于表示发送请求后等待多时毫秒，如果还没响应就中断请求。当请求超过设置的时间时，XHR对象就会触发timeout事件，调用ontimeout 事件处理程序。

三、同源策略

1）什么是同源

如果两个页面的协议、域名和端口都相同，则两个页面具有相同的源。

2）什么是同源策略

同源策略是浏览器提供的一个安全功能，即不能和非同源网站进行交互（不确定对方网站是否安全）

四、跨域

1）什么是跨域

当一个请求url的协议、域名、端口三者有一个与当前页面的url不同即为跨域。出现的原因是：浏览器的同源策略。

2）浏览器对跨域请求的拦截

浏览器的跨域请求可以向另一个服务器发出，但服务器响应回来的数据被同源策略拦截。

五、解决跨域的方案

1）图片探测

图片探测是利用标签实现跨域通信的最早的一种技术。任何图片都可以跨域加载图片而不必担心限制，因此这也是在线广告跟踪的主要方式。

缺点：只能发送GET请求；无法获取服务器响应的内容

2）JSONP

JSONP调用是通过动态创建

缺点：1、当返回的响应加入恶意的内容时，只能完全删除JSONP。

​ 2、不确定JSONP是否请求失败。

3）跨域资源共享（CORS）

跨域资源共享（CORS，Cross-Origin Resource Sharing）定义了浏览器与服务器如何跨源通信。CORS背后的基本思路就是使用自定义的HTTP头部允许浏览器和服务器相互了解，以确定请求或响应应该是成功还是失败。

六、Fetch API

Fetch API提供了一个获取资源的接口（包括跨域请求），其使用起来比XMLHttpRequest()更加的简洁、方便。Fetch API必须是异步。

1）Fetch() 基本用法

  • fetch() 方法只有一个必须的input参数，这个参数是用来获取资源的URL（相对路径、绝对路径）
  • 其返回是一个期约promise，可以通过then方法获取响应的资源

示例

fetch('bar.txt')
  .then((response) => {
    console.log(response)
})
// response {type: "basic", url:....}
  • 可以text()方法读取资源的完整内容，text()返回的也是一个期约promise

示例

fetch('bar.txt')
  .then((response) => { response.text()})
  .then((data) => { console.log(data)})
  • 获取状态

示例

fetch('bar.txt')
  .then((response) => { 
    console.log(response.status)  // 成功200
    console.log(response.statusText) // OK
})

2）Header对象

Header对象是所有外发请求和入站响应头部的容器。，可通过new Headers()来创建请求。

  • 可以使用方法：append,has,get,set以及delete。

示例

// 创建一个空的Headers 对象，主要是Headers
var headers = new Headers()

// 添加（append）请求头信息
headers.append('Content-Type', 'text/plain')
headers.append('X-My-Custom-Header', 'CustomValue')

// 判断（has）,获取(get)，以及修改（set）
headers.has('Content-Type')  // true
headers.get('Content-Type')  // 'text/plain'
headers.set('Content-Type', 'application/json')

// 删除（delete）
headers.delete('X-My-Custom-Header')

// 创建时初始化
var headers = new Headers({
    'Content-Type':'text/plain',
    'X-My-Custom-Header':'CustomValue'
})

3)Request 简介

Request 对象表示一次 fetch 调用的请求信息。传入 Request 参数来调用 fetch, 可以执行很多自定义请求的高级用法:

  • method - 支持 GET, POST, PUT, DELETE, HEAD
  • url - 请求的 URL
  • headers - 对应的 Headers 对象
  • referrer - 请求的 referrer 信息
  • mode - 可以设置 cors, no-cors, same-origin
  • credentials - 设置 cookies 是否随请求一起发送。可以设置: omit, same-origin
  • redirect - follow, error, manual
  • integrity - subresource 完整性值(integrity value)
  • cache - 设置 cache 模式 (default, reload, no-cache)

示例

var request = new Request('/user.json', {
    method:'POST',
    mode:'cors',
    redirect:'follow',
    headers:new Headers({
        'Content-Type':'text/p;ain'
    })
})
// 使用
fetch(request).then((response) => { 
	console.log(response)                     
})

4)Response 简介

Response 代表响应, fetch 的 then 方法接收一个 Response 实例, 当然你也可以手动创建 Response 对象 —— 比如在 service workers 中可能会用到. Response 可以配置的参数包括:

  • type - 类型,支持: basic, cors
  • url
  • useFinalURL - Boolean 值, 代表 url 是否是最终 URL
  • status - 状态码 (例如: 200, 404, 等等)
  • ok - Boolean值,代表成功响应(status 值在 200-299 之间)
  • statusText - 状态值(例如: OK)
  • headers - 与响应相关联的 Headers 对象.

Response 提供的方法如下:

  • clone() - 创建一个新的 Response 克隆对象.
  • error() - 返回一个新的,与网络错误相关的 Response 对象.
  • redirect() - 重定向,使用新的 URL 创建新的 response 对象..
  • arrayBuffer() - Returns a promise that resolves with an ArrayBuffer.
  • blob() - 返回一个 promise, resolves 是一个 Blob.
  • formData() - 返回一个 promise, resolves 是一个 FormData 对象.
  • json() - 返回一个 promise, resolves 是一个 JSON 对象.
  • text() - 返回一个 promise, resolves 是一个 USVString (text).

本文简单介绍了Fetch API的用法，用于复习笔记。

avatar
文章
阅读
粉丝