Ajax的封装，以及利用jquery的ajax获取天气预报

1、Ajax的封装

 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型，第二个参数是传入open的url，第三个是用来操作post和get的参数，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//第四个参数是同步或异步，第五个是后台传过来的数据类型，第六个是对界面进行操作的函数
            var xml='';
            if(window.XMLHttpRequest){//这四行代码是用来兼容iE6的
                 xml=new XMLHttpRequest;
            }else{
                xml=ActiveXObject("Microsoft.XMLHttp");
            }
            if(type=='get'){//如果获取数据的方式为get则这个参数直接加到传入的url后面
                if(param&&param!=""){
                      url+="?"+param;
                }
            }
            xml.open(type,url,sync);//Ajax的第二个阶段
            if(type=="get"){//如果获取数据的方式是get则发送空
                send(null);
            }else{
                xml.setRequestHeader("Content-type","application/x-www-form-urlencode");//这两行代码是post的发送方式
                send(param);
            }
           if(sync==true){//如果是异步的情况
            xml.onreadystatechange=function(){//这是Ajax里面的回调函数
                if(xml.readystate==4){
                    if(xml.status==400){
                        var result="";
                        if(datetype=="json"){//如果传入数据的类型是json
                            result=xml.Responsetext;
                            result=JSON.parse(result);
                        }else if(datetype=='XML'){//如果传入数据的类型是xml
                            result=xml.ResponseXML;

                        }else{//如果传入的是普通数据
                            result=xml.Responsetext;
                        }
                    }
                }
                if(callback){//确定用户是否传入callback这个参数
                    callback(result);//这是对ajax解析的数据进行操作的函数
                }
            }
           }else{//如果是同步的话，ajax的回调函数就不能用，直接把回调函数的里面的代码放在后面就行。
            if(xml.readystate==4){
                    if(xml.status==400){
                        var result="";
                        if(datetype=="json"){//如果传入数据的类型是json
                            result=xml.Responsetext;
                            result=JSON.parse(result);
                        }else if(datetype=='XML'){//如果传入数据的类型是xml
                            result=xml.ResponseXML;

                        }else{//如果传入的是普通数据
                            result=xml.Responsetext;
                        }
                    }
                }
                if(callback){//确定用户是否传入callback这个参数
                    callback(result);//这是对ajax解析的数据进行操作的函数
                }
           }
        }

思考：这个封装函数还有什么缺点？

1、传入参数时太死板，必须都按照顺序无差错的传递。

2、没有默认的一些常用的参数，如果用户忘记传入参数了就会报错

如何解决？

很简单，只要把传入参数换成传入对象就完美的解决了问题一；

第二个问题只需要函数里面放一个默认的对象，然后用传入的对象覆盖它就好。

比如：

obj={//这个是用户传入的参数对象
            type:'get',
            datetype:'XML',
            url:'validate,php',
            sync:true,
            param:'usename='+usename
       }
         function ajax(obj){
            defaults={//这是那个默认的对象
               type:'get',//下面这几个都是比较常用的属性
               datetype:'json',
               url:'#',
              sync:true
        　　}
           //仔细看下面这行代码的意思，是obj中的属性覆盖到defaults中去。
           //1、如果一些属性只存在obj中，则会给defaults中增加属性。
           //2、如果obj的一些属性和defaults中的一些属性相同则obj会覆盖defaults中的，但是实际这些属性还是没变。
           //3、如果defaults中的属性存在而obj中不存在，则默认会保留哪些预定义属性
           for(var key in obj){
               defaults[key]=obj[key];
          }
        }
        

最终的封装方案：

