XMLHttpRequest

使用 XMLHttpRequest 对象可以和服务器进行交互,可以获取到数据,而无需让整个页面进行刷新.这样 web 页面可以做到只更新局部页面,降低了对用户操作的影响.

XMLHttpRequest 对象可以用于获取各种类型的数据,而不止是 xml,还支持 JSON,HTML 或者纯文本

本地服务器

let http = require("http");
let url = require("url"); const port = 3333; http.createServer((request, response) => {
response.setHeader("Access-Control-Allow-Origin", "*");
response.writeHead(200, { "Content-type": "text/html;charset=utf8" }); if (request.url !== "/favicon.ico") {
let pathname = url.parse(request.url).pathname;
pathname = pathname.replace(/\//, "");
if (pathname === "get_money") {
get_money(request, response);
}
response.end("\r\n钱给完了,没了", "utf-8");
}
}).listen(port); console.log(`本地服务器创建成功=>localhost:${port}`); function get_money(request, response) {
response.write("给了你666块钱", "utf-8");
}

安装个 node,跑在本地就行

status/readyState/onreadystatechange

  • onreadystatechange

    • 当 readyState 值变化时,会调用相应的处理函数
  • readyState
    • 0=>UNSENT=>XMLHttpRequest 代理被创建,但尚未调用 open() 方法
    • 1=>OPENED=>open() 方法已经被调用,可以通过 setRequestHeader() 方法来设置请求的头部, 可以调用 send() 方法来发起请求
    • 2=>HEADERS_RECEIVED=>send() 方法已经被调用,响应头也已经被接收
    • 3=>LOADING=>响应体部分正在被接收。如果 responseType 属性是 text 或空字符串, responseText 将会在载入的过程中拥有部分响应数据
    • 4=>DONE=>请求操作已经完成。这意味着数据传输已经彻底完成或失败
  • status
    • 在请求完成前,status 的值为 0.XMLHttpRequest 出错,浏览器返回的 status 也为 0
    • 如果服务器响应中没有明确指定 status 码,XMLHttpRequest.status 将会默认为 200
        var xhr = new XMLHttpRequest();

        console.log("open调用前的status", xhr.status); // open调用前的status 0
console.log("open调用前的readyState", xhr.readyState); //open调用前的readyState 0 xhr.open("GET", "http://127.0.0.1:3333/get_money", true); console.log("open调用后的status", xhr.status); //open调用后的status 0
console.log("open调用后的readyState", xhr.readyState); //open调用后的readyState 1 xhr.send(); console.log("send调用后的status", xhr.status); //send调用后的status 0
console.log("send调用后的readyState", xhr.readyState); //send调用后的readyState 1 xhr.onreadystatechange = function() {
console.log(xhr.status); //2,3,4
console.log(xhr.readyState); //200,200,200
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
}
};

readyState 代表 send()方法已经被调用,但是 send()之后 readyState 不一定就是 2

当服务器指定了 status,其实就是 http 的状态码

//node中writeHead修改一下
response.writeHead(404, { "Content-type": "text/html;charset=utf8" });

response/responseText/responseType

  • response

    1. 返回响应的正文
    2. 返回的类型可以是 ArrayBuffer,Blob,Document,Object,DOMString.这取决于 responseType 属性
    3. 请求尚未完成或未成功,则取值是 null
    4. 读取文本数据时如果将 responseType 的值设置成 text 或空字符串且当请求状态还在是 readyState (3) 时,response 包含到目前为止该请求已经取得的内容
  • responseText
    1. 返回一个 DOMString,包含对文本请求的响应,请求不成功或者请求尚未发送,返回 null
    2. 在请求完成之前将会得到部分属性
    3. 如果值不是 text 或者 string,responseType 将会抛出 InvalidStateError 异常
  • responseType
    1. responseType 属性是一个枚举类型的属性,返回响应数据的类型
    2. 设置为一个空字符串,它将使用默认的 text 类型
    3. 同步请求设置 responseType 会抛出一个 InvalidAccessError 的异常
    4. "","arraybuffer","blob","document","json","text"
        var xhr = new XMLHttpRequest();

        xhr.open("GET", "http://127.0.0.1:3333/get_money", true);

        xhr.onreadystatechange = function() {
console.log("readyState=>", xhr.readyState);
console.log("status=>", xhr.status);
console.log(xhr.response);
console.log(xhr.responseText);
}; xhr.send();

open 和 send

  • open(method,url,async,user,password)

    1. XMLHttpRequest 的 http 或者 https 的请求必须通过 open 来发起
    2. 必须要在 send 之前调用
    3. method('GET','POST','PUT','DELETE').url 请求地址.async 是否开启同步请求,默认 true,执行异步操作.用户名用于认证,默认 null.密码用于认证,默认 null
    4. 同步的请求会阻塞 js 执行,不需要调用 onreadystatechange 事件监听器
  • sendRequestHeader(header,value)
    1. 在 open() 方法和 send() 之间调用
    2. 多次对同一个请求头赋值,只会生成一个合并了多个值的请求头
  • send()
    1. 用于发送 http 请求,异步请求会在请求发送后立即返回,如果是同步请求,会在响应到达后才返回
    2. send()接收一个可选参数,作为请求主体.如果请求方法是 GET 或 HEAD,则将请求主体设为 null
    3. 发送二进制内容的最佳方法是结合 ArrayBufferView 或者Blobs
    4. 参数['null','ArrayBuffer','ArrayBufferView','Blob','Document','FormData','DOMString']

