文档章节

ajax原理

王翦小宝宝
 王翦小宝宝
发布于 2015/03/28 14:36
字数 1120
阅读 68
收藏 3
点赞 0
评论 0

最近AJAX的工作原理一直困扰着我,很想知道其工作原理,虽然一直在用,但是他的工作机制都不懂,下面是网上找的的做下笔记:

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。

所以我们先从XMLHttpRequest讲起,来看看它的工作原理。

首先,我们先来看看XMLHttpRequest这个对象的属性。

它的属性有:

onreadystatechange 每次状态改变所触发事件的事件处理程序。

responseText     从服务器进程返回数据的字符串形式。

responseXML   从服务器进程返回的DOM兼容的文档数据对象。

status           从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)

status Text       伴随状态码的字符串信息

readyState       对象状态值

0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)

1 (初始化) 对象已建立,尚未调用send方法

2 (发送数据) send方法已调用,但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,

4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

 

但是,由于各浏览器之间存在差异,所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。

 

function CreateXmlHttp(){
   //非IE浏览器创建XmlHttpRequest对象
    if(window.XmlHttpRequest){
        xmlhttp=new XmlHttpRequest();
    }
    //IE浏览器创建XmlHttpRequest对象
     if(window.ActiveXObject){
        try{
             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");    
        }catch(e){
            try{
                 xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
             }catch(ex){}
        }
    }
   }
function Ustbwuyi(){
    var data=document.getElementById("username").value;  
    CreateXmlHttp();
    if(!xmlhttp){
        alert("创建xmlhttp对象异常!");
        return false;
    }      
    xmlhttp.open("POST",url,false);
    xmlhttp.onreadystatechange=function(){  
         if(xmlhttp.readyState==4){
             document.getElementById("user1").innerHTML="数据正在加载...";
             if(xmlhttp.status==200){
                 document.write(xmlhttp.responseText);
             }     
          }
    }
    xmlhttp.send();
}

如上所示,函数首先检查XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),即数据已经发送完毕。然后根据服务器的设定询问请求状态,如果一切已经就绪(status=200),那么就执行下面需要的操作。

对于XmlHttpRequest的两个方法,open和send,其中open方法指定了:

a、向服务器提交数据的类型,即post还是get。

b、请求的url地址和传递的参数。

c、传输方式,false为同步,true为异步。默认为true。如果是异步通信方式(true),客户机就不等待服务器的响应;如果是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式,在某些页面中,可能会发出多个请求,甚至是有组织有计划有队形大规模的高强度的request,而后一个是会覆盖前一个的,这个时候当然要指定同步方式。

    Send方法用来发送请求。

 

知道了XMLHttpRequest的工作流程,我们可以看出,XMLHttpRequest是完全用来向服务器发出一个请求的,它的作用也局限于此,但它的作用是整个ajax实现的关键,因为ajax无非是两个过程,发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。

现在,我们对ajax的原理大概可以有一个了解了。我们可以把服务器端看成一个数据接口,它返回的是一个纯文本流,当然,这个文本流可以是XML格式,可以是Html,可以是Javascript代码,也可以只是一个字


© 著作权归作者所有

共有 人打赏支持
王翦小宝宝
粉丝 4
博文 18
码字总数 77725
作品 0
浦东
高级程序员
浅谈Ajax使用

