学习目标:
熟练掌握jQuery,学习AJAX
学习内容:
1.了解AJAX
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
2.AJAX实例解释
上面的 AJAX 应用程序包含一个 div 和一个按钮。
div 部分用于显示来自服务器的信息。当按钮被点击时,它负责调用名为 loadXMLDoc() 的函数:
<html>
<body>
<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
接下来,在页面的 head 部分添加一个 <script>
标签。该标签中包含了这个 loadXMLDoc() 函数:
<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>
学习产出:
1.AJAX - onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status:200: “OK”;404: 未找到页面
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()//页面是否准备好
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
</body>
</html>
天气预报
<!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">
var xmlhttp = new XMLHttpRequest();
function Sousuo(){
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;
}
function show(e) {
if (e.keyCode == 13) {
Sousuo();
}
}
function showcitys(th){
var id = th.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) {
var jsonStr=xmlhttp.responseText;
var JsonObj=JSON.parse(jsonStr);
showData(JsonObj);
}
}
}
</script>
</head>
<body>
<div>
<h3>请输入城市:</h3>
城市:
<br>
<div class="wrap" id="app">
<div class="search_form">
<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>
</div>
<br>
<div id="box"></div>
</body>
</html>