ajax技术详解

已于 2022-04-26 22:42:42 修改
阅读量4.3k 收藏 22
点赞数 3
分类专栏： 前端 文章标签： javascript ajax node.js
于 2022-04-26 22:23:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pikcacho_pkq/article/details/124429791
版权

1. 全局刷新与局部刷新

在B/S 结构的项目中， 浏览器端负责把用户的请求和参数通过网络发送给服务器,服务端负责接收请求，并将处理的结果返回给浏览器。浏览器端负责展示响应结果给用户。

全局刷新

由浏览器亲自向服务端发送请求协议包，接着由服务端直接将【响应包】发送到浏览器的内存中，这个行为导致浏览器内存中原有内容被覆盖掉；所以整个浏览器数据全部被刷新。

局部刷新

不是由浏览器发送请求给服务端，而是浏览器委托浏览器内存中一个脚本对象代替浏览器发送请求。这个行为导致服务端直接将【响应包】发送脚本对象内存中，所以是脚本对象内容被覆盖掉，但是此时浏览器内存中绝大部分内容没有收到任何影响。只会刷新局部的内容。

ajax技术就是一种局部刷新的技术。

2. 准备工作–搭建后端环境

使用ajax技术是需要有后端环境的，因此，在使用该技术之前需要搭建好后端环境；这里使用基于node.js的koa2框架来搭建后端环境。此处有基本的node.js的知识就可以较好地使用起来。

1.koa2框架是基于node.js的，所以需要确保自己的电脑里已经安装了node.js环境。

在这里插入图片描述

2.安装脚手架，用于快速构建koa2的初始环境
npm install -g koa-generator
3.创建koa2的初始项目
koa2 tencentsports
# 初始化依赖
cd tencentsports
npm i

在这里插入图片描述

4.启动koa2环境
npm run dev

在这里插入图片描述
前往浏览器输入localhost:3000，如果出现以下画面，说明koa脚手架已经运行成功了；这也就表示我们已经搭建好一个后端环境了。
在这里插入图片描述
接下来，我们打开项目文件，简单介绍一下项目构成。
在这里插入图片描述
启动该项目，就相当于运行了一个后端环境，下面简单的使用该项目完成一个请求到响应的过程。

  • 在public文件夹下添加静态资源，是可以是直接访问的。

在public文件夹下的image文件夹下放图片，可以直接通过浏览器访问查看。
在这里插入图片描述

  • 在public文件夹下创建html文件，同样可以直接访问。

在这里插入图片描述
在这里插入图片描述

  • 通过路由，映射请求

这种也是常规开发中最常见的形式。

// 这是测试方法，参照上面的形式即可
router.get('/test1', async (cxt, next) =>{
  cxt.body = '这是test1文件'
})

在这里插入图片描述
在这里插入图片描述
以上就是koa2的基本使用情况，想要详细了解该知识，可以参考官方网站koa官网

3. ajax基本使用

ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。

var xhr = new XMLHttpRequest();

xhr实例下的onload()事件，用于监听请求是否已经成功完成。

xhr.onload = function(){
	console("请求已经完成");
}

xhr实例创建成功后，使用open()和send()方法发出HTTP请求。

xhr.open('GET', 'http://localhost/test1', true);
xhr.send();

open(method, url, async)
参数说明：

  • method：请求类型；GET 或者 POST 等
  • URL：后端请求路径
  • async：true（异步）或者 false（同步）；默认是异步
前端代码：
var xhr = new XMLHttpRequest();

xhr.onload = function (){
	console.log('请求已经完成');
}

xhr.open('GET', '/test1', true);
xhr.send();

后端代码：
// 这是测试方法，参照上面的形式即可
router.get('/test1', async (cxt, next) =>{
  cxt.body = '这是test1文件'
})

在这里插入图片描述
可以看到发起了一个test1请求，以及对应的响应。
在这里插入图片描述
在这里插入图片描述
同理，POST请求操作基本一样。

