AJAX的原理是什么?

实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果。

在前端有好多方式可以发起HTTP请求,比如script标签的src以及图片的src,css背景图片,等等。

案例1:通过HTTP状态码204实现页面无刷新

下面来一个小案例,实现一个页面无刷新的投票功能。

html:

<div id="box">
  <h1>周杰伦</h1>
  <p>0</p>
  <a href="http://127.0.0.1:3000">投票</a>
</div>

nodejs

var http = require('http');
http.createServer(function(req, res){
  res.writeHead(204);
}).listen(3000);

当我们点击投票的时候发出了一条HTTP请求,但是页面并没有跳转,主要是利用HTTP204状态码实现的。

204:意思是我已经接收到了,但是我没有数据要返回给你,请你不用刷新页面.也不要跳转到新的页面。

案例2:利用图片src实现

html:

<div id="box">
  <h1>周杰伦</h1>
  <p>0</p>
  <a href="javascript:getHttp();">投票</a>
</div>

<script>
  function getHttp(){
    var img = new Image();
    img.src = 'http://127.0.0.1:3000';
  }
</script>

nodejs:

var http = require('http');
http.createServer(function(req, res){
  res.writeHead(200,{'Content-type':'text/html'});
  res.end('ok');
}).listen(3000);

如果需要发送数据我们可以在src的后面加上参数,和AJAX的GET方式一模一样。

通过script标签和css来实现,和这里的图片实现方式大同小异这里就不再演示了。

但是以上的几种方式都有一个特点就是,只能发送数据给服务器,但是客户端不能接收服务器返回的数据,并且不能使用POST方式,因此以前方式虽然可以实现,但使用的场景比较小。

下面介绍另外一种方式,它可以解决上面的问题。

利用iframe标签实现页面无刷新。

html:

<div id="box">
  <h1>周杰伦</h1>
  <p>0</p>
  <a href="http://127.0.0.1:3000" target="tou">投票</a>
</div>
<iframe name="tou" frameborder="0"></iframe>

nodejs:

var http = require('http');
http.createServer(function(req, res){
  res.writeHead(200,{'Content-type':'text/html'});
  res.end('ok');
}).listen(3000);

实际上这种方式是有刷新的,不过刷新的是iframe这个框架里面的内容,所有我们就有了利用它的机会,我们只需要把iframe的宽高边框设置成0就好了。

可能你会问虽然现在可以返回数据了,但是怎么操作它呢,其实可以通过返回一段js代码来操作dom。

html:

<div id="box">
  <h1>周杰伦</h1>
  <p id="content">0</p>
  <a href="http://127.0.0.1:3000/1" target="tou">投票</a>
</div>
<iframe name="tou" frameborder="0"></iframe>

nodejs:

var http = require('http');
var fs = require("fs");

var count = 0;
http.createServer(function(req, res){
  if(req.url==="/favicon.ico")return;
  if(req.url==='/index.html'){
    res.writeHead(200,{'Content-type':'text/html'});
    res.end((fs.readFileSync('index.html')).toString());
  }else{

    count++;
    res.writeHead(200,{'Content-type':'text/html'});

    var jsCode = '<script>';
    jsCode += 'parent.document.getElementById("content").innerHTML =' + count;
    jsCode += '</script>';
    res.end(jsCode);
  }

}).listen(3000);

核心代码是加粗的那一段,也就是返回一段js代码,通过parent来操作iframe的上一程。

接着我们再通过iframe + form 来实现POST提交。

html:

<form id="form" action="/1" target="reg">
  姓名:<input type="text">
  年龄:<input type="text">
  <input type="submit" value="提交">
</form>
<iframe name="reg" frameborder="0"></iframe>

nodejs:

var http = require('http');
var fs = require("fs");

http.createServer(function(req, res){
  if(req.url==="/favicon.ico")return;
  if(req.url==='/index.html'){
    res.writeHead(200,{'Content-type':'text/html'});
    res.end((fs.readFileSync('index.html')).toString());
  }else{

    res.writeHead(200,{'Content-type':'text/html'});

    var jsCode = '<script>';
    jsCode += 'parent.document.body.removeChild(parent.document.getElementById("form"));parent.document.body.innerHTML="注册成功!";';
    jsCode += '</script>';
    res.end(jsCode);
}

}).listen(3000);

ok,案例就到这了。

