文档章节

ajax原理

王翦小宝宝
 王翦小宝宝
发布于 2015/03/28 14:36
字数 1120
阅读 69
收藏 3

最近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
博文 59
码字总数 77725
作品 0
浦东
高级程序员
AJAX工作原理及其优缺点

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

zqwang121
2016/04/14
177
0
Ajax原理介绍及跨域解决方案

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

陈小扁
2016/03/17
65
2
ajax与jsonp跨域的本质原理

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

云焱
2017/11/11
0
0
Ajax & PHP 边学边练 之一 Ajax基础

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

junwong
2012/03/09
370
1
前端筑基篇(一)->ajax跨域原理以及解决方案

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

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

没有更多内容

加载失败,请刷新页面

加载更多

redis 系列一 -- 简介及安装

1.简介 redis -- remote dictionary server 远程字典服务 使用 C 语言编写; 高性能的 key-value数据库; 内存数据库,支持数据持久化。 Redis 是一个开源(BSD许可)的,内存中的数据结构存...

imbiao
33分钟前
1
0
nginx log记录请求响应时间

有时为了方便分析接口性能等,需要记录请求的时长,通过修改nginx的日志格式可以做到,如 添加一个新的log_format log_format timed_combined '$remote_addr - $remote_user [$time_local] "...

swingcoder
56分钟前
2
0
Spring MVC之RequestMappingHandlerMapping匹配

对于RequestMappingHandlerMapping,使用Spring的同学基本都不会陌生,该类的作用有两个: 通过request查找对应的HandlerMethod,即当前request具体是由Controller中的哪个方法进行处理; 查...

爱宝贝丶
今天
2
0
Java Web--增删改查之二界面后台java代码(转载参考)

/** *  *//** * @author Administrator * */package dao; import java.sql.*;public class DBConn {/** * 链接数据库 * @return */  ...

小橙子的曼曼
今天
2
0
Redis源码阅读笔记-对象及其类型和编码

总结之《Redis设计与实现》 对象 Redis中是使用对象来便是数据库中的键和值。 结构 // server.h...#define LRU_BITS 24...typedef struct redisObject { unsigned type:4; ...

Jian_Ming
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部