学习日记:ajax的产生的背景、原理、特点与应用

原创 2015年11月18日 13:46:50

一、ajax产生的背景

1 ) 传统web应用请求和响应的特点

(1) 请求: 浏览器以http协议的方式提交到服务器
(2)响应: 服务器以http协议的方式响应内容到浏览器
HTTP请求有三个部份组成:请求行,请求头,请求体
HTTP响应有三个部份组成:响应行,响应头,响应体
注意:HTTP是WEB大众化非安全协议
HTTPS是WEB安全协议,是基于HTTP协议的,且加了一些加
密等 特殊功能,常用于在线支付,或者是需要安全性较高的网
站中,例如: 12306网站
(3) 状态栏:有明显的刷新现象
(4) 历史栏: 浏览器会收集原来的页面进行缓存
(5) 缺点:再不需要进行大量内容更新的时候也需要刷新整个页面,对服务器的造成负担
(6) 改进: 只对需要更新的地方进行刷新,其余的地方不进行改变


二、ajax(异步的js和xml)的原理与特点

1) ajax的原理

(1) 同步:当浏览器提交请求之后需要等待服务器响应之后才能提交下一个请求
请求1→响应1→请求2→响应2→
(2)异步:当浏览器提交请求之后无需等待服务器响应便可以提交下 一个请求
请求1→请求2→响应1→响应2→
web2.0时代
项目中:以web1.0为主,web2.0为辅

(3)什么是ajax?
ajax指的是浏览器在不必进行整个页面刷新的情况下,能与浏览器进行异步通讯,使页面进行局部更新的技术。
ajax不是全新的语言,是2005年Google公司推出的一种全新【编程模式】,不是新的编程语言

(4)不用刷新整个页面便可与服务器通讯的办法有:
(A)Flash/ActionScript
(B)框架Frameset
(C)iFrame(内嵌入框架)
(D)XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)
背景:早上IE5时,微软就开发出了第一个异步通讯对象,叫ActiveXObject对象,
Firefox等其它浏览器厂商也慢慢引入异步通讯对象,叫XMLHttpRequest对象,
IE的高版本,也将这个异步对象取名叫XMLHttpRequest对象,但IE有向下兼容问题,
也可以使用ActiveXObject对象。
无需第三方jar包,现代中高版本浏览器中内置了这个异步通讯对象,只需通过JavaScript就可以创建
注意:所有浏览器中都内置了异步对象,在默认情况下,该异步对象并没有创建出来

function createAJAX(){
    var ajax = null;
    try{
        ajax = new ActiveXObject("microsoft.xmlhttp");
    }catch(e1){
        ajax = new XMLHttpRequest();
    }
    return ajax;
}

(2) ajax的开发步骤

(1) 创建ajax

var ajax = createAJAX();

(2)准备异步发送请求(以什么方式提交和url)

var method = "POST";
var url = "${pageContext.request.contextPath }/#?time=" new Date().getTime();
//加time是因为IE会自动检测url是否提交过,是的话会从缓存中提取而不会和数据库通讯
ajax.open(method,url);

(3)如果是POST方式提交的话,还需要发送ajax请求头(请求头在open和send中间)

    ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

(4)发送异步请求

//如果是GET方式提交的话那么是
//ajax.send(null);   因为已经把数据带在url后面了 
//如果是POST方式请求的话
var content = "变量名= " + 数据;
ajax.send(content);
//------------------------等待

(5)ajax不断地监听服务器端响应的状态变化(状态变化有0.1.2.3.4当状态为4的时候表示服务端已经响应)

ajax.onreadystatechange = function(){
    if(ajax.readyState == 4){
        //服务器必须是正确的响应状态
        if(ajax.status == 200){
            var text = ajax.responseText;
            //如果服务端是用xml方式返回的话那么是
            // var text = ajax.responseXML;
            //....      
        }
    }
}

ajax常用的事件、方法和属性

(1)事件:
ajax.onreadystatechange:表示AJAX异步对象不断监听服务端的响应,
是由服务器程序触发,不是程序员触发

(2)属性:
ajax.readyState==0:表示AJAX异步对象已创建好,但还没有调用open()方法
ajax.readyState==1:表示AJAX异步对象已调用open()方法,但还没有调用send()方法
ajax.readyState==2:表示AJAX异步对象已调用send()方法,但请求还没有到达服务器端
ajax.readyState==3:表示服务端已接收到AJAX异步对象的请求,正在处理响应中。。。
ajax.readyState==【4】:表示AJAX异步对象已经完完全全接收到了服务器的响应信 息,但接收到的数据不一定都正确
上述5种状态不是所有浏览器都相同,但状态4每种浏览器都相同
ajax.status==200:表示AJAX异步对象接收到响应码,如果是200的话,表示一切正常
ajax.responseText:表示从AJAX异步对象中获取HTML载体中的数据
ajax.responseXML:表示从AJAX异步对象中获取XML载体中的数据
(3)方法:
ajax.open(method,url,可选的boolean值)
AJAX异步对象准备发送异步请求
参数一:以什么方式发送,常用的用GET或POST,大小写不敏感
参数二:发送到什么地方去,常用Servlet或Struts2或SpringMVC来接收,
这里只限于JavaEE学科
参数三:默认值为true,表示AJAX对象以【异步】的方式提交到服务端
如果设置为false,表示AJAX对象以【同步】的方式提交到服务端
ajax.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”)
设置请求头,表示将请求体中的内容,按照UTF-8的方式进行编码,只针对POST请求有效(POST请求必须写上)
ajax.send(content)
AJAX异步对象真正发送异步请求
参数一:表示HTTP【请求体】中的内容
如果是GET方式:content = null,如果强行传值到服务器,服务端收不到,返回NULL
如果是POST方式:content != null,例如:username=jack&password=123&role=admin

