AJAX异步交互:
01_什么是AJAX?
AJAX = 异步 JavaScript 和 XML。
也就是可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
02_AJAX操作步骤:
- 异步和同步:客户端和服务器端相互通信的基础上
- 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。
- 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
1.创建异步请求对象
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
2.向服务器发送请求
xmlhttp.open("GET", "https://autumnfish.cn/api/joke/list?num=10", true);
//发送请求
xmlhttp.send();
3.如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
4.服务器响应
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
//接收后台响应的JSON字符串
var jsonStr=xmlhttp.responseText;
alert(jsonStr);
var jsonObj=JSON.parse(jsonStr);
alert(jsonObj.msg);
}
}
02_DOM及AJAX天气预报案例
<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>天知道</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body οnkeypress="key(event)">
<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="city" name="mycity" value="" class="input_txt" placeholder="请输入查询的天气" />
<button class="input_sub" οnclick="sendAjax() " id="kypad">
搜 索
</button>
</div>
<div class="hotkey">
<a href="javascript:;" οnclick="Peking()" id="BJ">北京</a>
<a href="javascript:;" οnclick="shangHai()" id="SH">上海</a>
<a href="javascript:;" οnclick="GuangZhou()" id="GZ">广州</a>
<a href="javascript:;" οnclick="ShengZhen()" id="SZ">深圳</a>
</div>
</div>
<ul class="weather_list" id="myUL">
</ul>
</div>
</body>
</html>
<script type="text/javascript">
//创建Ajax请求对象
var xmlhttp = new XMLHttpRequest();
function sendAjax() {
//发送Ajax请求
//alert("发送请求");
var cityName = document.getElementById("city").value;
//alert(cityName);