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;//输出内容

最终实现的效果图：