AJAX
AJAX
AJAX = Asynchronous JavaScript and XML
(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
XMLHttpRequest
XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
XMLHttpRequest 对象的三个重要的属性:
1)onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
2)readyState:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
3)status :
200: “OK”
404: 未找到页面
AJAX实验(显示天气预报)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
//1.用户敲回车也可以进行搜索。
//2.把昨天的天气也展示出来
//3.给几个常见的城市,添加点击事件,直接请求天气。
//获取用户输入的城市
var xmlhttp = new XMLHttpRequest();
function Sousuo(){
//点击搜索框之后,获取用户输入的值city不可以放在函数外面做全局变量,因为一旦点击就执行函数,不去执行函数外面获取用户输入的值的代码。
var city=document.getElementById("cityname").value;
xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city="+city, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//xmlhttp.responseText; 接收后台响应的json数据
var jsonStr=xmlhttp.responseText;
var JsonObj=JSON.parse(jsonStr);
showData(JsonObj);
}
}
}
function showData(jsonObj){
var TianqiShow=document.getElementById("Tianqi");
var YesterdayObj=jsonObj.data.yesterday;
var liStr2=`<li v-for="item in weatherList">
<div class="info_type"><span class="iconfont">${YesterdayObj.type}</span></div>
<div class="info_temp">
<b>${YesterdayObj.low}</b>
~
<b>${YesterdayObj.high}</b>
</div>
<div class="info_date"><span>${YesterdayObj.date}</span></div>
</li>`;
//获取今天开始未来五天的信息数组
var arr=jsonObj.data.forecast;
var liStr1='';
//遍历数组 将五天内的信息拼接为字符串
for (var i = 0; i < arr.length; i++) {
var ele = arr[i];
liStr1 +=`<li v-for="item in weatherList">
<div class="info_type"><span class="iconfont">${ele.type}</span></div>
<div class="info_temp">
<b>${ele.low}</b>
~
<b>${ele.high}</b>
</div>
<div class="info_date"><span>${ele.date}</span></div>
</li>`;
}
//昨天的字符串与五天的字符串拼接后展示出来
TianqiShow.innerHTML=liStr2+liStr1;
}
//1.用户敲回车也可以进行搜索。
function show(e) {
if (e.keyCode == 13) {
Sousuo();
}
}
//3.给几个常见的城市,添加点击事件,直接请求天气。
//多个城市使用同一个函数,给多个城市设置不同id,根据id获取不同的城市名,来进行相应的操作
function showcitys(th){
var id = th.id;//获取当前对象的id
var city = document.getElementById(id).innerText;
xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city="+city, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//xmlhttp.responseText; 接收后台响应的json数据
var jsonStr=xmlhttp.responseText;
var JsonObj=JSON.parse(jsonStr);
showData(JsonObj);
}
}
}
</script>
</head>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<input type="text" id="cityname" class="input_txt" placeholder="请输入查询的天气" onkeypress="show(event)"/>
<button class="input_sub" onclick="Sousuo()" on>
搜 索
</button>
</div>
</div>
<ul class="weather_list" id="Tianqi">
</ul>
</div>
运行效果