ajax的出现实现了前后端分离 记一些常用的ajax方法。
1、原生js实现全平台兼容XMLHttpRequest对象
function getXHR(){
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器暂不支持Ajax!");
}
}
}
return xhr;
}
2、ajax实现文件上传
<input type="file" id="in">
<script>
var input=document.getElementById("in");
formData=new FormData();
formData.append("file".input[0]);
var url="";
method="POST";
function ajax(url, method, data){
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器暂不支持Ajax!");
}
}
}
xhr.onerror = function(e){
console.log(e);
}
xhr.open(method, url);
try{
setTimeout(function(){
xhr.send(data);
});
}catch(e){
console.log('error:',e);
}
return xhr;
}
3、ajax请求图片
var xhr = new XMLHttpRequest(),
url = ".png";
xhr.open("GET", url);
xhr.responseType = "newimg";
xhr.onload = function(){
if(this.status == 200){
var newimg = this.response;
var img = document.createElement("img");
img.src = window.URL.createObjectURL(newimg);//这里blob依然占据着内存
img.onload = function() {
window.URL.revokeObjectURL(img.src);//释放内存
};
4、ajax请求文本
var xhr = new XMLHttpRequest();
xhr.open("GET","http://localhost:8080/Information/download.jsp?data=node-fetch.js");
xhr.responseType = "blob";
xhr.onload = function(){
if(this.status == 200){
var blob = this.response;
var reader = new FileReader();
reader.readAsBinaryString(blob);//该方法已被移出标准api,建议使用reader.readAsText(blob);
reader.onload=function(){
document.body.innerHTML = "<div>" + this.result + "</div>";
}
}
}
xhr.send();
未完待续。。。。