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&¶m!=""){ 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;//输出内容
最终实现的效果图：
