学习周记8

最新推荐文章于 2024-08-08 17:09:09 发布

SZX33

最新推荐文章于 2024-08-08 17:09:09 发布

阅读量73

点赞数

分类专栏：笔记文章标签： ajax

本文链接：https://blog.csdn.net/weixin_46353089/article/details/116748909

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习目标：

熟练掌握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>

在这里插入图片描述

SZX33

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习周记8

学习目标：熟练掌握jQuery，学习AJAX学习内容：1.了解AJAXAJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。2.AJAX实例解释上面的 AJAX 应用程序包含一个 div 和一个按钮。div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDo
复制链接

扫一扫