HTML CSS JAVASCRIPT 学习周记第十一周

最新推荐文章于 2022-05-17 20:04:17 发布

猫猫狗狗www

最新推荐文章于 2022-05-17 20:04:17 发布

阅读量117

点赞数 1

文章标签： ajax

本文链接：https://blog.csdn.net/Catsdoge/article/details/117080832

版权

HTML CSS JAVASCRIPT 学习周记第十一周

AJAX

AJAX →Asynchronous JavaScript and XML
是一种使用现有标准的新方法。
有点难：在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
AJAX 应用：
1、运用 XHTML+CSS 来表达资讯；
2、运用 JavaScript 操作 DOM（Document Object Model）来执行动态效果；
3、运用 XML 和 XSLT 操作资料;
4、运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换；
5、注意：AJAX 与 Flash、Silverlight 和 Java Applet 等 RIA 技术是有区分的。

AJAX向服务器发送请求请求
通过open() 和 send() 方法向服务器发送请求

open(method,url,async)→open(请求的类型;GET 或 POST , 文件在服务器上的位置 , true（异步）或 false（同步）)

send(string)→send(仅用于 POST 请求)

//GET和POST的区别：
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
1）无法使用缓存文件（更新服务器上的文件或数据库）
2）向服务器发送大量数据（POST 没有数据量限制）
3）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
   var xmlhttp;
   	xmlhttp=new XMLHttpRequest();
   xmlhttp.onreadystatechange=function()
   {
   	if (xmlhttp.readyState==4 && xmlhttp.status==200)
   	{
   		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   	}
   }
   xmlhttp.open("GET","/try/ajax/demo_get.php",true);
   xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

onreadystatechange 事件
ORSC事件是什么：当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange事件readyState 属性存有 XMLHttpRequest 的状态信息。

☆ XMLHttpRequest 对象的三个重要的属性☆
onreadystatechange：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
==→0: 请求未初始化
==→1: 服务器连接已建立
==→2: 请求已接收
==→3: 请求处理中
==→4: 请求已完成，且响应已就绪
status：200: “OK” / 404: 未找到页面

AJAX ASP/PHP
下面的例子将为您演示当用户在输入框中键入字符时，网页如何与 web 服务器进行通信：请在下面的输入框中键入字母（A - Z）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    document.getElementById("txtHint").innerHTML="";
    return;
    xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<h3>在输入框中尝试输入字母 a:</h3>
<form action=""> 
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p> 

</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">
   	//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>

猫猫狗狗www

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS JAVASCRIPT 学习周记第十一周

**HTML CSS JAVASCRIPT 学习周记第十一周**AJAXAJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。天气预报<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content
复制链接

扫一扫