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. AUTOSAR-PDU&SDU

    https://mp.weixin.qq.com/s/TZcJcHVnNARMcUac2Es0wQ   PDU: Protocol Data Unit The PDU contains SDU and ...

  2. LeetCode 73，为什么第一反应想到的解法很有可能是个坑？

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode第42篇文章,我们来看看LeetCode第73题矩阵置零,set matrix zeroes. 这题的难度是Mediu ...

  3. EntityFramework数据持久化 Linq语法应用

    Linq基础语法 LINQ概述 LINQ(Language Integrated Query,语言集成查询)提供了一种跨数据源和数据格式查询的统一模型. LINQ的组成: LINQ To Object ...

  4. Java实现 LeetCode 451 根据字符出现频率排序

    451. 根据字符出现频率排序 给定一个字符串,请将字符串里的字符按照出现的频率降序排列. 示例 1: 输入: "tree" 输出: "eert" 解释: 'e ...

  5. Java实现 神犇的悲惨一生

    [问题描述] 传说中有位神犇,因其一贯低调,所以人们连他活了多少岁都不知道. 好在XXXX文献上有段关于他生平细节的文字:神犇一生中, 幼年占了1/6,又过了1/12的青春期,又谈了1/6的恋爱后结婚 ...

  6. Java实现 蓝桥杯 基因牛的繁殖

    基因牛的繁殖 张教授采用基因干预技术成功培养出一头母牛,三年后,这头母牛每年会生出1头母牛, 生出来的母牛三年后,又可以每年生出一头母牛.如此循环下去,请问张教授n年后有多少头母牛? 以下程序模拟了这 ...

  7. Python如何绘制可视化图？给你一段代码，你能自己做出来吗

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

  8. oracle使用+简写左关联出现的结果集不一致问题

    这是使用(+)的sql语句(已简写) select a.id,b.num from a,b where a.id=b.id(+) and b.num>10 这是使用left join的sql语句 ...

  9. jQuery实现购物车商品数量及总价的计算

    记录一下项目中遇到的计算购物车商品数量和总价的jQuery代码,重点在于选择器以及.text()命令的使用. 先上效果图,点击加减,商品数量以及总价会发生相应变化. html代码: <div c ...

  10. URL 链接中的 UTM参数何定义？

    浏览网页或者点击广告的时候,细心的朋友们或者有关注浏览器地址栏的 URL 链接时,一定会发现 utm_source 或者与其类似的链接,那么链接中的这个UTM参数有什么用呢? UTM 为“Urchin ...