原生js写ajax请求(兼容各主流浏览器)_蓝戒的博客


原生js写ajax请求(兼容各主流浏览器)

1.创建XMLHttpRequest对象

[codesyntax lang="php"]

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; 
}

[/codesyntax]

 

2.get请求

[codesyntax lang="php"]

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);
}
}

[/codesyntax]

 

3.post请求

[codesyntax lang="php"]

               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");
                            }
                        }
                    }
                }
            }

[/codesyntax]

 

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——服务器产生内部错误、

//引用实例:

[codesyntax lang="php"]

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
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;  
             }
 wx.config({
    debug: false,
    appId: '{$signPackage.appId}',
    timestamp: {$signPackage.timestamp},
    nonceStr: '{$signPackage.nonceStr}',
    signature: '{$signPackage.signature}',
    jsApiList: [
        'onMenuShareTimeline',
        'onMenuShareAppMessage' 
    ]
  });
 wx.ready(function () {
	//监听“分享给朋友”
    wx.onMenuShareAppMessage({
      title: '清心丝络',
      desc: '清心丝络活动',
      link: 'http://www.zhubaotown.com/mobile/temporary_topics.php?from=friends_share&topic=pure_wire_network',
      imgUrl: 'http://www.zhubaotown.com/mobile/themes/miqinew/images/pure_wire_network/banner.jpg',
      success: function (res) {
		 var req = createXMLHTTPRequest();  
			if(req){  
				req.open("GET", "http://www.zhubaotown.com/mobile/temporary_topics.php?from=friends_share&topic=pure_wire_network", true);  
				req.onreadystatechange = function()
				{  
					if(req.readyState == 4)
					{  
						if(req.status == 200)
						{  
							//alert("success");  
						}else{  
							//alert("error");  
						}  
					}  
				}  
				req.send(null);  
		      }
		alert('很高兴,您已分享成功');
      },
      cancel: function (res) {
        alert('很遗憾,您已取消分享');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
	//分享到朋友圈
    wx.onMenuShareTimeline({

      title: '清心丝络',
      link: 'http://www.zhubaotown.com/mobile/temporary_topics.php?from=friends_share&topic=pure_wire_network',
      imgUrl: 'http://www.zhubaotown.com/mobile/themes/miqinew/images/pure_wire_network/banner.jpg',
      success: function (res) {
       var req = createXMLHTTPRequest();  
			if(req){  
				req.open("GET", "http://www.zhubaotown.com/mobile/temporary_topics.php?from=friends_share&topic=pure_wire_network", true);  
				req.onreadystatechange = function()
				{  
					if(req.readyState == 4)
					{  
						if(req.status == 200)
						{  
							//alert("success");  
						}else{  
							//alert("error");  
						}  
					}  
				}  
				req.send(null);  
		      }
       	alert('很高兴,您已分享成功');
      },
      cancel: function (res) {
         alert('很遗憾,您已取消分享');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
});
</script>

[/codesyntax]

本文固定链接: http://www.webzsky.com/?p=483 | 蓝戒的博客

cywcd
该日志由 cywcd 于2015年06月02日发表在 javascript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 原生js写ajax请求(兼容各主流浏览器) | 蓝戒的博客
关键字:

原生js写ajax请求(兼容各主流浏览器):等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×