前端代码：
var xhr = new XMLHttpRequest();

xhr.onload = function (){
	console.log('请求已经完成');
}

xhr.open('POST', '/test2', true);
xhr.send();

后端代码：
// 这是测试方法，参照上面的形式即可
router.POST('/test2', async (cxt, next) =>{
  cxt.body = '这是test2文件'
})

在这里插入图片描述

异步与同步

异步就是表示可以不用等待请求完成就可以执行下面的代码；而同步则相反，需要等待请求结束才能执行下面的代码。

  • 异步
var xhr = new XMLHttpRequest();
xhr.onload = function (){
	console.log('请求已经完成');
}
xhr.open('POST', '/test2', true);
xhr.send();
console.log('hello');

在这里插入图片描述
可以看到，hello在前面输出了；这就表示不用等待请求结束就可以输出后面的内容。

  • 同步
var xhr = new XMLHttpRequest();
xhr.onload = function (){
	console.log('请求已经完成');
}
xhr.open('POST', '/test2', false);
xhr.send();
console.log('hello');

在这里插入图片描述
可以看到，hello在后面输出了；这就表示需要等待请求结束才能输出后面的内容。

4. ajax请求-发送数据

4.1 GET请求发送数据

GET请求通过查询字符串参数的方式，把请求体中的内容传给后端，要求通过附加URL后面传输。

前端代码：
xhr.open('GET', 'http://localhost/test1?key=value&count=20'，true);
xhr.send();

后端代码：
// 这是测试方法，参照上面的形式即可
router.get('/test1', async (cxt, next) =>{
  console.log(ctx.request.query);
  cxt.body = '这是test1文件'
})

在这里插入图片描述

在这里插入图片描述
这里可以看到，koa2框架会自动处理GET请求传递过来的参数，真的是非常的方便啊。

4.2 POST请求发送数据

POST请求默认通过纯文本的方式把请求体内的内容传给后端，要求通过send()方法参数进行传输。

xhr.open('POST', 'http://localhost/test2'，true);
xhr.send('abcd');

注意：更常见的是 -> POST请求可以通过“名称/值”对的方式把请求体内容传给后端，要求通过setRequestHeader()方法进行设置。

