什么是AJAX
ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),
也就是无刷新数据读取。
http 请求
首先需要了解 http 请求的方法(GET 和 POST)。
GET 用于获取数据。GET 是在 URL 中传递数据,它的安全性低,容量低。
POST 用于上传数据。POST 安全性一般,容量几乎无限。
ajax 请求
ajax 请求一般分成 4 个步骤。
- 创建 ajax 对象
在创建对象时,有兼容问题:
var oAjax = new XMLHttpRequest(); //for ie6 以上
var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //for ie6
//合并
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
- 连接服务器
在这里会用到 open() 方法。启动一个请求以备发送。open() 方法有三个参数,
- 第一个参数是连接方法即 GET 和 POST,
- 第二个参数是 URL 即所要读取数据的地址,
- 第三个参数是否异步,它是个布尔值,true 为异步,false 为同步。
oAjax.open('GET', url, true);
在open()之后、send()之前可以修改HTTP请求头信息,建议不要改变浏览器默认设置的信息,可以增加
自定义的数据
oAjax.setRequestHeader('myId','001');
//查看responseHeader
oAjax.getResponseHeader('content-type');
oAjax.getAllResponseHeaders()
-
发送请求
send() 方法。
oAjax.send(null); //如果不需要传送数据,则必须放置null。因为部分浏览器要求必须要加null。
如果您希望通过 GET 方法发送信息,请向 URL 添加信息
但是url加的查询字符串必须使用 encodeURICompent()进行编码才能加入。function addURLParam(url,name,value) { url+=(url.indexOf("?")==-1)?"?":"&"; url+=encodeURIComponent(name)+"="+encodeURIComponent(value); return url; }
将请求发送到服务器。
string:仅用于 POST 请求oAjax.send('fname=Bill&lname=Gates);
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。
然后在 send() 方法中规定您希望发送的数据(表单数据封装格式和GET提交数据格式相同):oAjax.send($('#myform').serialize());
xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");
send()请求是同步的,意味着后续的js代码必须等到服务器响应之后才继续执行。所以在收到响应后,
响应的数据会自动填充到XHR对象的属性。 -
接收返回值
XHR对象接受的属性有:
- responseText
- responseXML 如果响应的内容类型是"text/xml"或"application/xml",则该属性值为XML DOM文档。
- status
- statusText
onreadystatechange 事件。当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState:请求状态,返回的是整数(0-4)。
0(未初始化):还没有调用 open() 方法。
1(载入):已调用 send() 方法,正在发送请求。
2(载入完成):send() 方法完成,已收到全部响应内容。
3(解析):正在解析响应内容。
4(完成):响应内容解析完成,可以在客户端调用。
status:请求结果,返回 200 或者 404。
200 => 成功。
304 => 请求的资源并没有被修改,可以直接使用浏览器中缓存的版本。
404 => 失败。
responseText:返回内容,即我们所需要读取的数据。需要注意的是:responseText 返回的是字符串。
oAjax.onreadystatechange=function(){ if(oAjax.readyState==4){ if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){ fnSucc(oAjax.responseText); }else{ if(fnFaild){ fnFaild(); } } } };
XMLHttpRequest 2
-
formdata
var form=$('#myform')[0]; var formdata=new FormData(form); formdata.append('from','lzhan.com'); formdata.set('from','163.com'); console.log(formdata.get('from')); console.log(formdata.get('id')); formdata.forEach(function (value,key) { console.log(value); })
-
超时设定
oAjax.timeout=3000; oAjax.ontimeout=function () { };
-
下载进度事件
var pro=document.querySelector('#loadProgress'); oAjax.onprogress=function (e) { pro.setAttribute('max',parseInt(e.totalSize)); if(e.lengthComputable){ pro.setAttribute('value',e.position); } }
progess事件会在接受数据期间周期性触发。