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>
