Ajax即“AsynchronousJavascriptAndXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML或者是HTML（标准通用标记语言的子集）。Ajax是一种用于创建快速动态网页的技术。Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。
工具/原料
电脑
前端编辑工具也可以是普通的文本编辑器
方法/步骤
1、第一步骤：知识准备。需要用到HTML，css，JavaScript，jquery引入jquery<scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>使用ajax技术实现局部的刷新。
2、第二步骤：代码实现。HTML布局需要展示的内容<divclass="蟠校盯昂div"稆糨孝汶;> <h1>最新天气实况<span>日期:<span></span></span> <selectid="select_city"> <optionvalue="101010100">北京</option> <optionvalue="101020100">上海</option> <optionvalue="101030100">天津</option> </select> </h1> <divclass="body"> <p>城市：<span></span></p> <p>天气：<span></span></p> <p>当前气温：<span></span></p> <p>风向：<span></span></p> <p>最高气温：<span></span></p> <p>最低气温：<span></span></p> <p>温馨提醒：<span></span></p> </div> <divclass="forword"> <h2>未来五天天气预报</h2> <p><span>日期</span><span>天气</span><span>最高气温</span><span>风力</span><span>最低气温</span><span>风向</span></p> <ul> </ul> </div></div>2.样式展示<style> p,ul{margin:0;padding:0;} .div{ width:50%; height:640px; margin:0auto; border:1pxsolid#f1f1f1; } .divh1{ width:100%; height:50px; background:#f1f1f1; line-height:50px; font-size:23px; text-indent:1.5em; } .divh1select{ float:right; margin-top:17px; } .divh1>span{ font-size:13px; color:#3a3939; } .div.bodyp{ width:50%; float:left; margin:10px010px0; text-indent:2em; } .divp:last-child{ width:100%;float:left; } .body{ overflow:hidden; } .forwordh2{ width:100%; height:50px; background:#f1f1f1; line-height:50px; font-size:23px; text-indent:1.5em; } .forwordp{ width:100%; height:50px; display:flex; } .forwordpspan{ flex:1; text-align:center; line-height:50px; border:1pxsolid#dddddd; } .forwordh2{ width:100%; height:50px; } .forwordli{ width:100%; height:50px; display:flex; } .forwordlispan{ flex:1; text-align:center; line-height:50px; border:1pxsolid#dddddd; }</style>2.3ajax异步调用刷新，局部天气展示数据。<script>$("#select_city").change(function(){ varcitykey=$(this).val(); $.ajax({ url:'http://wthrcdn.etouch.cn/weather_mini', type:'get', data:{ citykey:citykey }, dataType:'json', success:function(resp){ console.log(resp); vardate_data=resp.data.forecast[0].date; vardata_len=date_data.substr(0,3); vardata_len_day=date_data.substr(3,3); console.log(data_len_day); vardate1=newDate(); vardateMon=date1.getMonth()+1; vardateDay=date1.getDay(); $(".divh1spanspan").html(dateMon+'月'+data_len+""+data_len_day); $('.bodyp:first-childspan').html(resp.data.city); $('.bodyp:nth-child(2)span').html(resp.data.forecast[0].type); $('.bodyp:nth-child(3)span').html(resp.data.wendu+"℃"); $('.bodyp:nth-child(4)span').html(resp.data.forecast[0].fengxiang); $('.bodyp:nth-child(5)span').html(resp.data.forecast[0].high); $('.bodyp:nth-child(6)span').html(resp.data.forecast[0].low); $('.bodyp:nth-child(7)span').html(resp.data.ganmao); $('.forwordul').empty(); for(vari=0;i<resp.data.forecast.length;i++){ varstr=resp.data.forecast[i].fengli; varstr_fengli=str.substring(9,str.length-3) varforword_day="<li><span>"+dateMon+'月'+resp.data.forecast[i].date+"</span><span>"+resp.data.forecast[i].type+"</span><span>"+resp.data.forecast[i].high+"</span><span>"+str_fengli+"</span><span>"+resp.data.forecast[i].low+"</span><span>"+resp.data.forecast[i].fengxiang+"</span></li>"; $('.forwordul').append(forword_day); } } }) })$('#select_city').change();</script>
3、第三步骤：功能测试。3.1打开编辑的页面默认调用北京的天气查询3.2单击下拉框选择其它镰矽缠镖城市的天气，查询3.测试通过，天忻稿痞烁气显示出来。3.其它城市的天气code如下图所示：101010100北京101020100上海101030100天津101040100重庆101120101济南101090101石家庄101060101长春101050101哈尔滨101070101沈阳101080101呼和浩特101130101乌鲁木齐101160101兰州101170101银川101100101太原101110101西安101180101郑州101220101合肥101190101南京101210101杭州101230101福州101280101广州101240101南昌101310101海口101300101南宁101260101贵阳101250101长沙101200101武汉101270101成都101290101昆明101140101拉萨101150101西宁101340101台北县101320101香港101330101澳门
