重新复习下原生ajax,虽然工作中用jquery或者axios,但是基础的东西还是要了解的,我觉得工作中没人会去手写就是了2333
传统方法的缺点:
传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
什么是ajax
ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
对比下 GET 和 POST
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
同时,因为get直接拼在url上面,会有一些问题,能够发送的数据大小也有限制,并且涉及到一些敏感信息的时候还是用post好一点
五步使用法:
1.创建XMLHTTPRequest对象
2.使用open方法设置和服务器的交互信息
3.设置发送的数据，开始和服务器端交互
4.注册事件
5.更新界面
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readystate === 4) {
//xhr.readystate === 4 响应内容解析完成，可以在客户端调用了
if (xhr.status === 200) {
//xhr.status === 200 客户端的请求成功了
alert(xhr.responseText);
}
}
}
xhr.send(null);
ie大哥问题多,你需要兼容
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest() //IE7+
} else {
xhr = new ActiveXObject() //兼容IE6
}
open()接受3个参数method url aysnc ,即 请求方式、请求地址、是否异步请求,第三个参数默认为true 即使用异步方式
如果是post请求 需要设置请求头setRequestHeader()
setRequestHeader() 需要先open 然后再去设置请求头setRequestHeader()
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8')
form格式 'name=hyc&password=12345'
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8') //json格式 发送前 请JSON.stringify()
xhr.onreadystatechange = function() { //IE10+可以使用 onload
if (xhr.readystate === 4 && xhr.status === 200) {
console.log('请求成功:'++xhr.responseText) // 这里相当于jq 的success
} else {
console.log('请求失败:' + xhr.responseText) // 这里相当于jq 的error
}
}
var jsonData = JSON.stringify({ name: hyc, password: 123456 })
xhr.send(jsonData)
//提交的参数是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。
XMLHttpRequest对象还有2个方法
getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header") 返回指定首部的串值
下面附一个在stackoverflow的高分回答结合上面的代码，给出get和post的两种不同请求方法
var ajax = {};
ajax.x = function() {
if (typeof XMLHttpRequest !== 'undefined') {
return new XMLHttpRequest();
}
var versions = [
"MSXML2.XmlHttp.6.0",
"MSXML2.XmlHttp.5.0",
"MSXML2.XmlHttp.4.0",
"MSXML2.XmlHttp.3.0",
"MSXML2.XmlHttp.2.0",
"Microsoft.XmlHttp"
];
var xhr;
for (var i = 0; i < versions.length; i++) {
try {
xhr = new ActiveXObject(versions[i]);
break;
} catch (e) {}
}
return xhr;
};
ajax.send = function(url, method, data, success, fail, async) {
if (async === undefined) {
async = true;
}
var x = ajax.x();
x.open(method, url, async);
x.onreadystatechange = function() {
if (x.readyState == 4) {
var status = x.status;
if (status >= 200 && status < 300) {
success && success(x.responseText, x.responseXML)
} else {
fail && fail(status);
}
}
};
if (method == 'POST') {
x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
x.send(data)
};
ajax.get = function(url, data, callback, fail, async) {
var query = [];
for (var key in data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'GET', null, success, fail, async)
};
ajax.post = function(url, data, callback, fail, async) {
var query = [];
for (var key in data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
ajax.send(url, 'POST', query.join('&'), success, fail, async)
};
网友评论