function my_ajax(obj){//用户传入的对象
    var defaults={//函数内默认的对象
        type:'get',
        url:'#',
        data:{},
        success:function(data){}
    };
    for(var key in obj){//遍历用户的对象和默认对象相结合
        defaults[key]=obj[key];
    }
    var params='';//定义属性主要是为了给url后面加入要传递的参数
    for(var attr in defaults.data){//遍历用户传入的参数加到url后面
        params+=attr+'='+defaults.data[attr]+"&";
    }
    if(params){
        params=params.substring(0,params.length-1);//因为会多一个&，所以这行代码是为了去除这个&符号；
        defaults.url=defaults.url+"?"+params;

    }
    var script=document.createElement('script');
    script.src=defaults.url+"&callback=foo";//传入回调的函数名称
    window['foo']=function(data){//定义这个函数名称的函数
        defaults.success(data);//用户传入的函数

    }
    var head=document.getElementsByTagName('head')[0];
    head.appendChild(script);

}

2、JQuery里面的ajax

其实实际情况种很少用到自己封装的ajax函数，一般都是直接引用jquery里面封装的ajax()方法。

ajax()方法里面的参数有很多，我这里就不一一列举出来了，就拿一些比较常用的参数来说：

1、data

类型：String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

2、dataType

类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

• "xml": 返回 XML 文档，可用 jQuery 处理。
• "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
• "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
• "json": 返回 JSON 数据 。
• "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
• "text": 返回纯文本字符串

3、jsonp

类型：String

在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。

4、jsonpCallback

类型：String

为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。

5、success

类型：Function

请求成功后的回调函数。

参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

这是一个 Ajax 事件。

6、type

类型：String

默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

7、url

类型：String

默认值: 当前页地址。发送请求的地址。

以下用一个实际的例子来展现ajax的强大

实现查询天气预报：

1、先创建一个html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
　　　　
        #div{
            text-align: center;
            margin: 0 auto;
        }
        table{
            /* border:1px solid red; */
            margin: 0 auto;
            width: 600px;
            /* height: 1000px; */
            border-collapse: collapse;
            display: none;
        }
        table tr,th{
            width: 600px;
            height: 30px;
        }
        table td{
            background:rgb(173, 204, 233);
        }
        table th{
            background:rgb(55, 146, 231);
        }
        table tr ,td,th{
            border: 1px  solid rgb(21, 123, 219);
        }
    </style>

</head>
<body>
    <div id='div'>
        <h2>天气预报</h2>
        <p>
            <b>请输入要查询的城市：</b><input type='text' name='city' id='city'>
            <input type="button" id='btn' value="查询">
        </p>
        <table id="tab">
        </table>
    </div>
    <script>
                $(function(){
                $("#btn").click(function(){
                    var value=$("#city").val();//获取用户输入input标签里要查询的城市名称
                    $.ajax({
                        url: "./weather.php",//url地址指向
                        data:{//用户传入的数据
                            city:value
                        },
                        dataType:'json',//数据类型为json
                        success:function(data){//请求成功后的函数
                          var weather=data.result[0].future;
                          var length=weather.length;
                          var a="<tr ><th>时间</th><th>星期</th><th>白天</th><th>晚上</th><th>气温</th><th>风向</th></tr>";
                          for(var i=0;i<length;i++){

                            a+="<tr><td>"+weather[i].date+"</td><td>"+weather[i].week+"</td><td>"+weather[i].dayTime+"</td><td>"+weather[i].night+"</td><td>"+weather[i].temperature+"</td><td>"+weather[i].wind+"</td> </tr>";
                          }
                          document.getElementById('tab').innerHTML=a;
                          tab.style.display="block";
                        }
                    })
                });
            });

            </script>
</body>
</html>

2、创建url地址指向的php文件

<?php
//这个php文件是为了跨域从别的网站获取天气信息
    header('Content-type:text/plain;charset=utf-8');
    $ci=curl_init();//初始化
    $city=$_GET['city'];//接受从ajax()函数里date里面传来的数据
    $url="http://apicloud.mob.com/v1/weather/query?key=28ababecc964b&city=".urlencode("$city");//这个url是获取天气数据的一个接口
    curl_setopt($ci,CURLOPT_URL,$url);//设置选项
    curl_setopt($ci,CURLOPT_RETURNTRANSFER,1);//设置为将获取到的内容不显示在页面上
    $data=curl_exec($ci);//执行curl

    echo $data;//输出内容

最终实现的效果图：