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技术详解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技术
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 2842
AJAX 1.什么是AJAX？ AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。 对AJA
前端必看之AJAX功能原理详解篇
洛阳泰山的博客
08-08 5507
AJAX AJAX全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。 它并不是JavaScript的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形 成的结合体。使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户 体验。 一．Ajax概述 Ajax这个概念是由Jesse James Garrett在2005年发明的。它本身不是单一技术，是...
Ajax是什么？Ajax的作用和使用
qq_42822993的博客
09-15 2万+
Ajax是什么？Ajax的作用和使用 一、Ajax是什么？ ​         Ajax是一种使用现有技术集合，技术内容包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 ​         用于浏览器与服务器之间使用异步数据传输(HTTP
AJAX技术详解
最新发布
weixin_54104864的博客
07-24 169
AJAX全称Asynchronous JavaScript and XML,即“异步的JavaScript和XML”。它代表了一种创建交互式网页应用的网页开发技术。使用AJAX,浏览器可以与服务器进行异步数据通信,实现异步更新页面。这意味着可以在不重新加载整个页面的情况下,对页面的某部分进行更新。
Ajax技术详解
02-04
Ajax技术的发展也带来了新的变种，如jQuery的$.ajax()方法和Fetch API，它们提供了更简洁的API来处理Ajax请求。此外，随着WebSockets等实时通信技术的出现，Ajax也在逐渐演变，以适应不断变化的Web开发需求。 总的...
AJAX技术详解及应用
06-15
在AJAX技术的支持下，用户可以实时验证其登录信息，而无需跳转至新页面或等待整个页面重新加载。以下是如何实现这一功能的概述： 19.2.1 原理分析 - 当用户在用户名文本框失去焦点时，JavaScript函数`loginCheck()...
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解（学习总结---从入门到深化）
07-10 1656
Ajax技术【Ajax技术详解、Ajax 的使用、Ajax请求、JSON详解、JACKSON 的使用】(一)-全面详解（学习总结---从入门到深化）
ajax技术简介
07-23
主要介绍了AJAX技术的发展史，工作原理，优缺点及其发展前景，仅供参考，谢谢！
Ajax技术快速入门--精通
05-23
详细介绍了Ajax技术 简单的实例 让你快速精通Ajax技术
AJAX技术介绍 教你入门
12-10
适用的AJAX技术介绍 教你入门 没有最好 只有更好
AJAX技术
长弓晗炅的博客
07-07 136
1、ajax技术的使用是为了不浪费网络资源，在保持页面不动的情况下，执行局部刷新。不适用JSP进行页面请求，而是采用JS技术进行交互，在不返回整个页面的情况下，只返回需要更新的数据。 ajax技术的过程： var 请求 = new XMLHttpServlet(); 请求.onreadystatechange = function() { if(请求 == 4){ var returnData = 请求.responseText; //返回的需要更新的数据 } } 状
什么是Ajax？
热门推荐
PIKapikaaaa的博客
05-22 4万+
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。 Ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页
什么是Ajax技术，致力于解决什么场景？
hxuans的博客
01-12 110
什么是Ajax技术，致力于解决什么场景？
ajax最核心的技术,Ajax技术的核心以及方法属性
weixin_35887222的博客
08-05 965
这次给大家带来Ajax技术的核心以及方法属性，使用Ajax技术核心以及方法属性的注意事项有哪些，下面就是实战案例，一起来看一下。一、什么是AjaxAjax英文全称为“ Asynchr JavsScript and XML”(异步的JavaScript和XML)，是一种创建交互式网页的开发技术。二、Ajax技术的核心Ajax是一系列相关技术的融合，其核心包括XMLHttpRequest、JavsSc...
AJAX技术介绍(什么是AJAX?)
FG2006的专栏
09-27 1613
 　一、AJAX开发者的最新工具和技术　　基于XML的异步JavaScript，简称AJAX，是当前Web创新（称为Web2.0）中的一个王冠。感谢组成AJAX的各种技术，Web应用的交互如Flickr, Backpack和Google在这方面已经有质的飞跃。这个术语源自描述从基于网页的Web应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务
Ajax原理
kou2796506061的博客
11-19 1万+
1、Ajax的原理就是:通过javascript的方式，将前台数据通过xmlhttp对象传递到后台，后台在接收到请求后，将需要的结果，再传回到前台，这样就可以实现不需要页面的回发，页是数据实现来回传递，从页实现无刷新 2、Ajax的原理简单来说，实际上就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面 3、这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解 总结：我们
AJAX技术详解与应用
本文主要探讨了AJAX技术，这是一种用于创建交互式和响应式Web应用程序的技术。AJAX全称为"Asynchronous JavaScript and XML"，由Jesse James Garrett在2005年2月提出，它通过结合多种技术，如XHTML、CSS、DOM、XML、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

picacho_pkq

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

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

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

打赏作者

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

抵扣说明：

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

余额充值