- <!DOCTYPE html>
- <html>
- <head>
- <title > 封装 ajax</title>
- </head>
- <body>
- <!-- 05:59 ajax 下 -->
- <script type="text/javascript">
- function createXHR()
- {
- if(typeof XMLHttpRequest != "undefined")
- {
- return new XMLHttpRequest();
- }
- else if(typeof ActiveXObject != "undefined")
- {
- var versions = [
- "MSXML.2.XMLHttp.6.0",
- "MSXML.2.XMLHttp.3.0",
- "MSXML.2.XMLHttp"
- ];
- for(var i = 0; i<versions.length;i++)
- {
- try{
- return new ActiveXObject(version[i]);
- }catch(e){
- // 因类循环会报一个错, 跳过些错
- }
- }
- }
- else
- {
- throw new Error("你的系统或浏览器不支持 XHR 对象!");
- }
- }
- // 名值对转换字符串
- function params(data)
- {
- var arr = [];
- for(var i in data)
- {
- arr.push(encodeURIComponent(i)+"="+encodeURIComponent(data[i]));
- }
- return arr.join("&");
- }
- // ajax
- function ajax(obj)
- {
- var xhr=createXHR();
- obj.url=obj.url+"?rand="+Math.random()+"&"+params(obj.data);
- obj.data = params(obj.data);
- if(obj.method === "GET")
- {
- obj.url=obj.url+"&"+obj.data;
- }
- xhr.onreadystatechange = function()
- {
- if(xhr.readyState == 4)
- {
- if(xhr.status == 200)
- {
- obj.success(xhr.responseText)
- }
- else
- {
- console.log("错误码:"+xhr.status+"- 错误信息"+xhr.statusText);
- }
- }
- }
- xhr.open(obj.method,obj.url,obj.async);
- xhr.send(null);
- }
- // use ajax
- addEventListener("click",function(){
- ajax({
- method:"GET",
- url:"test.php",
- data:{
- "na&me":"ping",
- "age":18
- },
- // 将对象传到 text, 然后对象又回调
- success:function(text)
- {
- console.log("接收 success 数据为:"+text);
- },
- async:true
- });
- },false);
- </script>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2755830.html