前端代码：
xhr.open('POST', '/test2', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('key=value&count=20');

后端代码：
// 这是测试方法，参照上面的形式即可
router.post('/test2', async (cxt, next) =>{
  console.log(cxt.request.body)
  cxt.body = '这是test2文件'
})

在这里插入图片描述
在这里插入图片描述

5. ajax响应操作

5.1 响应字符串

返回从服务器接收到的字符串，该属性为只读，只有HTTP请求完成接收以后，该属性才会包含完整的数据。

if(xhr.status == 200){
	console.log(xhr.responseText);
}

前端代码：
var xhr = new XMLHttpRequest();

xhr.onload = function (){
	if(xhr.status == 200){
    	console.log(xhr.responseText);
   	}
    console.log('请求已经完成');
}
xhr.open('POST', '/test2', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('key=value&count=20');

后端代码：
// 这是测试方法，参照上面的形式即可
router.post('/test2', async (cxt, next) =>{
  console.log(cxt.request.body)
  cxt.body = '这是test2文件'
})

在这里插入图片描述

5.2 响应XML文档

responseXML响应XML文档，返回从服务器接收到的XML文档对象，该属性为只读。

例如返回的XML文档
<A>
	<B>
		<p>111</p>
		<q>222</q>
	</B>
	
	<B>
	</B>
</A>

if(xhr.status == 200){
	var xmlDoc = xhr.responseXMl;
	var firstB = xmlDoc.getElementsByTagName("B")[0];
	var text = firstB.getElementByTagName("p")[0].innerHTML;
}

和操作dom文档基本一样，比较繁琐，所以基本不用。

5.3 响应json数据（重点）

json(JavaScript Object Notation)是一种轻量级的数据交换格式。这种格式易于人们阅读，同时也易于机器解析。

// 单组json
{"username" : "1234", "password" : "1234"}
// 多组json
[
	{"username" : "1234", "password" : "1234"},
	{"username" : "qwer", "password" : "qwer"},
	{"username" : "asdf", "password" : "asdf"}
]
json规范：

1.key属性和字符串类型值，必须使用双引号
2.值的类型范围：string、number、object、array、boolean、null
3.最后一组“名称/值”对不能有逗号

解析json的方法
// 将json字符串解析为json对象
var json = '{"username" : "1234"}';
json = JSON.parse(json);
console.log(json.username);

// 将json对象转化为json字符串
console.log(JSON.stringify({"username" : "1234"}));

前端代码：
    var xhr = new XMLHttpRequest();

    xhr.onload = function (){
        if(xhr.status == 200){
            console.log(xhr.responseText);
            var json = JSON.parse(xhr.responseText);
            var name = json.list[0].username;
            console.log(name);
        }
        console.log('请求已经完成');
    }
    xhr.open('POST', '/test2', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('key=value&count=20');

后端代码：
// 这是测试方法，参照上面的形式即可
router.post('/test2', async (cxt, next) =>{
  // console.log(cxt.request.body)
  cxt.body = {
    "code" : 0,
    "msg" : "ok",
    "list" : [
      {"username" : "1234", "password" : "1234", "age" : 18},
      {"username" : "qwer", "password" : "qwer", "age" : 18}
    ]
  }
})

在这里插入图片描述

5.3.1 将json数据响应到页面
  • DOM方式

DOM是HTML文档的编程接口。DOM将文档解析为一个有节点和对象组成的结构集合，也叫DOM树。

前端代码：
    <table  border="1">
        <thead>
            <tr>
                <td>姓名</td>
                <td>密码</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
        
        </tbody>
    </table>

    var tbody = document.querySelector('tbody');

    var xhr = new XMLHttpRequest();
    xhr.onload = function (){
        if(xhr.status == 200){
            var json = JSON.parse(xhr.responseText);
            for(var i = 0; i < json.list.length; i++){
                var tr = document.createElement('tr');
                for(var attr in json.list[i]){
                    var td = document.createElement('td');
                    td.innerHTML = json.list[i][attr];
                    tr.append(td);
                }
                tbody.append(tr);
            }

        }
        console.log('请求已经完成');
    }
    xhr.open('POST', '/test2', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('key=value&count=20');

后端代码：
// 这是测试方法，参照上面的形式即可
router.post('/test2', async (cxt, next) =>{
  // console.log(cxt.request.body)
  cxt.body = {
    "code" : 0,
    "msg" : "ok",
    "list" : [
      {"username" : "1234", "password" : "1234", "age" : 18},
      {"username" : "qwer", "password" : "qwer", "age" : 18},
      {"username" : "asdf", "password" : "asdf", "age" : 20}
    ]
  }
})

在这里插入图片描述

  • 拼接模板字符串

模板字符串使用反引号（``）来代替普通字符串中的使用双引号和单引号，可以使用多行字符串和字符串插值操作。

var username = '1234';
var info = `my name is ${username}`;

    xhr.onload = function (){
        if(xhr.status == 200){
            var json = JSON.parse(xhr.responseText);
            tbody.innerHTML = json.list.map((v, i) =>{
                return `
                    <tr>
                        <td>${v.username}</td>
                        <td>${v.password}</td>
                        <td>${v.age}</td>
                    </tr>
                `;
            }).join('');

        }
        console.log('请求已经完成');
    }
  • 前端模板引擎

模板引擎可以让网站程序实现界面与数据分离，业务代码与逻辑代码分离，提高开发效率和代码复用性。

这里使用art-template前端模板引擎,详细使用参见其官网文档art-template官方文档

一般使用步骤：
1.下载template-web.js,放入自己的项目中，一般是javascript文件夹下
2.在自己的页面中使用< script >标签引入
3.定义一个 < script id = ‘name’ type=‘text/html’> 标签书写模板
4.使用模板引擎将数据与模板联系起来
5.将数据渲染到页面

<!-- 引入模板引擎js文件-->
<script src="javascripts/template-web.js"></script>

<!-- 自定义一个模板引擎解析标签，这里不是一个普通的script标签-->
<script id="tpl-tbody" type="text/html">
    {{each list}}
    <tr>
        <td>{{$value.username}}</td>
        <td>{{$value.password}}</td>
        <td>{{$value.age}}</td>
    </tr>
    {{/each}}
</script>

    xhr.onload = function () {
        if (xhr.status == 200) {
            var json = JSON.parse(xhr.responseText);
            tbody.innerHTML = template('tpl-tbody', json);

        }
        console.log('请求已经完成');
    }

在这里插入图片描述

6.发送json数据

GET请求是没办法发送json数据的，所以一般需要使用POST请求发送json数据。

POST请求通过修改请求头信息，进行json数据发送，通过setRequestHeader()方法进行设置。

    // 发送json数据
    xhr.open('POST', '/test2', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({"username" : "1234"}));

在这里插入图片描述
最后补充一点，ajax在jquery中的使用：

$.ajax({
	// 请求路径
	url: "/test",
	// 请求方式
	type: "POST",
	// 传递参数
	data: {
		name: "1224",
		age: 18
	},
	// 回调函数，成功时触发
	success: function(obj){
	    // 成功返回时的一系列操作
		console.log(obj);
	},
	// 回调函数，失败时触发
	error: function(obj){
	    // 失败时一系列操作
		console.log(obj);
	}
})

到这里，ajax技术的基本使用就已经介绍完毕了，接下来就是ajax的案例实战了。
demo源码下载地址：demo源码下载地址

picacho_pkq
关注
  • 3
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ajax知识整理
weixin_43992935的博客
04-22 438
一.认识Aajx 重要程度：***** 1.什么是Ajax 怎么读? 中文化：阿贾克斯 Ajax：Asynchronous javascript and xml，异步的js和xml。 是指一种创建交互式网页应用的网页开发技术。 Ajax，不是一个语言。是一系列技术的综合应用，（老技术，新应用）。 包括如下技术：  Html  Css  JavaScript  XMLHttpRequest对...
ajax 学习
野生码农
06-10 155
ajax 学习 1，是什么？ 一个page内，请求一份数据，不做跳转，前端向后端发送一个ajax请求。 2，前端怎么提交，后端怎么处理？ 3，怎么提交form 4，返回的数据怎么处理？ 5，数据返回，用json格式 JQuery中Ajax的操作完整例子 https://blog.csdn.net/qq_33714487/article/details/79112555 var configObj = { method //数据的提交方式：get和post url...
详解AJAX技术
a1782519342的博客
05-24 4304
1.为什么要用？ 在对接支付宝支付的时候需要在初始化的时候设置一个地址值，这个就是用于支付成功后跳转的地址值。 aliPayConfig.setReturnUrl("http://127.0.0.1"); 但是，在对接微信Native支付方式的时候，当扫码付款完成以后客户端并不会跳转，这时候需要AJAX技术来实现异步的刷新网页 2.什么是AJAX技术？ AJAX的全称是Asynchronous JavaScript and XML，意思就是异步的JavaScript和XML，用于快速创建动态的网
AJAX（详解）
冰霜的博客
09-11 2839
AJAX 1.什么是AJAX？ AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。 对AJA
什么是ajax技术
lwj734114646的专栏
07-14 1181
1.AJAX是指一种创建交互式网页应用的网页开发技术。 2.AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。 3.AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 4.传统的网页（不使用 AJAX）如果需要更新内容，必须重
ajax技术
weixin_58448088的博客
02-12 4929
1、ajax的五个步骤 2、封装一个简单的ajax请求 3、什么是回调地狱 4、promise、async和await语法的使用
Ajax技术
pan_junbiao的博客
04-03 3488
1、Ajax简介 随着Web2.0概念的普及，追求更人性化、更美观的页面效果成了网站开发的必须。Ajax正在其中充当着重要角色。由于Ajax是一个客户端技术，所以无论使用哪种服务器技术（如JSP、PHP、ASP.NET等）都可以使用Ajax。相对于传统的Web应用开发，Ajax运用的是更加先进、更加标准化、更加高效的Web开发技术体系。 1.1 Ajax开发模式与传统开发模式的比较 互联网发...
ajax技术详解demo源码
04-26
**Ajax技术详解** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。Ajax的核心是JavaScript对象...
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
01-21
本文实例讲述了javascript和 jQuery中的AJAX技术。分享给大家供大家参考，具体如下： 1.什么是AJAX？ AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发...
Ajax技术详解
02-04
Ajax技术的发展也带来了新的变种，如jQuery的$.ajax()方法和Fetch API，它们提供了更简洁的API来处理Ajax请求。此外，随着WebSockets等实时通信技术的出现，Ajax也在逐渐演变，以适应不断变化的Web开发需求。 总的...
AJAX技术详解及应用
06-15
在AJAX技术的支持下，用户可以实时验证其登录信息，而无需跳转至新页面或等待整个页面重新加载。以下是如何实现这一功能的概述： 19.2.1 原理分析 - 当用户在用户名文本框失去焦点时，JavaScript函数`loginCheck()...
Ajax技术概述
橘猫吃不胖的博客
02-24 1342
Ajax技术概述1 初识Ajax1.1 传统网站中存在的问题1.2 Ajax的工作原理1.3 同步处理与异步处理1.4 XMLHttpRequest对象2 Ajax基本实现步骤2.1 创建服务器2.2 配置Ajax对象2.3 获取服务器端的响应3 请求参数3.1 GET请求参数的传递3.2 POST请求参数的传递3.3 案例演示4 jQuery对Ajax的封装4.1 $.ajax()方法4.2 Ajax快捷方法4.3 Ajax辅助方法 1 初识Ajax 在传统网站中，网页无法实现局部更新，当用户刷新页面时，
Ajax原理
Youle-Rose记录一些学习前端的知识和遇到的难点
11-30 504
XML（异步的 JavaScript 和 XML）。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，对于改善用户的体验和页面性能很有帮助，Ajax的目的是提高用户体验，较少网络数据的传输量。同时，由于AJAX请求获取的是数据而不是HTML文档，因此它也节省了网络带宽，让互联网用户的网络冲浪体验变得更加顺畅。
Ajax技术简述
m0_53644435的博客
03-15 2355
Ajax：synchronous javascript and xml (异步javascript和xml) 它是浏览器提供的一套方法，可以实现压面无刷新更新数据，提高用户浏览网站应用的体验
Ajax技术简介
罗布泊coding
02-26 803
AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。 1、首现谈一下异步传输和同步传输。      异步传输是面向字符的传输。发送方可以在任意时候发送数据，但接收方不知何时到达，就类似于发短信。     同步传输是面向比特的传输。要求传收双方的时钟保持一致，就类似于打电话。 2、原理：通
什么是Ajax
yatum_2014的博客
04-17 1817
一：什么是Aj axAJAX即“ 异步JavaScript和XML ”（异步的JavaScript的与XML技术）的指的英文一套综合了多项技术的浏览器端的|网页开发技术。阿贾克斯概念的由杰西·詹姆士·贾瑞特所提出 。甲JAX 是（异步JavaScript和XML ）是异步的javaScript 和XML 。也就是异步请求更新技术。Ajax的是一种对现有技术的一种新的应用，不是一门新语言。它是用Ja...
Ajax（基本介绍+使用+示例代码+场景回放）
最新发布
weixin_45594172的博客
11-21 5849
Ajax（基本介绍+使用+示例代码+场景回放）

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

picacho_pkq

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值