一、Ajax概念介绍
Ajax :是“Asynchronous JavaScript and XML”的缩写,即异步JavaScript和XML。Ajax是一个创建交互式网页应用的客户端技术。
Ajax可以进行同步交互也可以进行异步交互,一般都是使用其异步模型。
同步与异步在web开发中:
同步的交互方式,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。
异步的交互方式,浏览器不必等待服务器返回结果,在服务器响应的时间内,客户仍可以继续做其他的事情。
因此,使用Ajax异步模型主要表现在:
1、通过适当的Ajax应用达到更好的用户体验;
2、把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担。
Ajax的交互流程:
浏览器将要处理的事情告诉Ajax Engine,由引擎和服务器交互,同时,浏览器可以继续执行其他命令。
二、Ajax的核心对象
Ajax的核心对象是XMLHttpRequest对象。如果有多个请求,需要多个XMLHttpRequest对象。主要掌握XHR对象的创建、五种状态、属性和方法。
常见XMLHttpRequest对象的代码
XMLHttpRequest对象的五种状态,也就是readyState属性的五个值:
0未初始化 此时,已经创建一个xhr对象,但是还没有初始化。
1 装载中 代码已经调用了 open( )方法,并且xhr对象已经准备好把一个请求发送到服务器。
2已装载 已经通过send()方法把一个请求发送到服务器,但是还没有收到一个响应。
3交互中 已经接收到http响应头部信息,但是消息体部分还没有完全接收结束。
4完成 此时,响应已经被完全接收。
几个主要属性和方法:
open("get/put",true/false)
建立服务器的调用,同时告诉服务器提交方式、url、交互方式(不写,默认为true)。open()方法也是使用Ajax技术的第一步(前提是已创建了XHR对象),我的理解就是请求是通过Ajax引擎和服务器交互的,所以首先要建立服务器的调用。
onreadystatechange事件
每个状态改变时都会触发这个事件。 属性值一般是回调函数的地址或者函数体,如果直接写函数体的话就是所谓的匿名函数。这个函数表示的是Ajax引擎处理完成后如何反馈结果。
status属性表示服务器的http状态码,200表示ok,400表示not fond。
responseText属性
表示服务器的响应。包含客户端接收到的http响应的文本内容,当readyState值为0、1、2时,responseText包含一个空字符串。当readyState值为3时,响应中包含客户端还未完成的响应信息。当readystate为4时,该respnseText包含完成的响应信息。
send()方法
向服务器发送请求。在最后调用这个方法之前,已经设置好了各种信息(提交方式、url、交互方式、反馈结果等等)。
实例:采用Ajax验证用户Id是否重复
第一步、创建XHR对象,代码略。
第二步、调用open方法与Ajax引擎建立连接,并告诉Ajax引擎我们的请求方式。
第三步、告诉Ajax引擎处理完成后,如何把结果反馈给我们。callback()回调函数中写了反馈信息。
第四步、最后调用send方法把步骤2和3设置的参数发送给Ajax引擎。也就是真正的交给Ajax引擎去处理。
callback()函数:
请求响应的页面:
Ajax暂时先分析到此,随着以后理解的深入,还会继续更新。同时非常欢迎大家的指导。
- 5楼lfmilaoshi昨天 23:44
- 期待。。。米老师
- 4楼liushuijinger3天前 21:38
- 顶
- 3楼beijiguangyong3天前 11:41
- 期待。。。
- 2楼mazhaojuan5天前 19:32
- 来喽……
- 1楼hxl1943185天前 00:18
- 我正在学习Ajax,不知道楼主能推荐几本书吗
- Re: liusong06055天前 14:26
- 回复hxl194318n这只是在一个小项目中用到了这个技术,关于Ajax还真没有重点学习呢,也没有搜集什么书。你可以从网上搜集一下资料