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. FreeRTOS-为什么关中断之后切换进程？

    https://mp.weixin.qq.com/s/S5HBH3RTo0B2irr8sGwDdw   一. 基本问题   FreeRTOS会在关键区即taskENTER_CRITICAL()和tas ...

  2. Rocket - diplomacy - LazyModule

    https://mp.weixin.qq.com/s/FBU8fE4u9-UK6mRGQOlvbQ   介绍LazyModule的实现.     ​​   1. children   LazyModu ...

  3. 深入理解JVM(③)——之HotSpot虚拟机对象探秘

    前言 上篇文章介绍了Java虚拟机的运行时数据区域,大致明白了Java虚拟机内存模型的概况,下面就基于实用优先的原则,以最常用的虚拟机HotSpot和最常用的内存区域Java堆为例,升入探讨一下Hot ...

  4. Sched_Boost小结

    之前遇到一个耗电问题,最后发现是/proc/sys/kernel/sched_boost节点设置异常,一直处于boost状态.导致所有场景功耗上升. 现在总结一下sched_boost的相关知识. S ...

  5. Java实现蓝桥杯历届试题分考场

    历届试题 分考场 时间限制:1.0s 内存限制:256.0MB 提交此题 问题描述 n个人参加某项特殊考试. 为了公平,要求任何两个认识的人不能分在同一个考场. 求是少需要分几个考场才能满足条件. 输 ...

  6. Java实现 蓝桥杯VIP 算法提高 师座操作系统

    算法提高 师座操作系统 时间限制:1.0s 内存限制:256.0MB 问题描述 师座这天在程序设计课上学了指针和结构体以后,觉得自己可以轻松的写出操作系统,为了打败大微软帝国,他给这个系统起了个响亮的 ...

  7. Jmeter连接数据库进行参数化

    实际使用Jmeter进行性能测试或接口测试自动化过程中,很多场景需要从数据库中获取一些关键性参数,或进行一些断言,比较,那么如何进行数据库连接以及怎么获取参数就变得尤为重要 一.下载mysql驱动 1 ...

  8. win7 64位系统怎么使用debug

    安装DOSbox软件 下载个debug.exe然后把这放到D盘或E盘的根目录下 然后启动dosbox软件,在下面输入 mount c d:\ enter键 c: enter键 输入debug命令就ok ...

  9. 数据结构与算法-python描述-双向链表

    # coding:utf-8 # 双向链表的相关操作: # is_empty() 链表是否为空 # length() 链表长度 # travel() 遍历链表 # add(item) 链表头部添加 # ...

  10. k8s学习-存储

    4.6.存储 4.6.1.ConfigMap 创建方式 文件夹/文件创建 mkdir dir cd dir cat > c1.properties <<EOF c1.name=c1 ...