ajax原理讲解

前端之家收集整理的这篇文章主要介绍了ajax原理讲解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、ajax是什么?

asynchronousjavascriptandxml:异步的javascript和xml。

ajax是一种用来改善用户体验的技术,其本质是利用浏览器内置的一种特殊的对象 (XMLHttpRequest)异步(即发送请求时,浏览器不会销毁当前页面用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面,只是部分的数据,一般使用文本或者xml返回)来部分更新当前页面。使用ajax技术之后,页面无刷新,并且不打断用户

的操作。

ajax技术的优点:

(1).页面无刷新

(2).不打断用户的操作,用户的体验好。

(3).按需获取数据,浏览器与服务器之间数据的传输量减少。

(4).是一个标准技术,不需要下载任何的插件

(5).可以利用客户端(浏览器)的计算能力。

2、ajax对象

(1)如何获得ajax对象?

XMLHttpRequest并没有标准化,要区分浏览器:

functiongetXhr(){

varxhr;

if(window.XMLHttpRequest){

//非ie浏览器

xhr=newXMLHttpRequest();

}else{

//ie

xhr=newActiveXObject('Microsoft.XMLHttp');

}

ajax经典总结

(2)ajax对象的属性

a,onreadystatechange:绑订一个事件处理函数(注册监听器),当

ajax对象的readyState值发生了改变(比如,

从0-->1),就会产生readystatechange事

件。

b,0)">responseText:获得服务器返回的文本

c,0)">responseXML:获得服务器返回的xml数据

d,0)">status:获得状态码

e,0)">readyState:ajax对象在与服务器进行通讯时,通过readyState属

性值可以获取该对象的通讯的状态,其属性有5个

(0,1,2,3,4),当属性值为4时,表示ajax对象已经获得了

服务器返回的所有的数据。

