AJAX、JSON、HTTP

Chenprwe
141 阅读11分钟

前言

  • AJAX : Async JavaScript And XML（异步javascript和xml）
  • AJAX的全部内容就是用Js发请求和收响应，AJAX是浏览器上的功能，浏览器可以发请求，收响应，浏览器在window上架了一个XMLHttpRequest函数，用这个函数构造函数（类）可以构造出一个对象，js通过它实现发请求和收响应
  • 在网页中利用XMLHttpRequest对象和服务器进行数据交互等方式，就是AJAX
  • 我们首先要准备一个服务器，使用server.js作为我们的服务器
  • 添加 index.html/main.js两个路由

用AJAX四步骤

  • 1.创建HttpRequest对象（全程是XMLHttpRequest）
  • 2.调用对象的open方法
  • 3.监听对象的onload&onerror事件，专业前端会改用onreadystatechange事件
  • 4.调用对象的send方法（发送请求）

XMLHttpRequest

  • 是浏览器提供的javascript对象，通过它，可以请求服务器上的数据资源。jquery中的ajax函数，就是基于xhr对象封装出来的

onreadystatechange

  • 0 UNSENT 代理被创建，但尚未调用open方法
  • 1 OPENED open方法已经被调用
  • 2 HEADERS_RECEIVED send方法已经被调用，并且头部和状态已经可以获得
  • 3 LOADING 下载中，responseText属性已经包含部分数据
  • 4 DONE 下载操作已经完成
  • 监听xhr对象的请求所处的状态 readyState，值为0-4
  • 监听xhr对象与服务器响应的状态 status
  • response 服务器响应回来的数据
  • 注意：判断条件里的status和响应回来的status并不是同一个status

查询字符串

  • 查询字符串（URL参数）是指在URL末尾加上用于向服务器发送信息的字符串（变量）
  • 将英文的？放在URL的末尾，然后再加上 参数=值，多个参数用&符号进行分隔
  • 请求携带参数的本质，都是直接将参数以查询字符串的形式，追加到URL地址的后面，发送到服务器的

URL编码

  • URL地址中，只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符
  • 如果URL中需要包含中文这样的字符，则必须对中文字符进行编码（转义）
  • URL编码的原则：使用安全的字符

如何对URL进行编码和解码

  • encodeURL()编码的函数
  • decodeURL()解码的函数

封装AJAX

ajax = (method.url,options)=>{
    const{success,fail} = options//析构赋值，等同于const success =options.success   const fail = options.fail
    const request = new XMLHttpRequest()
    request.open(method,url)
    request.onreadystatechange = ()=>{
    if(request.readyState === 4){
        //成功就调用success 失败iu调用fail
        if(request.status < 400){
            success.call(null,request.response)
        }else if(request.status >= 400){
            fail.call(null,request,request.status)
        }
    }
}
request.send()
}

封装完以后用AJAX只需要写以下代码

ajax('get','/xxx',{
    success(response){},fail:(request,status)=>{}
})

客户端与服务器相关概念

  • 上网过程中负责存放和对外提供资源的电脑，叫做服务器。服务器的本质就是一台电脑，只不过它的性能比个人电脑高很多。
  • 上网过程中，负责获取和消费资源的电脑，叫做客户端。个人电脑中，可以通过安装浏览器的形式，访问服务器对外提供的各种资源

URL地址的组成部分

  • 1.客户端与服务器之间的通信协议，比如http
  • 2.存有该资源的服务器名称，比如www.cnblogs.com
  • 3.资源在服务器上的具体存放位置，比如liulongbinblogs/p/11549898.html

客户端与服务器之间的通信过程

  • 分为 请求 - 处理 - 响应 三个步骤
  • 如果要在网页中请求服务器上的数据资源，则需要XMLHttpRequest对象

资源的请求方式

  • 客户端请求服务器时，请求的方式有很多，最常见的两种请求方式分别为get和post
  • get 请求通常用于获取服务端资源（向服务器要资源），例如根据URL地址，从服务器获取HTML文件、css文件、js文件、图片文件、数据资源等
  • post请求通常用于向服务区提交数据（往服务器发送资源），例如登录时向服务器提交的登录信息，注册时向服务器提交的注册信息，添加用户时向服务器提交的用户信息等各种数据提交操作

jquery中的AJAX

  • $.get(url,[data],[callback])
  • url,string,要请求的资源地址
  • data，object，请求资源期间要携带的参数
  • callback，function，请求成功时的回调函数，在回调过程中拿到服务器响应回来的数据
  • 有参数就是指定的数据，没参数就是全部数据

$.ajax()函数语法

$.ajax({
    type:'',//请求的方式，例如get或post
    url:'',//请求的url地址
    data:{},//这次请求要携带的数据
    success:function(res){}//请求成功之后的回调函数
})

接口的概念

  • 使用ajax请求数据时，被请求的REL地址，就叫做数据接口，同时，每个接口必须有请求方式

接口测试工具postman

  • 为了验证接口能否被正常访问，我们常常需要使用接口测试工具，来对数据接口进行测试
  • 接口测试工具能让我们在不写代码的情况下，对接口进行调用和测试

接口文档

  • 接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用

数据交换格式

  • 数据交换格式就是服务器端与客户端之间进行数据传输与交换的格式
  • 前端领域，经常提及的两种数据交换格式分别是XML和JSON

XML

  • EXtensible Markup Language 可扩展标记语言
  • XML格式臃肿，和数据无关的代码太多，体积大，传输效率低
  • javascript解析XML比较麻烦

