码迷,mamicode.com
首页 > Web开发 > 详细

用原生JS写PHP里的Ajax

时间:2016-07-19 18:25:39      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:

 1 // 封装的 ajax网络请求函数
 2 // obj 是一个对象
 3 function AJAX(obj){
 4     // 1、创建 ajax 对象
 5     var ajaxObj = null;
 6     if (window.XMLHttpRequest) {
 7         ajaxObj = new XMLHttpRequest();
 8     }else{
 9         ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");;
10     }
11 
12     // 设置请求的类型
13     obj.type = obj.type.toUpperCase() || "GET";
14 
15     // 如果是get请求,并且需要传递参数,则需要给 url后面拼接参数
16     if (obj.type == "GET") {
17         var arr = []; // 定义数组,用于把对象存储到数据里面
18         for(var key in obj.data){
19             arr.push(key+"="+obj.data[key]);
20         }
21         // 用&分隔数组,让其转化为类似:name=gxm&age=18的形式
22         var str = arr.join("&");
23         obj.url = obj.url +"?"+str;
24             // 拨号
25         ajaxObj.open(obj.type,obj.url,true);
26         //2.1设置头文件
27         ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
28 
29 
30         // 发送"name=123&dad=131"
31         ajaxObj.send();    
32     }else{
33         var arr = []; // 定义数组,用于把对象存储到数据里面
34         for(var key in obj.data){
35             arr.push(key+"="+obj.data[key]);
36         }
37         // 用&分隔数组,让其转化为类似:name=gxm&age=18的形式
38         var str = arr.join("&");
39         ajaxObj.open(obj.type,obj.url,true);
40         ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
41         ajaxObj.send(str);
42     }
43 
44 
45     // 监听
46     // 
47     ajaxObj.onreadystatechange = function(){
48         if (ajaxObj.readyState == 4) {
49             if (ajaxObj.status >= 200 && ajaxObj.status < 300|| ajaxObj.status == 304) {
50                     // 请求成功
51                     console.log(ajaxObj.responseText)
52                     // obj.success(ajaxObj.responseText);
53             }else{
54                 // 请求失败
55                     obj.error(ajaxObj.status);
56             }
57 
58 
59         }
60     }
61 
62 
63 
64 
65 
66 }

 

用原生JS写PHP里的Ajax

标签:

原文地址:http://www.cnblogs.com/PowellZhao/p/5685445.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!