Ajax(Asynchronous JavaScript and XML)

这种技术就是无须刷新页面即可从服务器中取得数据,但不一定是XML数据。在原生方法上,Ajax技术的核心是XMLHttpRequest对象(简称XHR)。


XHR用法

  • open(method, url, isAsync)

    开启一个method类型的请求,url是相对于当前页面(也可以是绝对路径),open方法并不会真正发送请求,而只是启动一个请求已备发送。

  • send(data)

    接收作为请求主体发送的数据,如果不需要必须传入null,因为这个参数对有些浏览器是必要的。调用send后请求就会被分派到服务器。

  • XHR的属性

    在发送请求收到响应后,响应的数据会自动填充XHR对象的属性:

    • responseText:作为响应主体被返回的文本

    • responseXML:如果响应的内容类型是”text/xml“或”application/xml“,这个属性中将保存包含着相应数据的XML DOM文档。

    • status:响应的HTTP状态

    • statusText:HTTP状态的说明

    • readyState:表示请求/响应过程中的当前活动阶段,只要这个值发生变化都会触发一次readystatechange事件,因此可以利用这个事件监听异步请求后的响应结果是否可用。(=0表示尚未调用open;=1表示已调用open但没调用send;=2表示已调用send但未收到响应;=3表示已接收到部分数据;=4收到全部响应并且数据可用)

      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(){ //在open前指定并用DOM0级保证浏览器兼容
      if(xhr.readyState == 4){
      if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
      console.log(xhr.responseText);
      console.log(xhr.response);
      }else{
      alert('request was unsuccessful:' + xhr.status);
      }
      }
      }
      xhr.open("GET", "http://127.0.0.1:3011", true);
      xhr.send(null);
    • abort:取消异步请求,会停止触发事件,不再允许访问任何与响应有关的对象属性(若访问可能会出错,最好将访问的语句放在try...catch语句中),并在终止请求后对XHR对象进行解引用操作。

HTTP头部信息

  • setRequestHeader(name, value) 自定义请求头部信息,在open之后send之前调用。
  • getResponseHeader(name) 取得相应的响应头部信息
  • getAllResponseHeaders() 取得一个包含所有头部信息的长字符串

GET请求

常用于向服务器查询某些信息,将查询的字符串追加到URL末尾以便将查询条件发给服务器(?name1=value1&name2=value2...)。

特别注意查询信息中的name和value值都必须使用encodeURIComponent()进行编码才能放到URL的末尾。

发送信息有限,因为URL有长度限制。

POST请求

常用于向服务器发送应该被保存的数据,POST请求主体可以包含非常多的数据,而且格式不限。

通过设置Content-Type头部信息表明发送的数据类型,规定数据的编码方式。

  • application/x-www-form-urlencoded;charset=utf-8

    表单形式的内容类型,body中的数据会以key=values的形式进行序列化,而这个编码的过程中,一些特殊符号会通过URL转码转成如4%D3%3F。。。等形式

  • application/json;charset=utf-8

    请求体里面显示的内容是一个标准的json串,而不会像经过URL转码后的数据那样

发送同样的数据,GET请求比POST快(GET有缓存,POST在真正接受数据之前会先将请求头发送给服务器进行确认,然后才真正发送数据)。


XMLHttpRequest2级

对XHR的进一步发展

FormData

序列化表单对象,使用FormData的方便之处体现在不比明确在XHR对象上设置请求头,XHR对象能够识别传入的数据类型是FormData的实例并配置适当的头部信息。

let data1 = new FormData(document.form[0]);  //接收表单元素,预先填入键值对

let data = new FormData();
data.append('name', 'simple') //用append方法添加键值对

timeout

xhr对象的timeout属性表示请求在等待响应多少毫秒后终止,并触发ontimeout事件。设置为0表示不设置超时。

xhr.timeout = 1000; //1s
xhr.ontimeout = function(){
alert("Request did not return in a second.");
}

overrideMimeType(‘dataType’)

用于重写从服务器返回的响应MIME的类型

进度

  • xhr.onprogress 在接收响应期间不断触发,其事件对象event的target属性指向xhr对象,并且包含了三个属性:

    • lengthComputable:表示进度信息可否用的布尔值
    • position: 表示已经接收的字节数
    • totalSize: 表示根据Content-Length响应头部确定的预期字节数

    因此有以上的属性,可以创建一个等待响应的进度指示器了

    xhr.onprogress = function(event){
    var divStatus = document.getElementById("status");
    if(event.lengthComputable){
    divStatus.innerHTML = "Received " + event.position + "of" + event.totalSize + " bytes.";
    }
    }
  • xhr.upload.onprogress 监听POST请求体上传进度

    • event.loaded 已经发送的字节数
    • event.total 数据体总的字节数

