Ajax相关技术知识总结

(一)什么是Ajax

 

Ajax:  synchronous  javascript  and  xml (异步javascript和xml)

其是可以与服务器进行(异步/同步)交互的技术之一。

ajax的语言载体是javascript。其是浏览器的一个技术

最大特点:页面不刷新(用户体验非常好)

百度搜索引擎,自动获得关联的信息,是Ajax效果之一:

 

注册账号是否存在的校验也是Ajax效果之一:

传统方式与Ajax方式校验用户名区别:

(二)、Ajax出现的历史

1999年,微软公司发布IE5浏览器的时候嵌入的一种技术。起初名字是XMLHttp。

直到2005年Ajax才开始流行使用,该年google公司发布了一个邮箱产品gmail,内部的gtalk聊天工具有使用ajax技术,该事情引起人们对ajax的注意,并促成其被广泛使用,同时使得向来不被人们重视的javascript语言得到的大家的青睐。

(三)、Ajax是许多旧技术的集合

xhtml、css、javascript、xml、xmlhttprequest对象(ajax对象)

其中XMLHttpRuquest是ajax的官方的名称。

ajax的使用,就是创建对象,对象调用成员的过程。

(四)、Ajax使用

1. 创建ajax对象

1.1 主流浏览器方式

火狐、chrome(google)、safari(苹果)、opera包括IE7以上版本的浏览器

var xhr = new XMLHttpRequest();

1.2 IE(5/6/7/8)方式(了解)

var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);  //最原始方式

var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);    //升级

var xhr = new ActiveXObject(“Msxml2.XMLHTTP.3.0”);  //升级

var xhr = new ActiveXObject(“Msxml2.XMLHTTP.5.0”);  //升级

var xhr = new ActiveXObject(“Msxml2.XMLHTTP.6.0”);  //IE维护的最高版本

ajax与浏览器一样,向服务器发起请求都需要走http协议。

2.发起对服务器的请求

3.Ajax接收服务器返回信息

Ajax可以接收什么信息?

答:浏览器可以接收的信息ajax都可以接收,例如字符串、html标签、css样式内容、xml内容、json内容等等。

服务器端页面内容

浏览器直接访问效果

Ajax就是主人的一个小兵、随从。

onreadystatechange事件最多感知4个状态值:

Ajax常用属性和方法:

ajax发起请求、接收服务器返回的信息:

 4.get和post方式的Ajax请求

ajax对象.open(get/post, 请求地址);

4.1 两者的不同

① 给服务器传递数据量

   get方式的大小是受限于浏览器,大部分浏览器是2k的限制

   每个浏览器的限制不一样  chrome就是8K

  http://网址/index.php?name=tom

 上述请求通过get方式传递了9个字节的信息

 1024字节 = 1k

 post原则没有限制,php.ini对其限制为8M

② 安全方面,post传递数据较安全

③ 传递数据的形式不一样

get方式在url地址后边以请求字符串形式传递参数

http://网址/index.php?name=tom&age=23&addr=beijing

蓝色部分就是请求字符串,就是一些“名-值”对,中间使用&符号连接。

post方式是把form表单的数据给请求出来以xml形式传递给服务器

4.2 Ajax之get方式请求

ajax之get请求需要注意的两个地方:

① 在url地址后边以请求字符串(传递的get参数信息)形式传递数据。

② 对中文、=、&等特殊符号需要编码处理

对特殊信息的处理:

在浏览器里通过get参数传递一些特殊符号信息会被误解混淆,例如 &  = 等,浏览器会把这样的信息当做get参数的一部分而进行一个错误的解析,为了避免这种情况发生,可以对该信息进行编码处理。有的浏览器传递中文会出现不识别问题,也可以进行编码处理。

(编码后的信息是相对底层的信息,浏览器会自动识别,获取的时候无需反编码)

a.在php里边可以函数 urlencode()/urldecode()对特殊符号进行编码、反编码处理

b.在javascript里边可以通过encodeURIComponent ()对特殊符号等信息进行编码。

(以上红色函数可以把”特殊符号、中文”转变为浏览器可以识别不会混淆的信息。

编码后的信息为%号后接两个十六进制数)

get方式ajax请求,需要通过“请求字符串”形式传递参数:

我们传递的信息内部有&、=等特殊符号,结果变为请求字符串的连接符号了

&和=符号,在浏览器地址栏内部产生歧义了。

为了避免传递的特殊符号产生歧义,需要对其进行编码处理

PHP:   urlencode()/  urldecode()

Javascript:  encodeURIComponent();

编码后的信息通过浏览器可以直接解析,无需反编码。

编码后的信息是%后边跟两位十六进制数。