0:(未初始化)对象已建立(获得),但是尚未初始化(尚未调用open

方法

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

2:(发送数据)send方法调用

3(数据传送中)已接收部分数据。

4:(响应结束)接收了所有的数据。

(3)ajax编程的基本步骤

step1,先获得ajax对象

varxhr=getXhr();

step2,发送请求

xhr.open(请求方式,请求地址,异步还是同步);

请求方式:get/post

请求地址:如果是get请求,请求参数要添加到请求地址的后面。

true表示异步请求:ajax对象发请求的同时,用户可以对当前页

面做其它的操作。

false表示同步请求:ajax对象发请求的同时,浏览器会锁订当前页

面,用户需要等待处理完成之后,浏览器才会

解除锁定,才能做下一步操作。

方式一:get请求

xhr.open('get',

'check_username.do?username=zs',true);

xhr.onreadystatechange=f1;

xhr.send(null);

方式二:post请求

xhr.open('post');

step3,编写服务器端的代码,服务器端一般不需要返回完整的页面

只需要返回部分的数据,比如一个简单的字符串。

step4,编写监听器

functionf1(){

if(xhr.readyState==4){

//获得服务器返回的数据

vartxt=xhr.responseText;

//dom操作

eg:

functioncheck_username(){

//step1,获得ajax对象

varxhr=getXhr();

document.write(xhr.readyState+"<br/>");//0

//step2,发请求

xhr.open('get','check_username.do?username='+$F('username'),true);//建立连接

//1

xhr.onreadystatechange=function(){//绑定事件处理函数注册

听器)

//只有ajax对象的readyState值为4时,才能获得服务器返回的完整

数据

//依次输出2、3、4

if(xhr.readyState==4){

//获得服务器返回的文本数据

vartxt=xhr.responseText;

//更新页面

$('username_msg').innerHTML=txt;

};

xhr.send(null);//向服务发送请求

XMLHttpRequest对象xhr通过onreadystatechange属性绑定了事件处理函数,在整个会话内,onreadystatechange属性会发生多次变化,依次从0-1-2-3-4,每一次属性值的变化都会触发绑定事件函数的执行。

eg:同步、异步问题:

//验证验证码是否正确

functioncheck_code(){

varflag=false;

//step1,获得ajax对象

varuri='check_code.do?checkcode='+$F('checkcode');

false);//绑定事件处理函数注册监听器)

//只有对象的readyState值为4时,才能获得服务器返回的数据。

if(xhr.status==200){

if(txt=="error"){

'checkcode_msg').innerHTML="验证码错误!";

flag= }else{

"验证码正确!";

true;

'系统繁忙,验证出错';

"正在验证......";//当服务器响应比较慢时可以看到此提示

//当对象向服务器发送同步请求时,

//浏览器不会向下执行,会等待服务器的响应。

//如果是异步,send后,并不会先执行绑定事件,而是先向下执行

//在监听事件中返回值有问题,所以没在其中返回

returnflag;

当为异步方式时,返回的flag始终是falseflag在监听事件中被有被改变(监听事件在return之前没有执行),所以要设置为同步方式,这样在returnfalg之前,监听事件就会处理完毕,的值就会发生相应的改变。

3、ajax编程中的编码问题

(1)发送get请求:

ie浏览器内置的ajax对象,对中文参数使用gbk编码,而其它浏览器

(firefox,chrome)使用utf8编码。

服务器端默认使用iso-8859-1去解码。

解决方案:

step1,让服务器对get请求中的参数使用指定的编码格式进行解码。

比如,对于tomcat,可以修改conf/server.xml,只对get方式有效

<Connectorport="8080"protocol="HTTP/1.1"

connectionTimeout="20000"

URIEncoding="utf-8"(要加入的代码

redirectPort="8443"/>

<!--A"Connector"usingthesharedthreadpool-->

step2,对请求地址,使用encodeURI函数进行统一的编码(utf-8)

varuri='check_username.do?username='+$F('username');

(2)发送post

如果发送方式为post,那么所有浏览器内置的ajax对象都会对请求参数

使用utf-8进行编码,那么只要在服务器端设置:

request.setCharacterEncoding("utf-8");

4、发送post请求

xhr.open('post','check_username.do',250)"> xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

xhr.send('username='+$F('username'));

注意:

因为按照http协议的要求,如果发送的post请求,那么请求数据包里面,

应该有一个消息头content-type。但是,ajax对象默认没有,所以,需

调用setRequestHeader方法

5、json(javascriptobjectnotation)

(1)json是什么?

是一种轻量级的数据交换标准。

简单地讲,就是将要交换的数据先转换成一个与平台无关的数据格式(比

如xml或者json字符串)发送给接受方,接受方再进行相应的转换。

相对于xml,json解析的速度更快,数据量更小。

(2)json语法格式

1)如何表示一个对象

{属性名:属性值,属性名:属性值...}

要注意:

属性值的类型可以是string,number,null,boolean,object。

属性名必须使用引号括起来

属性值如果是string,也必须使用引号括起来

2)如何表示一个对象组成的数组

[{},{},{}...]

(3)如何使用json做数据交换

1)java对象(java对象组成的数组或者集合)转换成对应的json字符串

可以从www.json.org去下载对应语言的工具。

使用的json-lib中提供的两个类:

JSONObject,JSONArray

2)json字符串转换成javascript对象

可以使用prototype提供的evalJSON函数

prototype.js提供了很多有用的函数:

个数组。

数组。

练习:热卖商品动态显示

step1,建表

createtablet_sale(

idintprimarykeyauto_increment,250)"> namevarchar(50),250)"> pricedouble,250)"> qtyint

);

insertintot_sale(name,price,qty)values('bmwx6',20,30);

查询销量前三的sql:

select*fromt_saleorderbyqtydesclimit3;

step2,实体类Sale

step3,SaleDAO

List<Sale>find...

step4,ActionServlet

输出一个json字符串

step5,测试ActionServlet

step6,sale.jsp

6、ajax应用中的缓存问题:

当使用IE浏览器时,如果使用get方式发请求,浏览器会先缓存之前

访问的数据,如果访问的地址不变,不会向服务器发请求。

解决方式1:使用post方式发请求。

解决方式2:在请求地址后面添加一个随机数。

7、发送同步请求

varxhr=getXhr();xhr.open('post',255)">'show.do',85)">true);

xhr.setRequestHeader('content-type',255)">'application/x-www-form-urlencoded');

function(){

if(xhr.readState==4){

vartxt=xhr.responseText;alert(txt);

xhr.send('username='+$F('username'));

//当ajax对象向服务器发送同步请求时,浏览器不会向下执行,会等待服务器的响应。在完整的收到服务器返回的数据之前,浏览器便处于锁定状态,用户不可进行操作。

}

以上的“ajax经典总结”就是本人在学习期间独自总结出来的,今天把他晒出来,希望分享给大家,和大家共同进步!

猜你在找的Ajax相关文章