前端必会知识点-Ajax理论篇

前言

大家好，我是前端callback,临近过年了，最近有点时间，今天复习下ajax的理论知识吧，后面还会出实践篇。敬请期待！

Ajax理论篇

Asynchronous JavaScript And XML，异步JavaScript和XML技术。无需刷新当前页面即可从服务器获取数据的一种方法

工作原理

1. 创建XMLHttpRequest对象
2. XMLHttpRequest对象通过open()方法建立对服务器的调用、设置回调函数 、调用send()
3. 向web服务器发送请求
4. 服务器处理该请求
5. 服务器将响应发送回网页
6. 由JavaScript读取响应

XMLHttpRequest对象

1. 所有现代浏览器都支持 XMLHttpRequest 对象
2. XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面

创建XMLHttpRequest对象

1. 所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。创建 XMLHttpRequest 的语法是：variable = new XMLHttpRequest();

2. （过时技术，仅做了解）老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：variable = new ActiveXObject("Microsoft.XMLHTTP")

   注：为了应对所有浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，创建 XMLHttpRequest 对象，如果不支持，则创建 ActiveX 对象：

   var http = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

XMLHttpRequest 对象方法：

1. new XMLHttpRequest()：创建新的 XMLHttpRequest 对象
2. abort()：取消当前请求
3. getAllResponseHeaders()：返回头部信息
4. getResponseHeader()：返回特定的头部信息
5. withCredentials：用来指定跨域请求时，是否应带有用户信息（如Cookie和认证的HTTP头信息）。默认值是 false，即向 sample.com 发送跨域请求时，不会发送 sample.com 设置在本机上的 Cookie

6. open(method, url, async, user, psw) 前两个参数必填：

   1. method：请求类型 GET或POST
   2. url：表示请求的url
   3. async：true（异步）或 false（同步）
   4. user：可选的用户名称
   5. psw：可选的密码
7. send()：将请求发送到服务器，用于 GET 请求
8. send(string)：将请求发送到服务器，用于 POST 请求
9. setRequestHeader()：向要发送的报头添加标签/值对

XMLHttpRequest 对象属性：

1. onreadystatechange：定义当 readyState 属性发生变化时被调用的函数
2. readyState：保存 XMLHttpRequest 的状态。
   0：请求未初始化，open方法还未调用
   1：服务器连接已建立，send方式还未调用
   2：请求已收到，send方法已经被调用，响应头和响应状态已经返回
   3：正在处理请求，响应体下载中，responseText已经获取数据
   4： 请求已完成且响应已就绪，请求过程完毕

3. 响应

   1. status：响应的 HTTP 状态码
   2. statusText：响应的 HTTP 状态描述
   3. response ：响应的正文
   4. responseText：作为响应体返回的文本
   5. responseXML：如果响应的内容类型是 "text/xml"或 "application/xml"，那就是包含响应数据的 XML DOM 文档

   6. responseType: 返回响应数据的类型

      1. ""：当 responseType为空字符串时，与 text 相同，表示服务器返回文本数据。
      2. "arraybuffer"：表示服务器返回的是一个包含二进制数据的 ArrayBuffer 对象。
      3. “blob”：表示服务器返回的是一个包含二进制数据的 Blob对象。
      4. “document”：表示服务器返回的是一个 HTML Document 或 XML Document，这取决于接收数据的 MIME 类型。
      5. “json”：表示将接收到的服务器数据视为 JSON来进行解析并得到。
      6. “text”：表示服务器返回的是以 DOMString对象表示的文本。

结语

复习、总结常用的前端知识点。有兴趣的朋友可以一起学习、进步。