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

随机推荐

jchdl - GSL实例：FullAdder（使用HalfAdder实现）
https://mp.weixin.qq.com/s/5mcYAllizuxyr3QSNrotrw 全加器是能够计算低位进位的二进制加法电路.与半加器相比,全加器不只考虑本位计算结果是否有进位,也考虑 ...
chrome和Firefox浏览器渲染页面的不同
一直很好奇chrome和firefox这两大浏览器的页面渲染有什么不同,今天自己写了些html代码来做了下检验. 先做html编码,代码如下: <!DOCTYPE html><htm ...
Java面向对象中this关键字详解意义+实例讲解【hot】
this关键字 >>>便于理解简单的定义 this关键字可以简单的理解为,谁调用this所在的方法,this就是谁. 类的构造函数与getter.setter方法常用到this关键字 ...
Java实现 LeetCode 404 左叶子之和
404. 左叶子之和计算给定二叉树的所有左叶子之和. 示例: 3 / \ 9 20 / \ 15 7 在这个二叉树中,有两个左叶子,分别是 9 和 15,所以返回 24 /** * Definiti ...
Java实现蓝桥杯VIP 算法训练数位分离
** 算法训练数位分离** 问题描述编写一个程序,输入一个1000 以内的正整数,然后把这个整数的每一位数字都分离出来,并逐一地显示. 输入格式:输入只有一行,即一个1000以内的正整数. 输出格 ...
Java实现蓝桥杯VIP 算法提高 3-1课后习题2
算法提高 3-1课后习题2 时间限制:1.0s 内存限制:256.0MB 问题描述编写一个程序,接受用户输入的10个整数,输出它们的和. 输出格式要求用户的输出满足的格式. 例:输出1行,包含一个 ...
第五届蓝桥杯JavaA组国(决)赛真题
解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论题目1.海盗分金币有5个海盗,相约进行一次帆船比赛. 比赛中天气发生突变,他们被冲散了. 恰巧,他们都先后经过途中的一个无名的荒岛,并且每个 ...
Java实现预排序
1 问题描述在计算机科学中,预排序是一种很古老的思想.实际上,对于排序算法的兴趣很大程度上是因为这样一个事实:如果列表是有序的,许多关于列表的问题更容易求解.显然,对于包含了排序操作,这种算法的时间 ...
java实现第三届蓝桥杯DNA对比
DNA对比脱氧核糖核酸即常说的DNA,是一类带有遗传信息的生物大分子.它由4种主要的脱氧核苷酸(dAMP.dGMP.dCMT和dTMP)通过磷酸二酯键连接而成.这4种核苷酸可以分别记为:A.G.C. ...
TZOJ 公交车
描述公交车在一条笔直的道路(道路宽度忽略,设为X轴)上行驶,按顺序路上有若干个站点(X坐标值),crq的家也在道路旁某个位置h(X坐标值),现在crq想知道哪个站点下车离家最近. 输入输入数据的第 ...