Ajax概述，运行原理，实现步骤

最新推荐文章于 2020-07-10 11:19:10 发布

咿呀咿呀咿呀哟

最新推荐文章于 2020-07-10 11:19:10 发布

阅读量345

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_44985985/article/details/106202237

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Ajax概述
Ajax:读音 [ˈeɪdʒæks] 中文读音：阿贾克斯

ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

比如有很多新闻页面，当页面被拉伸到底部时会出现加载更多数据按钮，当我们点击时就出现了更多数据，在呈现页面过程中，页面是没有刷新的，只是在原有的基础上出现了更多的数据。

Ajax运行原理

Ajax相当于浏览器发送请求与接受响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

Ajax的实现步骤

创建Ajax对象var xhr = new XMLHttpRequest();
告诉Ajax请求地址以及请求方式xhr.open(‘get’,’https://www.baidu.com’);
发送请求xhr.send();
获取服务端给予客户端的响应数据

xhr.onload =function() {

Console.log(xhr.reponseText);

}

Ajax实现举例

新建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		//1.创建ajax对象
		var xhr = new XMLHttpRequest();//利用XMLHttpRequest构造函数
		//2.告诉Ajax对象要想哪发送请求，以什么方式发送请求
		//第一个参数：请求方式，第二个参数：请求地址
		xhr.open('get','http://localhost:3000/first');
		//3.发送请求
		xhr.send();
		//4.获取服务器端响应到客户端的数据
		xhr.onload = function (){
			//xhr中有个responseText属性，保存的就是服务器端返回给客户端的数据
			//将值输出到控制台
			console.log(xhr.reponseText)
		}
	</script>
</body>
</html>

新建一个app.js文件

 //引入express框架
 const express = require('express');
 //创建web服务器
 const app = express();
 //服务器端接口
 app.get('/first',(req,res) =>{
  res.send('Ajax,ok')
  console.log('Ajax')
 });

 //监听端口
 app.listen(3000, () => {
    //控制台提示输出
    console.log('服务器启动成功');
 });