我觉得学每样东西,知道他的原理与如何使用就好了。所以在此我就不废话。 1.原理: 简单的来说(Ajax使用过程像你在与某人聊天,肚子饿了让舍友帮你去吃的,而自己可以继续聊天的过程一样。你...

仙游度尾东峰黄恩赐 ⋅ 2013/07/10 ⋅ 0

AJAX工作原理及其优缺点

一、AJAX 定义 AJAX(Asynchronous JavaScript and XML)其实是多种技术的综合,包括 Javascript、XHTML 和 CSS、DOM、XML 和 XSTL、XMLHttpRequest。其中:使用 XHTML 和 CSS 标准化呈现,使...

zqwang121 ⋅ 2016/04/14 ⋅ 0

Ajax原理介绍及跨域解决方案

1.Ajax原理介绍 Ajax 全名叫"Asynchronous Javascript And XML" (异步的Javascript and XML),是一种创建交互式网页应用的网页开发技术 与传统的web应用比较,ajax 应用可以仅向服务器发送并...

陈小扁 ⋅ 2016/03/17 ⋅ 2

ajax跨域,这应该是最全的解决方案了

前言 搬运的历史文章 从刚接触前端开发起,这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于...

dailc ⋅ 2017/12/18 ⋅ 0

ajax与jsonp跨域的本质原理

ajax的基本概念 了解这个概念,首先得先知道同步交互与异步交互 同步交互:客户端浏览器给服务器发送一个请求,服务器返回一个页面,返回的页面会把之前的页面覆盖掉,我们把这种交互方式称为...

云焱 ⋅ 2017/11/11 ⋅ 0

Ajax 技术和原理分析

出自 http://www.jb51.net/article/22924.htm ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。 1.使用CSS和XHTML来表示。 2. 使用DOM...

2k10 ⋅ 2015/04/02 ⋅ 0

Ajax & PHP 边学边练 之一 Ajax基础

Ajax其实已经使用很久了,但一直也没有时间正经的找本书系统看看,最近时间比较充裕可以好好补习一下了。本系列是基于Ajax和PHP结合进行讲解,主要是想和正在学习或想要学习Ajax的朋友分享下...

junwong ⋅ 2012/03/09 ⋅ 1

前端筑基篇(一)->ajax跨域原理以及解决方案

说明 本文内容较老,而且已经不再更新,最新更新请移步 http://www.jianshu.com/p/82b82d5dd1ea 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 ...

撒网要见鱼 ⋅ 2016/09/21 ⋅ 0

JSONP原理优缺点(只能GET不支持POST)

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都 可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕...

BearCatYN ⋅ 2015/06/04 ⋅ 0

websocket介绍- 2

在讲Websocket之前,我就顺带着讲下 long poll 和 ajax轮询 的原理。 首先是 ajax轮询 ,ajax轮询 的原理非常简单,让浏览器隔个几秒就发送一次请求,询问服务器是否有新信息。 场景再现: ...

dfatxm ⋅ 2016/11/29 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring表达式语言(SpEL)

1、SpEL引用 Spring EL在bean创建时执行其中的表达式。此外,所有的Spring表达式都可以通过XML或注解的方式实现。下面将使用Spring表达式语言(SpEL),注入字符串,整数,Bean到属性。 SpEL的...

霍淇滨 ⋅ 22分钟前 ⋅ 0

Gradle使用阿里云镜像

gradle 生命周期中有一个初始化( Initialization )的过程,这个过程运行在 build script 之前,我们可以在这个地方做一点系统全局的设置,如配置仓库地址。 你可以在以下几个位置实现仓库地址...

明MikeWoo ⋅ 30分钟前 ⋅ 0

appium+python3.6

1.安装jdk1.8(不知道为啥只识别1.8,1.10不识别,所以为了少折腾,迁就安装1.8) http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 配置 JAVA_HOME:...

Kampfer ⋅ 48分钟前 ⋅ 0

详解Apache 日志分割教程

一、日志切割 安装cronolog CentOS 5.3中编译安装Apache日志默认是不切割的,需要用用工具Cronnolog进行日志切割。 1.下载及安装 wget http://cronolog.org/download/cronolog-1.6.2.tar.gz ...

dragon_tech ⋅ 51分钟前 ⋅ 0

Keepalived介绍

负载均衡器(Load Balancer, LB )是一组能够将IP数据流以负载均衡形式转发到多台物理服务器的集成软件。有硬件负载均衡器和软件负载均衡器之分,硬件负载均衡器主要是在访问网络和服务器之间...

寰宇01 ⋅ 51分钟前 ⋅ 0

java8-Collections and Streams

stream和集合的区别是什么? 1.在计算的时候处理不同, 2.every element should be computed in the memory and then to be part of collections stream Stream apis filter with a predica......

writeademo ⋅ 56分钟前 ⋅ 0

Confluence 6 重新获得附件指南

每一个文件在恢复上传到 Confluence 的时候必须单独重命名,你可以通过下面说明的 3 个方法中选择一个进行操作: 选择 A - 通过文件名恢复附件 如果你知道你需要恢复的每一个文件名,尤其是你...

honeymose ⋅ 今天 ⋅ 0

【每天一个JQuery特效】根据状态确定是否滑入或滑出被选元素

主要效果: 本文主要采用slideToggle()方法实现以一行代码同时实现以展开或收缩的方式显示或隐藏被选元素。 主要代码如下: <!DOCTYPE html><html><head><meta charset="UTF-8">...

Rhymo-Wu ⋅ 今天 ⋅ 0

度量.net framework 迁移到.net core的工作量

把现有的.net framework程序迁移到.net core上,是一个非常复杂的工作,特别是一些API在两个平台上还不能同时支持。两个类库的差异性,通过人工很难识别全。好在微软的工程师们考虑到了我们顾...

李朝强 ⋅ 今天 ⋅ 0

请不要在“微服务”的狂热中迷失自我!

微服务在过去几年一直是一个非常热门的话题(附录1)。何为“微服务的疯狂”,举个例子: 众所周知,Netflix在DevOps上的表现非常棒。Netfix可以做微服务。因此:如果我做微服务,我也将非常...

harries ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部