一个小案例

通过请求发送一个留言,通过 FormData 发送一个表单数据

        var xhr = new XMLHttpRequest();

        xhr.open("POST", "http://127.0.0.1:3333/add", true);

        var body = new FormData();

        body.append("oid", 8029794);
body.append("type", 1);
body.append("message", "本大王来巡山了");
body.append("plat", 1);
body.append("jsonp", "jsonp");
body.append("csrf", "af15b2a3a0e64a2ea304f885bea6bfd1"); xhr.send(body); xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.response);
}
};

为了安全,跨域 XHR 对象有一些限制:

  1. 不能使用 setRequestHeader() 设置自定义头部
  2. 不能发送和接收 cookie
  3. 调用 getAllResponseHeaders() 方法总会返回空字符串

属性

  • responseURL
  • responseXML
  • statusText
  • timeout
  • upload
  • withCredentials

方法

  • abort()
  • getAllReponseHeaders()
  • getResponseHeader()
  • overrideMimeType()

事件

  • loadstart
  • progress
  • abort
  • error
  • load
  • timeout
  • loadend
  • readystatechange

FormData

构造方法 XMLHttpRequest()

HTTP 响应代码

[JavaScript] XMLHttpRequest记录的更多相关文章

  1. Javascript知识点记录(三)设计模式

    Javascript设计模式记录,这个方面确实是没写过,工作中也没有用到js设计模式的地方. prototype与面向对象取舍 使用prototype原型继承和使用面向对象,都可以实现闭包的效果.那么 ...

  2. How to get blob data using javascript XmlHttpRequest by sync

    Tested: Firefox 33+ OK Chrome 38+ OK IE 6 -- IE 10 Failed Thanks to 阮一峰's blog: http://www.ruanyifen ...

  3. JavaScript学习记录四

    title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  4. JavaScript学习记录三

    title: JavaScript学习记录三 toc: true date: 2018-09-14 23:51:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  5. JavaScript学习记录二

    title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  6. JavaScript学习记录一

    title: JavaScript学习记录一 toc: true date: 2018-09-11 18:26:52 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  7. Javascript知识点记录(二)

    Javascript入门易,精通难,基本上是共识的一个观点.在这个篇幅里,主要对一些难点进行记录. 鸭子类型 Javascript属于动态类型语言的一种.对变量类型的宽容,给了很大的灵活性.由于无需类 ...

  8. 高性能javascript(记录一)

    脚本位置:将js脚本放置在body底部,由于脚本会阻塞页面渲染,导致明显延迟,通常表现为空白页面,用户无法游览页面的内容,也无法与页面进行交互.故因此推荐js脚本放在body底部,尽可能减少对整个页面 ...

  9. javascript知识点记录(1)

    javascript一些知识点记录 1.substring,slice,substr的用法 substring 和slice 都有startIndex 和 endIndex(不包括endInex),区 ...

随机推荐

  1. dva-counter

    dva实例Counter. import dva, { connect } from 'dva'; import { Router, Route } from 'dva/router'; import ...

  2. C++中_cplusplus及Extern "C"的理解

    一.意义 Extern "C":告诉编译器,这部分代码按C语言的方式进行编译,而不是C++的.   _cplusplus:.cpp文件默认定义的宏.用来判断是否为.cpp文件. 二 ...

  3. Android Stdio的问题

    昨天还是可以运行的,今天运行Android Studio,一直提示:Error running app: Instant Run requires 'Tools | android | Enable ...

  4. python3+redis问题求解

    学生管理系统   更新学生信息没做出来,找个大神补全下.谢谢. # 记录: # bug:操作后若退出需要两次退出才行. 待修复 # 下一步:链接redis进行使用. # 更新学生库信息 待完成 imp ...

  5. prototype 和 __proto__

    /* * 1.构造函数里有属性及方法----->其构造的实例对象直接通过new构造时获得这些属性和方法 * 2.构造函数里的原型prototype----->这个原型对象:包括1).原型对 ...

  6. Python爬虫学习之正则表达式爬取个人博客

    实例需求:运用python语言爬取http://www.eastmountyxz.com/个人博客的基本信息,包括网页标题,网页所有图片的url,网页文章的url.标题以及摘要. 实例环境:pytho ...

  7. Java开发面试题,3年工作经验的Java程序员面试经

    一.Java基础部分 1.使用length属性获取数组长度,public.private.protected.friendly区别 2.Collection和Collections区别 3.Strin ...

  8. Java 多线程开发之 Callable 与线程池

    前言 我们常见的创建线程的方式有 2 种:继承 Thread 和 实现 Runnable 接口. 其实,在 JDK 中还提供了另外 2 种 API 让开发者使用. 二.简单介绍 2.1 Callabl ...

  9. ubuntu18.04安装redis

    首先更新源 sudo apt-get update 安装命令: sudo  apt-get install redis-server 查看tcp 连接 netstat -ap | grep  6379 ...

  10. Git使用详细教程(4):git rm使用详解

    我们使用git rm 文件名来进行删除文件的操作. git rm index.php这个命令把工作区的index.php删除并暂存了. 如何撤回已暂存的删除命令? 上图中已经给出了提示,使用git r ...