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）的更多相关文章

  1. ajax前后端交互原理（1）

    1.Node.js简介 1.1.前后台数据交互流程 在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首 ...

  2. ajax前后端交互原理（7）

    7.ajax函数封装 7.1.实例引入 需求: 每秒钟请求一次服务器 获取到数据 实现: 把ajax进行封装 <!DOCTYPE html> <html> <head&g ...

  3. ajax前后端交互原理（6）

    6.XMLHttpRequest对象 XMLHttpRequest 是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能.它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页 ...

  4. ajax前后端交互原理（3）

    3.HTTP服务器 3.3.相关前置知识 1 什么是url? 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的UR ...

  5. ajax前后端交互原理（4）

    4.JSON 4.1 什么是JSON? JavaScript 对象表示法(JavaScript Object Notation)简称JSON,是一种轻量级的数据交换格式.虽然它基于JavaScript ...

  6. ajax前后端交互原理（2）

    2.NPM使用 2.1.NPM是什么 NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,这里要搞清楚包的概念,通俗的说,包就是具有一定功能的工具(软件),本质 ...

  7. thinkphp+jquery+ajax前后端交互注册验证

    thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  8. SSM-网站后台管理系统制作（4）---Ajax前后端交互

    前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...

  9. JSON（及其在ajax前后端交互的过程）小识

    一. json介绍 json是一种轻量级的数据交换格式,规则很简单: 并列的数据之间用逗号(,)分隔: 映射用冒号(:)表示: 并列数据的集合(数组)用方括号([])表示: 映射的集合(对象)用大括号 ...

随机推荐

  1. XStream学习手册

    ​​ 一.前言 1.XStream官网 http://x-stream.github.io 2.XStream是什么 XStream是一个简单的基于Java的类库,用来将Java对象序列化成XML(J ...

  2. Java实现 LeetCode 754 到达终点数字（暴力+反向）

    754. 到达终点数字 在一根无限长的数轴上,你站在0的位置.终点在target的位置. 每次你可以选择向左或向右移动.第 n 次移动(从 1 开始),可以走 n 步. 返回到达终点需要的最小移动次数 ...

  3. Java实现 蓝桥杯VIP 算法提高 3000米排名预测

    算法提高 3000米排名预测 时间限制:1.0s 内存限制:256.0MB 问题描述 3000米长跑时,围观党们兴高采烈地预测着最后的排名.因为他们来自不同的班,对所有运动员不一定都了解,于是他们分别 ...

  4. Java实现 LeetCode 51 N皇后

    51. N皇后 n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n,返回所有不同的 n 皇后问题的解决 ...

  5. java实现古堡算式

    ** 古堡算式** 福尔摩斯到某古堡探险,看到门上写着一个奇怪的算式: ABCDE * ? = EDCBA 他对华生说:"ABCDE应该代表不同的数字,问号也代表某个数字!" 华生 ...

  6. 仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时，才能为表'xxxx'中的标识列指定显式值

    执行以下sql INSERT INTO [Country] VALUES (, N'中国', N'China', N'CN'); 提示错误 仅当使用了列列表并且 IDENTITY_INSERT 为 O ...

  7. apollo与springboot集成实现动态刷新配置

    分布式apollo简介 Apollo(阿波罗)是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性. 本 ...

  8. Python实现海贼王的歌词组成词云图

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:一粒米饭 喜欢的朋友欢迎关注小编,除了分享技术文章之外还有很多福利, ...

  9. Myeclipse 2014 破解补丁以及Y2课件迅雷下载

    一. 在破解myeclipse2014之前,要先把环境变量配置好: 1)打开我的电脑--属性--高级--环境变量2)新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变 ...

  10. Java学习之第二天

    一.流程控制 1.顺序结构:自上而下,依次执行(从上到下,一直走下去) 2.选择结构:(1)if .if—else.嵌套if (2)switch(mod){ case 1:执行代码 case 2:执行 ...