其他类型的HTTP请求

  • HEAD 获取资源的头部

    和GET方法一样,只是不返回报文主体部分。资源网站 -> 资源服务器里面(查看是否有重复的资源/更新日期,是否存在请求的资源/URI有效性)
  • CONNECT 隧道通讯

    客户端 -> 服务端之间的数据通讯会建立一个通道进行传输,也就是加密 (SSL)

    https 其实就是披SSL外皮的http
  • PUT 发送文件

    类似FTP 的文件上传,不带验证机制因此存在安全性问题, REST架构设计才有可能使用
  • DELECT 删除文件,PUT相反的方法,同样不带验证机制存在安全隐患问题。
  • OPTIONS 询问请求,服务返回支持的请求类型 (GET,POST,HEAD)

前端知识点回顾之重点篇——AJAX的更多相关文章

  1. 前端知识点回顾之重点篇——CORS

    CORS(cross origin resource sharing)跨域资源共享 来源:http://www.ruanyifeng.com/blog/2016/04/cors.html 它允许浏览器 ...

  2. 前端知识点回顾之重点篇——ES6的Promise对象

    Promise Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异 ...

  3. 前端知识点回顾之重点篇——JavaScript异步机制

    JavaScript异步机制 来源:https://www.cnblogs.com/zhaodongyu/p/3922961.html JavaScript是单线程异步执行的,单线程意味着代码在任务队 ...

  4. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  5. 前端知识点回顾之重点篇——CSS中flex布局

    flex布局 来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 采用 Flex 布局的元素 ...

  6. 前端知识点回顾之重点篇——jQuery实现的原理

    jQuery jQuery的实现原理 参考:https://blog.csdn.net/zhouziyu2011/article/details/70256659 外层沙箱和命名空间$ 为了避免声明了 ...

  7. 前端知识点回顾之重点篇——ES6的async函数和module

    async函数 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是 Generator 函数的语法糖 什么是语法糖? 意指那些没有给计算机语言添加新功能,而只是 ...

  8. 前端知识点回顾之重点篇——ES6的Iterator和Generator

    Iterator 迭代器是一种接口.是一种机制. 为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). Iter ...

  9. 前端知识点回顾之重点篇——CSS中的BFC

    BFC布局(Block Formatting Contexts) 来源:https://www.cnblogs.com/lzbk/p/6057097.html 块级格式化上下文是页面中的一块渲染区域, ...

随机推荐

  1. C++ STL 之 deque容器 打分案例(内含sort排序用法)

    #include <iostream> #include <vector> #include <time.h> #include <deque> #in ...

  2. 介绍两个好玩的和Github相关的Chrome扩展

    1. Octotree 默认的github网页里的代码显示没有我们在IDE里看到的直观,即代码文件所在的文件夹无法以树形层级结构显示在屏幕左边. 安装Octotree之后: 方便多了. 2. Isom ...

  3. beego学习笔记一:创建第一个beego Web项目 转

    前提工作 环境搭建,可以参考如下两篇教程:搭建Go语言环境1搭建Go语言环境2 安装beego beego 的安装是典型的 Go 安装包的形式: go get github.com/astaxie/b ...

  4. python文件操作:字符编码与文件处理

    一.字符编码 二.文件处理 一.字符编码 储备知识点: 1. 计算机系统分为三层: 应用程序 操作系统 计算机硬件 2. 运行python程序的三个步骤 1. 先启动python解释器 2. 再将py ...

  5. linux——目录说明

    1)  bin -> usr/bin : 这个目录存放最经常使用的命令 2)  boot : 这个目录存放启动Linux时使用的一些核心文件,包括一些连接文件以及镜像文件 3)  dev: de ...

  6. PAT乙级1037

    题目链接 https://pintia.cn/problem-sets/994805260223102976/problems/994805284923359232 题解 还算简单,就是模拟我们在生活 ...

  7. mybatis的简单搭建和使用(一)

    前言 mybatis是一个持久层的框架,那么问题来了,什么是持久层的框架呢,持久层就是把数据持久化的保存到数据库中,这种过程一般叫数据持久化的过程,现为了程序员能够很方便的操作数据库,于是就出现持久层 ...

  8. P3377 【模板】左偏树(可并堆) 左偏树浅谈

    因为也是昨天刚接触左偏树,从头理解,如有不慎之处,跪请指教. 左偏树: 什 么是(fzy说)左偏树啊? 前置知识: 左偏树中dist:表示到右叶点(就是一直往右下找,最后一个)的距离,特别的,无右节点 ...

  9. 用JavaScript更新CSS变量

    HTML <div class="mover"></div> CSS .mover { width: 50px; height: 50px; backgro ...

  10. Python 字符串 (3) 持续更新

    字符串操作 虽然字符串也是一种序列,但是它和元组一样,不可变的.当你想对它修改时,会引发异常.如 >>> strings = "Let's go">> ...