AJAX
下面是来自百度百科的理解：
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
说话的方式简单点：就是Browser和Server之间通信的一种方式，发送以及请求数据的一种方式。
在AJAX出现之前：用户每次与server进行一次交互都需要进入一个新的页面。例如用户点击下一页按钮，会直接跳转页面，用户明明只需要一部分的数据，确需要重新向server请求整个页面的数据，那么很多数据是重复的相同的，造成了不必要的带宽浪费，对server压力也大。
AJAX 出现之后：用户点击下一页按钮，发起AJAX请求，只需要获取第二页的数据，然后修改页面局部的视图，OVER。其最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX优点：
1.无刷新更新数据。
无需重载整个页面，按需请求部分数据，节约带宽，减少服务器压力。
2.异步与服务器通信。
不会打断用户操作，有些用户只需要首屏的搜索功能，就不必等到页面全部加载完成。
提升浏览器渲染体验，用户会在server响应数据之前看到整个页面的大概框架以及结构。
其实目的也是为了体验好!体验好!体验好!
AJAX缺点：
1.浏览器的收藏功能在某些情况使用不便（用户想收藏第二页数据时）。浏览器的后退功能在某些情况使用不便（用户退回第一页时）。
2.AJAX的安全问题
AJAX相当于Browser和Server之间的一条通道，通过观察server的响应数据结构，在某些情况下回暴露出一些server的逻辑。黑客也可以模拟用户向Server发起请求，出现了诸如跨站点脚步攻击、SQL注入攻击等
Ajax原生js实现
最简单的实现方式：
var xhr = new XMLHttpRequest();
xhr.open('请求方式GET或者POST或者其他', 请求地址url, 是否开启异步async);
xhr.onreadystatechange = function() {
// readyState == 4说明请求已完成
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
if (method == 'POST') {
//给指定的HTTP请求头赋值
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
xhr.send()
目前已经有很多的工具（类库实现了AJAX的封装），只会用当然不行，我们需要详细的理解它的属性内容
为了钱
XMLHttpRequest的属性
-
onreadystatechange：值为一个
function，当readyState属性改变时会调用它 -
readyState：Http请求过程中的状态值，具体情况如下
| 状态值 | 描述 |
|---|---|
| 0 | 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 |
| 1 | open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 |
| 2 | Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。 |
| 3 | 所有响应头部都已经接收到。响应体开始接收但未完成。 |
| 4 | HTTP 响应已经完全接收。 |
- responseText：目前为止收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。
如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。
-
responseXML
对请求的响应，解析为 XML 并作为 Document 对象返回。 -
status
由服务器返回的 HTTP 状态代码，HTTP状态码整理。当 readyState 小于 3 的时候读取这一属性会导致一个异常。 -
statusText
这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。
XMLHttpRequest的方法
-
open(method,url,async)
初始化一个请求。
注意: 在一个已经激活的request下（已经调用open()方法的request）再次调用这个方法相当于调用了abort()方法。
| 参数 | 描述 |
|---|---|
| method | HTTP请求方式："GET", "POST", "PUT", "DELETE"等 |
| url | 请求路径 |
| async | 是否异步请求。值为布尔值，默认为true,如果值为false,则send()方法不会返回任何东西，直到接受到了服务器的返回数据。 |
-
abort()
取消当前响应，关闭连接并且结束任何未决的网络活动。
这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。 -
send(string)
发送 HTTP 请求。只有POST方式才传参，参数类型为字符串。GET方式参数跟在url上 -
setRequestHeader(header,value)
向一个打开但未发送的请求设置或添加一个 HTTP 请求(设置请求头)。
注意：POST请求一般情况下需要设置请求头
request对象.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
| 参数 | 描述 |
|---|---|
| header | 设置的请求头名称 |
| value | 对应的请求头的值 |
-
getAllResponseHeaders()
把 HTTP 响应头部作为未解析的字符串返回。
如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "\r\n" 隔开。 -
getResponseHeader(name)
返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。
试着封装一下
使用闭包来防止变量污染
const $ = (function() {
var name = 'jquery';
return {
ajax: function({
type,
url,
data,
isAsync,
success
}) {
if (!url) {
console.error('请输入请求地址')
return;
}
var xhr = new XMLHttpRequest();
// 处理data对象
var query = [],
queryData;
for (var key in data) {
// 默认encodeURIComponent一下
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
queryData = query.join('&');
if (type == 'GET') {
// get方式参数要跟在url上
url = url + '?' + queryData
}
// 默认使用GET,默认异步
xhr.open(type || 'GET', url, isAsync || true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 有传入success回调就执行
success && success(xhr.responseText);
}
}
if (type == 'POST') {
//给指定的HTTP请求头赋值
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// 数组转成字符串
xhr.send(queryData)
} else {
xhr.send()
}
}
}
})();
//类似jquery的使用方式
$.ajax({
type: 'POST',
url: 'https://web-api.juejin.im/gptzllpbev',
data: {
name: '嘻嘻'
},
success: function(res) {
console.log(res);
}
})
网友评论