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. [leetcode] 动态规划（Ⅰ）

    这次按通过率从高到低刷题. 本文完成的题目:{338, 1025, 303, 121, 53, 392, 70, 746, 198} ,带有「面试」Tag 的题目:Interview - {1617, ...

  2. 蓝桥杯（Java方法、详细解法分析）基础练习 阶乘计算

    问题描述 给定n和len,输出n!末尾len位. 输入格式 一行两个正整数n和len. 输出格式 一行一个字符串,表示答案.长度不足用前置零补全. 样例输入 6 5 样例输出 00720 数据规模和约 ...

  3. Java实现洛谷 P1873 砍树（StreamTokenizer+IO+二分）

    P1873 砍树 输入输出样例 输入 5 20 4 42 40 26 46 输出 36 PS: get新知识,以前只知道STringTokenizer并没有了解过StreamTokenizer,这次才 ...

  4. Java实现 LeetCode 335 路径交叉

    335. 路径交叉 给定一个含有 n 个正数的数组 x.从点 (0,0) 开始,先向北移动 x[0] 米,然后向西移动 x[1] 米,向南移动 x[2] 米,向东移动 x[3] 米,持续移动.也就是说 ...

  5. Java实现 LeetCode 316 去除重复字母

    316. 去除重复字母 给定一个仅包含小写字母的字符串,去除字符串中重复的字母,使得每个字母只出现一次.需保证返回结果的字典序最小(要求不能打乱其他字符的相对位置). 示例 1: 输入: " ...

  6. SQK Server实现 LeetCode 175 组合两个表

    175. 组合两个表 SQL架构 表1: Person +-------------+---------+ | 列名 | 类型 | +-------------+---------+ | Person ...

  7. Java实现 洛谷 P1115 最大子段和

    import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner scann ...

  8. Python基础语法之“print()”函数

    print()函数是Python入门的第一个必学知识点,它经常被用来调试已写的代码,检验效果,今天小老鼠就带你盘点一下print()函数在Python中如何使用. print()函数的工作流程是这样的 ...

  9. iOS－Code Data多线程的封装详解

    Code Data 的单例封装:      很容易发现,系统生成的模版代码将Core Data 的基本的准备(貌似还挺复杂!)都放在 AppDelegate中了,可苹果公司为什么会这么做呢?     ...

  10. 01.Markdown学习

    Markdown学习 一.标题 在想要设置为标题的文字前面加#来表示(#后面有空格) 一个#是一级标题,二个#是二级标题,以此类推.支持六级标题. 示例: # 这是一级标题 ## 这是二级标题 ### ...