火狐浏览器传递中文信息,会有自动编码处理,IE浏览器传递get中文参数没有编码处理,需要自己手动编码。

可以被编码的特殊符号:

ajax之get请求的两个注意事项:

参数传递、编码处理

4.3 Ajaxpost方式请求

ajax之post请求需要注意的四个地方:

① 给服务器传递数据需要调用send(请求字符串数据)方法

② 调用方法setRequestHeader()把传递的数据组织为xml格式(模仿form表单传递数据)

③ 传递的中文信息无需编码,特殊符号像 &、=等 仍需要编码

④ 该方式请求的同时也可以传递get参数信息,同样使用$_GET接收该信息

5.同步、异步

 Ajax对象.open(方式get/post,  url地址, [异步true]/同步false);

 Ajax是可以与服务器进行(异步或同步)交互的技术之一。

 异步:同一个时间点允许执行多个进程。

 同步:同一个时间点只允许执行一个进程。

 

 5.1什么时候使用同步请求

ajax绝大多数情况下进行异步请求,但是有的时候也要使用“同步请求”(其不能被取代)。例如页面有两部分内容,①ajax请求内容 和 ②正常的html内容输出,如果html的输出内容包括ajax请求的内容,就需要使得ajax请求完成了再进行html内容的输出,这样就要设置两者一前一后调用(而非同时调用),既要进行同步请求。

(五)、Ajax无刷新分页

1.无刷新分页的必要性

如果我们通过“传统方式”实现上图的商品评论分页效果,每次分页的时候就会使得头部、左侧、底部等已经显示的信息重新从服务器获得出来,这样对带宽、服务器资源、用户等待时间都有额外的损耗。如果使用ajax无刷新分页,每次就只从服务器获得“商品评论区域”信息即可,对各方面资源的使用就有相应节省。因此ajax无刷新分页效果有其存在必要性。

2. 具体实现

商品总记录条数、每页显示多少条

mysql数据库关键字limit。

limit  偏移量,长度。

偏移量:(当前页码-1)*每页显示条数。

limit  0,7  

limit  7,7

limit  14,7

 

ajax无刷新分页是对传统分页效果的封装:

http://网址/data.php?page=1

http://网址/data.php?page=2

http://网址/data.php?page=3

http://网址/data.php?page=4

ajax对象.open(‘get’,’./data.php?page=3’);

以上是ajax通过无刷新方式获得第3页数据

(六)、Ajax对XML信息的接收和处理

php(动态网站)可以接收处理xml信息

javascript(静态网站)也可以接收处理xml信息

开发微信接口,微信里边大部分数据都是通过xml形式给组织起来的

这样就有需求,php的网站要和微信进行数据交换

  静态网站(html/css/javascript)也要和微信进行数据交换

  这样我们就要研究下javascript如何接受处理xml

 

客户端(javascript+dom)<-----------ajax<-------------服务器端的xml信息

 

ajax负责请求xml和接收xml信息,dom负责处理xml信息

dom:

php里边,dom是php与xml(html)之间的沟通桥梁

javascript里边,dom是javascript与html(xml)之间沟通桥梁

(七)、Ajax对缓存的处理

缓存:

浏览器的一次请求需要从服务器获得许多 css、img、js 等相关的文件,如果每次请求都把相关的资源文件加载一次,对 带宽、服务器资源、用户等待时间 都有严重的损耗,浏览器有做优化处理,其把css、img、js等文件在第一次请求成功后就在本地保留一个缓存备份,后续的每次请求就在本身获得相关的缓存资源文件及可以了,可以明显地加快用户的访问速度。

css、img、js等文件可以缓存,但是动态程序文件例如php文件不能缓存,即使缓存我们也不要其缓存效果。(IE浏览器会缓存动态程序文件)

 

浏览器对动态程序文件缓存的处理解决:

① 给请求的地址设置随机数[推荐]

② 给动态程序设置header头信息,禁止浏览器对其缓存

运行原理:异步Javascript和XML。相当于在用户和服务器之间增加了一个中间层(Ajax引擎),使用户操作与服务器响应异步化。

优点:页面无刷新,用户体验好、异步与服务器通信、前后端负载平衡、基于标准被广泛支持、界面与应用分离。

缺点:破坏了浏览器机制、对搜索引擎支持较弱、Ajax的安全问题、破坏了程序的异常处理机制。

Ajax请求之get和post不同之处:1)、给服务器传送数据大小不同,2)、post传送数据比get更安全,3)、传送数据形式不同。

Ajax之同步与异步:1)、同步:同一时间点允许执行多个进程,2)、异步:同一时间点只允许一个进程。

 

 

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值