从这些案例上可以看出,所谓的ajax就是发起一个http请求,当然以上方式和ajax多少还是有差别的,ajax内部还是做了一些其他的事情,比如我们接收数据,客户端是没有刷新的,而我们模拟的ajax实际上都是有刷新的(除了利用src以外),不过是使用了一些小伎俩而已。所以在实际开发过程中,还是用ajax比较好,因为客户端和服务器在内部还是做了很多事的,而这些我们是无法模拟出来的。

HTTP与AJAX深入揭秘,不使用AJAX实现页面无刷新的更多相关文章

  1. 浅谈页面无刷新技术ajax

    现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...

  2. Ajax下载文件(页面无刷新)

    说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...

  3. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  4. 让页面无刷新的AJAX、ASP.NET核心知识(9)

    AJAX简介 1.如果没有AJAX 普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,如果没有ajax,在youku看视频的过程中,就没法提交评论,页面会刷新,视频会被打断. 2.说说AJ ...

  5. ajax 页面无刷新

    <!-- 使用原生Ajax 和 $.ajax 实现局部刷新的过程 --><!-- 封装通用XMLHttpRequest对象 --><!DOCTYPE html>&l ...

  6. ajax分页2:jquery.pagination +JSON 动态无刷新分页

    静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. Ajax技术实现页面无刷新跳转

    Ajax实现无刷新显示新的页面 <!DOCTYPE html> <html> <head> <script src="/jquery/jquery- ...

  8. repeater绑定dropdownlist,jquery+ajax页面无刷新,修改dropdownlist默认值

    html代码: <td>                        <asp:HiddenField ID="hiddenchuli" Value='< ...

  9. 浅谈AJAX的基本原理和原生AJAX的基础用法

    一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...

随机推荐

  1. [UCSD白板题] Fractional Knapsack

    Problem Introduction Given a set of items and total capacity of a knapsack,find the maximal value of ...

  2. Android 百度云媒体 等播放器播放4:3等多种比例的视频 大小配置的问题

    视频播放宽度大小各不一样,就需要根据视频的尺寸去适应屏幕的宽度和高度进行缩放. 思路是在onPrepared方法中,或者切换屏幕后,获取video的高度和宽度.以及屏幕展示区域的高度的宽度.并对比二者 ...

  3. phpcms V9二次开发之联动菜单筛选 包括box字段的多选 单选 筛选教程

    {php $theurl = "index.php?m=content&c=index&a=lists&catid=$catid";} {php $bran ...

  4. java面向对象(封装-继承-多态)

    框架图 理解面向对象 面向对象是相对面向过程而言 面向对象和面向过程都是一种思想 面向过程强调的是功能行为 面向对象将功能封装进对象,强调具备了功能的对象. 面向对象是基于面向过程的. 面向对象的特点 ...

  5. 【转】【Linux】 临界区,互斥量,信号量,事件的区别

    原文地址:http://blog.itpub.net/10697500/viewspace-612045/ Linux中 四种进程或线程同步互斥的控制方法1.临界区:通过对多线程的串行化来访问公共资源 ...

  6. 【OC基础语法考试】

    OC基础语法已经全部学完,但是这些知识只是最基础的,还有很多高级知识,这个可能需要后面慢慢的去学习才能体会到.接下来我会总结前面的OC基础语法,如果大家发现有什么不正确的地方,请指正,小弟是新生,多请 ...

  7. IO-02. 整数四则运算(10)

    本题要求编写程序,计算2个正整数的和.差.积.商并输出.题目保证输入和输出全部在整型范围内. 输入格式: 输入在一行中给出2个正整数A和B. 输出格式: 在4行中按照格式“A 运算符 B = 结果”顺 ...

  8. 如何遍历HashMap

    HashMap的遍历有两种常用的方法,那就是使用keyset及entryset来进行遍历,但两者的遍历速度是有差别的 java Map 遍历速度最优解 第一种: Map map = new HashM ...

  9. GCD笔记

    GCD笔记http://www.cocoachina.com/applenews/devnews/2013/1210/7506_2.html1. 全称Grand Central Dispatch2. ...

  10. 在CentOS6.5上安装MariaDB

    昨天临下班的时候,在我的阿里云上面试装了PostgreSQL,可后来想想,似乎没什么必要使用他.主要是Navicat使用起来加自增key的时候,没有像MySQL那么方便啦. 因为公司用的已经是MySQ ...