什么是AJAX?
Asynchronous JavaScript and XML (异步的javascript与XML);
AJAX 不是新编城语言,而是一种现有的新方法;
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
创建 XMLHttpRequest 对象;
if (window.XMLHttpRequest) //判断是否支持这个对象;
let variable=new XMLHttpRequest(); //通过内置对象创建;(用于和服务器交换数据)不支持IE5,IE6;
var variable =new ActiveXObject(); //适用于IE5,IE6;
设置请求头;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
向服务器发送请求;
xmlHttp.open('GET/POST', 'URL','Boolean 是否异步');
setRequestHeader(header,value) //使用post请求可以添加HTTP表头,然后在sand()方法中添加你希望发送的数据;
xmlhttp.send(string) //将请求发送到服务器; string 适用于post请求;
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
1,无法使用缓存文件(更新服务器上的文件或数据库)
2,向服务器发送大量数据(POST 没有数据量限制)
3,发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
配合ajax使用的事件;
onreadystatechange //每当 readyState 改变时,就会触发 onreadystatechange 事件;
onlond //页面预加载事件,
属性
readyState //表示服务器的状态; ==4表示数据可以被客户端使用;
status //==200表示此次请求成功;
responseText //获得字符串响应数据; 如果来自服务器的响应并非 XML,请使用 responseText 属性。
responseXML //获得 XML 形式的响应数据。
xmr.responseType //返回的类型;
xmr.responseURL //响应式url,实际是url在服务器中的位置;
XMLHttpRequest.DONE //表示常量请求成功返回4;
JSON数据请使用JSON.prase()转化为对象;
xhr.upload.onprogress =function(e){} //监听文件上传事件;(写出上传进度条)
e.total 文件的总大小
e.loaded 已经上传文件的大小
//在jquery中自定义的属性;
xhr:function(){
// 监听上传的进度,通过原生的ajax对象进行监听
var xhr = new XMLHttpRequest()
xhr.upload.onprogress = function (e) {
// onprogress 监听上传文件的事件
// 上传的过程有可能会多次上传,e对象包含total字段,文件总的大小,loaded: 167139已经加载过的资源大小
// loaded/total
var progress = (e.loaded / e.total)*100+"%"
// 把百分比赋值div
$(".progress>div").css("width",progress)
console.log(e)
}
// 把自定义的xhr对象返回,赋值给xhr配置项
return xhr
},