JSON

  • JavaScript object Notation javascript对象表示法，json就是javascript对象和数组的自负次表示法，它使用文本表示一个js对象或数组的信息，因此json的本质是字符串

同源策略和跨域

  • 如果两个页面的协议、域名和端口都相同，则两个页面具有相同的源
  • 同源策略是浏览器提供的一个安全功能，限制了从同一个源加载的文档和脚本如何与来自另一个源的自愈啊进行交互。这是一个用于隔离潜在恶意文件的重要安全机制
  • 无法读取非同源网页的cookie、localStorage和indexedDB
  • 无法接触非同源网页的DOM
  • 无法向非同源地址发送AJAX请求
  • 出现跨域的根本原因：浏览器的同源策略不允许非同源的URl之间进行资源的交互
  • 实现跨域请求最主要的两种解决方案分别是JSONP和CORS

JSONP

  • 由于浏览器同源策略的限制，网页中无法通过AJAX请求非同源的接口数据，但是<script>标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js脚本，因此JSONP的实现原理就是通过这个标签的src属性，请求跨域的数据接口，并通过函数调用的形式，节后跨域接口响应回来的数据

HTTP协议

  • 通信就是信息的传递和交换，通信三要素：通信的主体，通信的内容，通信的方式
  • 通信协议就是通信的双方必须遵守的规则和约定，通俗理解，双方采用约定好的格式来发送和接受信息
  • 客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议。网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本协议（Hyper Text Transfer Protocol），简称HTTP协议
  • HTTP协议采用了请求-响应的交互模式

HTTP请求

  • 客户端发起的请求叫做HTTP请求，客户端发送到服务器的消息叫做HTTP请求消息或HTTP请求报文
  • HTTP请求消息由请求航、请求头部、空行和请求体4个部分组成
  • 请求行由请求方式、URL和HTTP协议版本3个部分组成，用空格隔开
  • 请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。比如User-Agent用来说明当前是什么类型的浏览器；Content-Type用来描述发送到服务器的数据格式；Accept用来描述客户端能够接收什么类型的返回内容；Accept-Language用来描述客户端期望接受哪种人类语言的文本内容。请求头部由多行 键/值对 组成，用英文的冒号分隔
  • 请求头部常见请求字段
  • Host 要请求的服务器域名
  • Connection 客户端与服务器的链接方式（close 或 keepalive）
  • Content-Length 用来描述请求体的大小
  • Accept 客户端可识别的响应内容类型列表
  • User-Agent 产生请求的浏览器类型
  • Content-type 客户端告诉服务器世纪发送的数据类型
  • Accept-Encoding 客户端可接收的内容压缩编码形式
  • Accept-Language 用户期望获得的自然语言的优先顺序
  • 空行 最后一个请求头字段的后面是一个空行 通知服务器请求头部至此结束
  • 用来分隔请求头部和请求体
  • 请求体中存放的 是要通过post方式提交到服务器的数据
  • 只有post请求有请求体 get没有

HTTP响应消息

  • 服务器响应给客户端的消息内容
  • 由状态行】响应头部、空行和响应体4个部分组成
  • 状态行由HTTP协议版本、状态码和状态码的描述文本3个部分组成，用空格隔开
  • 响应头部用来描述服务器的基本信息，响应头部由多行 键/值对 组成，用英文的冒号分隔
  • 响应体存放服务器响应给客户端的资源内容

HTTP请求方法

  • 用来表明要对服务器上的资源的执行操作，最常用的是get和post
  • get 发送请求来获得服务器上的资源，请求体中不会包含请求数据，请求数据放在协议头中
  • post 向服务器提交资源，数据被包含在请求体中提交给服务器
  • put 向服务器提交资源，并使用提交的新资源，替换掉服务器对应的旧资源
  • delete 请求服务器删除指定的资源

HTTP响应状态码

  • 标识响应的状态，响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就能知道这次HTTP请求的结果是成功还是失败
  • 响应状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字用来对状态码进行细分
  • 1** 信息，服务器收到请求，需求请求者继续执行操作（实际开发中很少遇到）
  • 2** 成功，操作被成功接收并处理
  • 3** 重定向，需要进一步的操作以完成请求
  • 4** 客户端错误，请求包含语法错误或无法完成请求
  • 5** 服务器错误，服务器在处理请求的过程中发生了错误

2**成功相关的请求状态码

  • 200 ok 请求成功 一般用于get和post请求
  • 201 create 已创建。成功请求并创建了新的资源，通常用于post或put请求

3** 重定向相关的响应状态码

  • 301 moved permanently 永久移动，请求的资源已被永久的移动到新URL，返回信息会包括新的URL，浏览器会自动定向到新的URL，今后任何新的请求都应使用新URL代替
  • 302 found 临时移动，与301类似，但资源只是临时移动
  • 304 not modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源（响应消息中不包含响应体）客户端通常会缓存访问过的资源

4** 客户端错误相关的响应状态码

  • 400 bad request 1.语义有误，当前请求无法呗服务器理解，除非进行修改，否则客户端不应该重复提交这个请求 2.请求参数有误
  • 401 unauthorized 当前请求需要用户验证
  • 403 forbidden 服务器已经理解请求，但是拒绝执行它
  • 404 not found 服务器无法根据客户端的请求找到资源（网页）
  • 408 request timeout 请求超时，服务器等待客户端发送的请求事件过长、超时
avatar
文章
阅读
粉丝