ajax的作用与用法

最新推荐文章于 2024-08-10 20:24:53 发布

xibozi

最新推荐文章于 2024-08-10 20:24:53 发布

阅读量215

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/xibozi/article/details/109752481

版权

笔记专栏收录该内容

56 篇文章 1 订阅

订阅专栏

Ajax入门与应用
从http协议开始
http协议是超文本传输协议，是简单可靠的互联网文件传输协议
输入网址并敲下回车
浏览器发出HTTP请求，请求服务器上的资源
服务器上的资源通过HTTP协议传输到本地，在浏览器中进行渲染
一次HTTP请求，分为请求和响应（请求：上行报文，响应：下行报文）
一张网页，可以产生多个HTTP请求
HTTP请求触发的条件
用户输入新的网址敲下回车
点击了超链接，使页面跳转
输入新的网址并敲下回车会使页面全部刷新
页面跳转也会使页面全部刷新
Ajax介绍
Ajax初体验
获取文件内容，（Ajax必须要有服务器端的支持，phpStudy）
在这里插入图片描述
Ajax 即“Asynchronous[英[eɪˈsɪŋkrənəs]] Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术

异步：

不阻塞后面代码的执行

所有的事件、setInterval、setTimeut都是异步执行的
Ajax中的异步详解
浏览器执行到Ajax代码语句的时候，发出了一个HTTP请求，去请求服务器上的数据。此时服务器开始响应，（数据读写等IO操作），这个数据读写是需要花费一定的时间的，所以不会立即响应请求，不会立即产生HTTP下行报文。
由于Ajax是异步的，所以本地的javascript不会停止，页面不会假死（等待服务器响应需要时间），但此时本地页面不会傻傻的等待下行HTTP报文，而是会继续执行后面的javascript语句
服务器响应结束，将下行的HTTP报文发送到本地，此时JS通过DOM操作改变页面内容。
同步：

阻塞后面代码的执行

<script type="text/javascript">
	function f1(){
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){
				console.log(xhr.responseText);
			}
		}
		xhr.open("get","01.php",false); // 没有同步
		xhr.send(null);
	}
	
	function f2(){
		console.log("f2");
	}

	f1();
	f2();
</script>

<?php 
	sleep(3); //sleep后面的参数是多少秒
	echo 't1 = '.mt_rand(1,999); //返回随机整数
 ?>

#定时器和事件的异步执行
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

<button id="btn">点击</button>
<script type="text/javascript">
	setTimeout(function(){
		console.log("我是计时器"); // 2
	},1000)
	var oBtn = document.getElementById("btn");
	btn.onclick = function(){
		console.log("我是事件");  // 3
	}
	console.log("计时器"); // 1
</script>	
</body>
</html>

js是单线程语言，浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让他们和别的任务一样，都老老实实的排队等待执行的话，执行效率会非常的低，甚至导致页面的假死。所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，浏览器事件触发线程，这些任务是异步的
说JavaScript是单线程运行的，那么XMLHttpRequest在连接后是否真的异步？其实请求确实是异步的!