ajax回顾
2016-12-26 本文已影响12人
雨中追燕
ajax优势
一次http请求对应一个页面
ajax,局部刷新页面，客户端（浏览器）就能与服务端进行通信
异步加载数据，无需切换页面
ajax请求过程：
- 创建XMLHttpRequest对象,也就是创建一个异步调用对象
- 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
- 设置响应HTTP请求状态变化的函数
- 发送HTTP请求
- 获取异步调用返回的数据
- 使用JavaScript和DOM实现局部刷新
js原生方法请求json数据:
网址：http://developer.baidu.com/map/carapi-7.htm
<select id="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
</select>
<div id="detail"></div>
<script type="text/javascript">
var city = document.getElementById('city');
var detail = document.getElementById('detail');
function addURI(url,name,value){
url += url.indexOf('?')==-1?'?':'&';
//encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
url += encodeURLComponent(name)+"="+encodeURLComponent(value);
return url;
}
city.onchange = function(){
//创建对象 兼容le
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
var url =addURI('weather.php','city',this.value);
xhr.onload = function(){
//状态码 status 200=ok 404="未找到"
if(xhr.status>=200&&xhr.status<300||xhr.status==304){
console.log(xhr.responseText);
//JSON.parse()方法将一个 JSON字符串解析成一个javascript值。
var res = JSON.parse(xhr.responseText);
//基于json数组
var today = res.results[0].weather_data[0];
console.log(today);
//定义一个变量储存输出
var html = "";
// for in 循环数组
for(var a in today){
html += today[a]+"<br>";
}
detail.innerHTML = html;
}else{
console.log('error='+xhr.status);
}
}
//响应 true（异步）或 false（同步）
xhr.open('get',url,true);
xhr.send(null);
}
</script>
php：
<?php
header('Content-Type:text/html;charset=utf8');
$city = $_GET["city"];
$url = "http://api.map.baidu.com/telematics/v3/weather?location=".$city."&output=json&ak=cTk2xI05KkdzSdC2oMqpu8WHX0puzdBo";
echo file_get_contents($url);
?>
jq ajax方法:
<body>
<input type="text" id="word">
<div id="detail"></div>
<script src="jquery-1.11.3.min.js" charset="utf-8"></script>
<script type="text/javascript">
var detail = document.getElementById('detail');
$("#word").on('input',function(){
$.ajax({
//请求地址
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+$(this).val()+'&json=1&cb=?',
type:'GET', //请求类型
dataType:'jsonp', //预期请求数据类型
success:function(res){
//成功的回调
console.log(res.s)
var xyy = res.s
var html ="";
for(var a in xyy){
html += xyy[a] + "<br>";
}
detail.innerHTML = html
},
error:function(err){
console.log(err)
}
})
})
</script>
</body>
