ajax前后端交互原理（5）
5.ajax简介
5.1.什么是ajax
Asynchronous JavaScript and XML ,异步的javascript和XML
5.2.使用ajax有什么用
数据交互，可以从服务器获取到数据，也可以从前台把数据发送到后台服务器
5.3.如何使用ajax
5.3.1 ajax程序流程
ajax技术就相当于使用js引擎去模拟浏览器提交的行为，试想一下，如果要去访问一个网页要经历几个步骤？
1、打开浏览器
2、输入网址
3、回车提交 发送请求
4、等待服务器响应 返回内容
ajax技术使用js引擎去发送数据实际上也有以上几个步骤。
举个栗子： index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">获取数据</button>
<div id="box"></div>
<script>
var oBtn = document.getElementById('btn');
var oBox = document.getElementById('box');
oBtn.onclick = function () {
var xhr = new XMLHttpRequest();
xhr.open('get', '/getdata', true);
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200){
oBox.innerText = xhr.responseText;
}
}
}
</script>
</body>
</html>
下面是服务器端index.js代码：
var http = require('http');
var url = require('url');
var fs = require('fs');
var app = http.createServer(function (req, res) {
res.setHeader('content-type', 'text/html;charset=utf-8');
var url_obj = url.parse(req.url);
if(url_obj.pathname === '/'){
fs.readFile('./index.html','utf-8', function (err, data) {
if(!err){
res.write(data);
res.end();
}
})
}
// 处理ajax请求
if(url_obj.pathname === '/getdata'){
res.write('hello world');
res.end();
}
});
app.listen(3000);
ajax和form分布同后台交互图比较：
螺钉课堂视频课程地址：http://edu.nodeing.com
ajax前后端交互原理（5）的更多相关文章
- ajax前后端交互原理（1）
1.Node.js简介 1.1.前后台数据交互流程 在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首 ...
- ajax前后端交互原理（7）
7.ajax函数封装 7.1.实例引入 需求: 每秒钟请求一次服务器 获取到数据 实现: 把ajax进行封装 <!DOCTYPE html> <html> <head&g ...
- ajax前后端交互原理（6）
6.XMLHttpRequest对象 XMLHttpRequest 是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能.它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页 ...
- ajax前后端交互原理（3）
3.HTTP服务器 3.3.相关前置知识 1 什么是url? 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的UR ...
- ajax前后端交互原理（4）
4.JSON 4.1 什么是JSON? JavaScript 对象表示法(JavaScript Object Notation)简称JSON,是一种轻量级的数据交换格式.虽然它基于JavaScript ...
- ajax前后端交互原理（2）
2.NPM使用 2.1.NPM是什么 NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,这里要搞清楚包的概念,通俗的说,包就是具有一定功能的工具(软件),本质 ...
- thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- SSM-网站后台管理系统制作（4）---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
- JSON（及其在ajax前后端交互的过程）小识
一. json介绍 json是一种轻量级的数据交换格式,规则很简单: 并列的数据之间用逗号(,)分隔: 映射用冒号(:)表示: 并列数据的集合(数组)用方括号([])表示: 映射的集合(对象)用大括号 ...
随机推荐
- Rocket - tilelink - Parameters
https://mp.weixin.qq.com/s/1I6DcONr0Mg7xiX8F1C7SQ 简单介绍TileLink相关的参数实现(具体问题暂时不展开,后续用到时再做分析). ...
- Java实现 LeetCode 674 最长连续递增序列（暴力）
674. 最长连续递增序列 给定一个未经排序的整数数组,找到最长且连续的的递增序列. 示例 1: 输入: [1,3,5,4,7] 输出: 3 解释: 最长连续递增序列是 [1,3,5], 长度为3. ...
- Java实现 蓝桥杯VIP 算法提高 欧拉函数
算法提高 欧拉函数 时间限制:1.0s 内存限制:512.0MB 说明 2016.4.5 已更新试题,请重新提交自己的程序. 问题描述 给定一个大于1,不超过2000000的正整数n,输出欧拉函数,p ...
- Java实现 LeetCode 54 螺旋矩阵
54. 螺旋矩阵 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], [ 4, 5, 6 ], ...
- Java中环境变量PATH与CLASSPATH的区别
在安装JDK时需要添加环境变量,经常使用的环境变量有两个: PATH与CLASSPATH 下面总结一下环境变量的作用. PATH是系统用来指定可执行文件的完整路径.当在CMD中执行命令时,如果执行的可 ...
- java实现黄金队列
** 黄金队列** 黄金分割数0.618与美学有重要的关系.舞台上报幕员所站的位置大约就是舞台宽度的0.618处,墙上的画像一般也挂在房间高度的0.618处,甚至股票的波动据说也能找到0.618的影子 ...
- Java实现第十届蓝桥杯数列求值
试题 C: 数列求值 本题总分:10 分 [问题描述] 给定数列 1, 1, 1, 3, 5, 9, 17, -,从第 4 项开始,每项都是前 3 项的和.求 第 20190324 项的最后 4 位数 ...
- 运行ABP(asp.net core 3.X+Vue)提示'OFFSET' 附近有语法错误。 在 FETCH 语句中选项 NEXT 的用法无效。
创建ASP.NET Boilerplate,还原数据库和启动客户端 这里就略过,具体参考 ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) ASP.NET Boilerpl ...
- HttpUtil工具类，发送Get/Post请求，支持Http和Https协议
HttpUtil工具类,发送Get/Post请求,支持Http和Https协议 使用用Httpclient封装的HttpUtil工具类,发送Get/Post请求 1. maven引入httpclien ...
- mysql字符串类型（set类型）
集合 set 不定想项选 类似于 enum枚举,在定义时,也需要指定其已有值! 与字符串相比,优势是: 1, 也是采用 整数进行管理的!采用位运算,从第一位开始为1,逐一x2! 2, 每个集合类型8 ...