1.创建XMLHttpRequest对象
function createXMLHTTPRequest() { //1.创建XMLHttpRequest对象 //这是XMLHttpReuquest对象无部使用中最复杂的一步 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 var xmlHttpRequest; if (window.XMLHttpRequest) { //针对FireFox,Mozillar,Opera,Safari,IE7,IE8 xmlHttpRequest = new XMLHttpRequest(); //针对某些特定版本的mozillar浏览器的BUG进行修正 if (xmlHttpRequest.overrideMimeType) { xmlHttpRequest.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { //针对IE6,IE5.5,IE5 //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中 //排在前面的版本较新 var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ]; for ( var i = 0; i < activexName.length; i++) { try { //取出一个控件名进行创建,如果创建成功就终止循环 //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建 xmlHttpRequest = new ActiveXObject(activexName[i]); if(xmlHttpRequest){ break; } } catch (e) { } } } return xmlHttpRequest; }
2.get请求
function get(){ var req = createXMLHTTPRequest(); if(req){ req.open("GET", "http://test.com/?keywords=手机", true); req.onreadystatechange = function(){ if(req.readyState == 4){ if(req.status == 200){ alert("success"); }else{ alert("error"); } } } req.send(null); } }
3.post请求
function post(){ var req = createXMLHTTPRequest(); if(req){ req.open("POST", "http://test.com/", true); req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;"); req.send("keywords=手机"); req.onreadystatechange = function(){ if(req.readyState == 4){ if(req.status == 200){ alert("success"); }else{ alert("error"); } } } } }
post请求需要设置请求头
4. readyState与status:
readyState有五种状态:
0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法;
1 (载入):已经调用open() 方法,但尚未发送请求;
2 (载入完成): 请求已经发送完成;
3 (交互):可以接收到部分响应数据;
4 (完成):已经接收到了全部数据,并且连接已经关闭。
如此一来,你应该就能明白readyState的功能,而status实际是一种辅状态判断,只是status更多是服务器方的状态判断。关于status,由于它的状态有几十种,我只列出平时常用的几种:
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误