码迷,mamicode.com
首页 > Web开发 > 详细

20150227--Ajax1-02

时间:2016-05-06 02:10:09      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

Ajax中的get请求缓存问题

在Ajax中,当我们在IE浏览器中使用GET请求发送数据,系统会自动缓存数据,当下次访问时,系统会自动调用缓存,其初衷是希望将请求资源进行缓存到本地浏览器,当下次继续访问时,如请求资源没有改变,系统自动调用缓存文件,减少服务器开销,加快访问速度,提高用户体验。但是有些情况,我们是不需要进行缓存的,那么如何解决以上问题呢?

回顾上午的两个数求和案例:

运行发现,当我们更改PHP页面的运算符为减法时,由于IE缓存问题,系统还是返回上一次求和的运行结果,这给我们带来很多不便,那么如何解决缓存问题呢?

1通过随机数解决缓存问题

示例代码:

技术分享

运行结果:

技术分享

通过以上方式运行,发现可以解决缓存问题,但是会产生以下影响:

1)通过随机数方式解决缓存问题,会在IE浏览器端产生大量缓存文件

2)随机数在请求时,也可能会产生相同的结果

2、通过时间戳的方式解决缓存问题

技术分享

通过时间戳的方式可以弥补随机数重复的情况,但是其也会在客户端产生大量缓存。

技术分享

3、通过缓存文件的最后修改时间解决缓存问题

通过刷新浏览器可以发现,当我们请求同一url地址时,第二次访问时,系统会自动发送以下请求头信息(If-Modified-Since),此参数记录了当前url地址所生成的缓存文件的最后修改时间,当下次发送请求时,系统会自动在请求头中追加此信息用于判断当前客户端缓存文件的最后修改时间与服务器端记录的服务器资源的最后修改时间是否一致,如一致,则直接调用缓存文件,否则,重新生成新资源文件。

技术分享

原理图如下:

技术分享

既然我们发现当第二次请求同一url地址时,系统会自动校检If-Modified-Since请求头信息,那么我们可以把该参数设置成一个任意值(如0)永远不会和文件最后修改时间相等即可。

示例代码:

技术分享

以上方式也会生成缓存文件,但是只会生成一个缓存文件。

技术分享

4、通过设置响应头信息来解决缓存问题

header("Cache-Control: no-cache, must-revalidate");

示例代码:

技术分享

技术分享

、Ajax中的post请求

1、回顾get与post请求的区别

大小不同:

get请求有大小限制 2k

post请求无大小限制(在HTTP中),但从PHP的角度,其是有大小限制的8M(php.ini),一般情况下,通常CMS或框架会对上传文件进行2M限制

参数不同:

get请求其参数是追加在url的尾部

post请求其参数是追加在空白行

安全方面:

post安全性要高于get请求

2、Ajax中的post请求

Ajax中的post请求六步走:

1)创建ajax对象

2)设置回调函数

3)初始化Ajax对象

4)设置请求头信息

5)发送Ajax请求

6)判断与执行

例1:通过Ajax实现两个数的求和

demo07.html

技术分享

demo07.php

技术分享

运行结果:

技术分享

例2:无刷新录入功能

demo08.html

技术分享

demo08.php

技术分享

Ajax中的XML

1什么是XML

答:可扩展标记语言

2、XML主要作用?

答:传输数据与存储数据

3PHPXML

PHP DOM模型解析XML

PHP SimpleXML来解析XML

4PHP DOM

“面” “串” “点”

$dom=new DOMDocument();

$dom->load($str);

$node=$dom->getElementsByTagName(“TagName”);

$value=$node>item(0)->nodeValue

5、PHP SimpleXML

$xml=simplexml_load_string($str);

$first = $xml->first;

$second= $xml->second;

6Javascript中的DOM模型

标准DOM与非标准DOM模型

PHP DOM模型属于非标准DOM模型

技术分享

Javascript DOM模型属于标准的DOM模型

技术分享

由上图结构可以发现,标准DOM模型在解析时要比非标准DOM复杂一些

7Javascript中解析XML

var xml=xmlHttp.responseXML;

node=xml.getElementsByTagName(“TagName”);

node[0].childNodes[0].nodeValue;

childNodes[] :当前元素的所有子元素集合,本身是一个数组

例1:求两个数的四则运算

demo09.html

技术分享

demo09.php

技术分享

运行结果:

技术分享

例2:通过Ajax+XML获取分类信息,并将其存储在select下拉列表中

demo10.html

技术分享

demo10.php

技术分享

运行结果:

技术分享

、作业

Ajax+Smarty完成无刷新分页效果

20150227--Ajax1-02

标签:

原文地址:http://www.cnblogs.com/lifushan/p/5463967.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!