1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>XMLHttpRequest 请求</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //使用http请求的步骤 10 //第一步：创建XMLHttpRequest对象 11 var request = function(){ 12 if(window.XMLHttpRequest === undefined){//在ie5和ie6中模拟XMLHttpRequest构造函数 13 window.XMLHttpRequest = function(){ 14 try{ 15 return new ActiveXObject("Msxml2.XMLHTTP.6.0"); 16 }catch(el){ 17 try{ 18 return new ActiveXObject("Msxml2.XMLHTTP.3.0"); 19 }catch(e2){ 20 throw new Error("出错了！"); 21 } 22 } 23 } 24 }else{ 25 return new XMLHttpRequest(); 26 } 27 } 28 //第二步：调用XMLHttpRequest对象的open()方法指定请求的两个必须部分，即方法和URL 29 /* 30 * 第一个参数指定http方法和动作 31 * 第二个参数指定是URL是请求的主题，当时跨域请求时会报错 32 * */ 33 request.open("GET", url); 34 35 /* 36 * 第三部：如果有请求头的话，请求进程下个步骤就是设计它 37 * 例如POST请求需要“Content-Type”头指定请求主题的MIME*/ 38 request.setRequestHeader("Content-Type", "text/Plain"); 39 40 /* 41 42 * 第四步：使用XMLHttpRequest发起http请求的最后一步是指定可选的请求主题并向 43 * 服务器发送它，使用send()方法*/ 44 request.send(null); 45 46 /*注意GET请求绝对没有主体，所以应该传递null或者省略这个参数 47 48 * POST请求通常拥有主体，同时它应该匹配使用setRequestHeader()指定Content-Type头 49 * http求情的顺序： 50 * 请求方法和URL首先到达，然后是请求头， 51 * 最后是请求主体*/ 52 53 //实例： 54 function postMessage(msg){ 55 var request = new XMLHttpRequest();//新请求 56 57 request.open("POST", "./log.php");//用post向服务器发送脚本 58 request.setRequestHeader("Content-Type", "text/Plain;charset=UTF-8");//纯文本请求体 59 request.send(msg); 60 } 61 62 /*解析http响应 63 * 当响应到达时，把它以解析后的XML document对象、解析后的json对象 64 * 或字符串形式传递给回调函数*/ 65 function get(url, callback){ 66 var request = new XMLHttpRequest();//新请求 67 68 request.open("GET", url); 69 request.onreadystatechange = function(){ 70 if(request.readyState === 4 && request.status === 200){ 71 var type = request.getResponseHeader("Content-Type");//获得响应类型 72 if(type.indexof("xml") !== -1 && request.responseXML){ 73 callback(request.responseXML);//document对象响应 74 }else if(type === "application/json"){ 75 callback(JSON.parse(request.responseText));//json响应 76 }else{ 77 callback(request.responseText);//字符串响应 78 } 79 } 80 } 81 request.send(null); 82 } 83 /* 84 * 表单编码请求 85 * 如果html表单的名/值对，使用application/x-www-form-urlencode格式*/ 86 function encodeFormData(data){ 87 if(!data){ 88 return "";//一直返回字符串 89 } 90 var pairs = []; 91 92 for(var name in data){ 93 if (!data.hasOwnProperty(name)) {//判断一个对象是否有你给出名称的属性或对象 94 continue; 95 } 96 if(typeof data[name] === "function"){ 97 continue; 98 } 99 100 var value = data[name].toString(); 101 name = encodeURIComponent(name.replace("%20", "+"));//编码名称 102 value = encodeURIComponent(value.replace("%20", "+")); 103 pairs.push(name + "=" + value); 104 } 105 return pairs.join('&'); 106 } 107 108 /* 109 *使用表单编码数据发起一个http post请求*/ 110 function postData(url, data, callback){ 111 var request = new XMLHttpRequest();//新请求 112 request.open("POST", url);//用post向服务器发送脚本 113 114 request.onreadystatechange = function(){ 115 if(request.readyState === 4 && callback){ 116 callback(request);//调用回调函数 117 } 118 }; 119 120 request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//纯文本请求体 121 request.send(encodeFormData(data));//发送表单编码的数据 122 } 123 124 /* 125 *使用表单编码数据发起一个http get请求*/ 126 function postData(url, data, callback){ 127 var request = new XMLHttpRequest();//新请求 128 request.open("GET", url + "?" + encodeFormData(data));//用post向服务器发送脚本 129 130 request.onreadystatechange = function(){ 131 if(request.readyState === 4 && callback){ 132 callback(request);//调用回调函数 133 } 134 }; 135 136 request.send(null);//发送表单编码的数据 137 } 138 139 /* 140 *使用json编码的请求*/ 141 function postData(url, data, callback){ 142 var request = new XMLHttpRequest();//新请求 143 request.open("POST", url);//用post向服务器发送脚本 144 145 request.onreadystatechange = function(){ 146 if(request.readyState === 4 && callback){ 147 callback(request);//调用回调函数 148 } 149 }; 150 151 request.setRequestHeader("Content-Type", "application/json");//纯文本请求体 152 request.send(JSON.stringify(data));//发送表单编码的数据 153 } 154 155 /* 156 *使用xml编码的请求*/ 157 function postQuery(url, what, radius, callback){ 158 var request = new XMLHttpRequest();//新请求 159 request.open("POST", url);//用post向服务器发送脚本 160 161 request.onreadystatechange = function(){ 162 if(request.readyState === 4 && callback){ 163 callback(request);//调用回调函数 164 } 165 }; 166 167 var doc =document.implementation.createDocument("", "query", null); 168 var query = doc.documentElement; 169 var find = doc.createElement("find"); 170 query.appendChild(find); 171 find.setAttribute("zipcode", where); 172 find.setAttribute("radius", radius); 173 find.appendChild(doc.createTextNode(what));//并设计<find>的内容 174 175 //向服务器发送XML编码数据 176 //注意将自动设置content-type头 177 request.send(doc);//发送表单编码的数据 178 } 179 180 /* 181 182 * 使用http post请求上传文件 183 * 查找有data-uploadto属性的全部<input type="file">元素 184 * 并注册onchang事件处理程序 185 * 这样任何选择的文件都会自动通过post方法发送到指定的"uploadto" url 186 * 服务器的响应式忽略的*/ 187 188 window.onload = function(){ 189 var elts = document.getElementsByName("input"); 190 191 for(var i=0; i<elts.length; i++){ 192 var input = elts[i]; 193 194 if(input.type != "fild"){ 195 continue; 196 } 197 198 var url = input.getAttribute("data-uploadto");//获取上传URL 199 200 if(!url){ 201 continue; 202 } 203 204 input.addEventListener("change", function(){ 205 var file = this.files[0]; 206 207 if(!file){ 208 return; 209 } 210 211 var xhr = new XMLHttpRequest();//新请求 212 213 xhr.open("POST", url);//用post向服务器发送脚本 214 xhr.send(file); 215 }, false) 216 } 217 218 } 219 </script> 220 </body> 221 </html>