返回数据的数据载体

(1)HTML
(A)优点:服务端响应的是普通html字符串,无需JS解析,配合innerHTML属性效率高
(B) 缺点:如果需要更新WEB页面中的很多处地方,HTML不太方便,同时innerHTML属性不是DOM的标准,不能操作XML
注意:innerHTML在xml中不能使用,用firstChild.nodeValue替代
(C)适合:小量数据载体,且只更新在web页面中的一个地方

(2)XML
(A)优点:是种通用的普通字符串格式,任何技术都能解析,标签名可以任意,使用DOM标准规则能够解析XML的任何部分
(B)缺点:XML文件格式相当严格,出错后,responseXML属性返回NULL,如果XML文件过长,导致解析效率低下
(C)适合:大量具有层次数据载体

ajax的应用

(1)注册时候用户名的检测
(2)验证码的实时验证
(3)各种平台的点赞、加分、签到功能
……暂时就想到这么多

数据挖掘第一世——产生的背景

海量数据的分析需求催生了数据挖掘,世界知名的数据仓库专家,阿尔夫·金博尔说过:“我们花了多年的时间将数据放入数据库,如今是该将它们拿出来的时候了。”现在无论是线下的大超市还是线上的商城,每天都会产生T...
  • cym_29mm
  • cym_29mm
  • 2017年03月19日 18:23
  • 465

dubbo产生背景

服务治理,服务注册与发现,服务URL配置管理,服务间依赖关系,服务的调用量越来越大,服务的容量问题就暴露出 服务的权重 Dubbo服务集群容错 Dubbo服务负载均衡在大规模服务化之前,应用可能...
  • ggj20ss
  • ggj20ss
  • 2016年02月26日 09:12
  • 905

电火花产生机理

     日常生活中,我们经常可以看见电火花,最常见的是使用3孔电源插头插入到墙壁插座或接线板上(已上电),冒出电火花。我们知道,三孔插头为:地线(E) 零线(N )火线(L),最长的那根是地线了,这...
  • millyzb
  • millyzb
  • 2011年06月28日 22:51
  • 2847

Nginx源代码分析之背景简介(一)

nginx [engine x]是俄罗斯人Igor Sysoev编写的一个HTTP和反向代理服务器,另外它也可以作为邮件代理服务器。 它已经在众多流量很大的俄罗斯网站上使用了很长时间,这些网站包括Ya...
  • namelcx
  • namelcx
  • 2013年05月30日 10:09
  • 1047

消息队列(message queue)产生的背景、常用的技术

消息队列是在消息的传输过程中保存消息的容器,消息队列管理器在将消息从它的源中继到它的目标时充当中间人。队列的主要目的是提供路由并保证消息的传递;如 果发送消息时接收者不可用,消息队列会保留消息,直到可...
  • Mr_Smile2014
  • Mr_Smile2014
  • 2015年08月12日 22:23
  • 1978

探索大脑思维原理的新思路—主动关联网络

谢 军虎门镇威远九门寨白花山南区25号,东莞市,523898Email: patrickjun@21cn.com 摘要:本文阐述了一种用于解释人类大脑思维原理乃至所有生物神经系统原理的新思路—主动关联...
  • patrickjun1
  • patrickjun1
  • 2006年09月12日 13:52
  • 1781

YARN产生背景

Hadoop1.x中的MapReduce构成图如下: 在Hadoop1.x中MapReduce是Master/Slave结构,在集群中的表现形式为:1个JobTracker带多个Task...
  • hmy1106
  • hmy1106
  • 2015年02月11日 23:48
  • 1090

1.redis背景和使用场景

redis是互联网发展的产物,作为key—value的高效存储系统,为互联网应用提供高效的解决方案。redis基于c语言开发,并且提供了基本的数据结构list、set、map,还支持java、c++、...
  • yeyincai
  • yeyincai
  • 2016年03月02日 19:24
  • 1412

Hive产生背景及Hive是什么

Hive产生背景            Apache Hive数据仓库软件可以使用SQL方便地阅读、编写和管理分布在分布式存储中的大型数据集。结构可以投射到已经存储的数据上。提供了一个命令行工具和J...
  • qq_22027637
  • qq_22027637
  • 2017年12月21日 10:17
  • 71

电流和电压的产生原理

我们都知道物质是由原子组成,而原子由带正电的原子核和带负电的电子组成,电子围绕着原子核高速运动。从电路分析的角度来看,我们将其分为正电荷和负电荷,对应于原子核和电子。生活中绝大多数的物体是中性的,是因...
  • techstore
  • techstore
  • 2012年05月04日 22:37
  • 274
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习日记:ajax的产生的背景、原理、特点与应用
举报原因:
原因补充:

(最多只允许输入30个字)