AJax技术

Ajax 技术1(2)

字号+ 作者:H5之家 来源:H5之家 2017-01-26 15:00 我要评论( )

答:虽然echo语句和return语句都有返回的含义,但是两者返回的位置是不同的,return语句是返回数据给服务器端,而echo输出主要是返回输出数据到客户端(浏览器)。所以在服务器端只能使用echo语句而不能使用return

答:虽然echo语句和return语句都有返回的含义,但是两者返回的位置是不同的,return语句是返回数据给服务器端,而echo输出主要是返回输出数据到客户端(浏览器)。所以在服务器端只能使用echo语句而不能使用return语句

2)问题:在Ajax发送请求时,如果请求的页面不存在会出现什么结果?

答:如果当我们请求的服务器端页面不存在,其Ajax也会返回如下结果:

但是在实际项目开发中,如果出现以上弹窗对用户的体验并不好,所以必须要禁止这种行为,

我们可以通过判断服务器端的响应状态码来避免以上情况的产生:

以上代码也可以进一步简化为如下形式:

3)问题:在实际项目开发中,以上的判断语句xhr.readyState==4与xhr.status==200位置是否可以调换?

答:不可以,因为在实际项目开发中,一定是先判断Ajax状态码,当其为4时才代表完全接收到服务器端返回的数据,而status代表的是在readyState等于4的基础上判断服务器端的返回状态码,所以两者之间的顺序是不可以调换的。

4)问题:Ajax在开发中如何进行调试呢?

① 如果是Ajax语法错误,我们可以直接通过IE的状态栏或Firefox中的Firebug插件中的控制台直接捕获。

② 服务器端错误,如果在开发时,发现返回结果异常,我们可以通过httpwatch或W3C浏览器的网络面板进行调试。

httpwatch:

Firebug:

Google:

③ 如果在开发中遇到逻辑错误,如何处理

5、实际应用:使用Ajax验证用户名是否唯一

demo06.php

说明:在实际应用案例中,我们可以通过Ajax+PHP完成用户名是否唯一的验证,但是运行时发现,以上案例在IE浏览器下会产生缓存问题,导致请求结果异常,实际项目开发中,如何解决这个问题呢?

四、解决Ajax中的缓存问题 1、什么是IE缓存

当我们在IE浏览器下第一次向某个url地址发送get请求时,系统会自动将请求的资源文件进行缓存,并存放于客户端浏览器中,我们把这个文件就称之为"IE缓存"。

2、IE缓存作用

微软公司在自家的IE浏览器中使用缓存技术,是为了让用户可以快速的获取服务器端的响应数据。

实现过程:当IE浏览器对请求的资源文件缓存后,当下一次向同一url发送请求时,系统会自自动调用缓存文件。但是其在实际应用中也存在一个缺点:如果服务器端数据有更新,那么我们无法实时的获取最新数据。

3、解决Ajax技术中get请求的缓存问题 1)使用随机数解决缓存问题

运行结果:

说明:虽然我们可以使用随机数来人为更改请求的url地址,让每次请求的url都不一致。但是随机数无法保证每次产生的随机数都是唯一的,也可能出现重复的情况。另外,每次请求时都会产生缓存文件,所以随机数会在客户端产生大量的缓存文件。

2)使用时间戳解决缓存问题(重点)

在实际开发中,我们知道时间戳是永远都不会重复的,所以可以使用此方法来解决缓存问题。

运行结果:

说明:我们虽然可以使用时间戳解决缓存问题,但是其也会在客户端生成大量的缓存文件。

3)使用文件的最后修改时间来解决缓存问题(重要)

缓存核心机理:

如果想解决缓存问题,我们可以人为改变If-Modified-Since其值,让其每次校检时都与服务器的资源文件不一致即可解决缓存问题。

运行结果:

说明:以上程序虽然可以解决缓存问题,那么其是不是也要生成大量的缓存文件呢?

答:不会,因为我们每次请求的url地址都是一致的,所以其只会生成1个缓存文件,当第二次请求时,系统只会更新缓存文件而已,而不会重新生成。

4)使用禁止缓存功能来解决Ajax的缓存问题

可以在服务器端页面添加以下菜单,这样就可以告诉浏览器不要缓存当前页面,从而解决缓存问题:

header函数主要功能:告诉浏览器执行某些操作,以上代码代表告诉浏览器不要缓存当前页面,每次请求时都需要重新获取最新数据,从而从根本上禁用缓存。

运行结果:

以上程序从根本上禁用了缓存,终极解决方案。

五、Ajax中的post请求 1、get请求与post请求的区别

① 传参方式不同

get请求在传参时是把参数追加在url的尾部

post请求在传参时是把参数追加在请求空白行位置

② 安全性不同

post请求安全性要略高于get请求

③ 传参时参数大小不同

get请求传参时其值最大为2kb,而post请求理论上没有大小限制,但是在实际项目开发中,主要受到php.ini文件的影响,一般情况下最大值为8M或2M

④ 请求头信息不同

get请求:

post请求:

相对比而言,post请求比get请求多了一个请求头信息:

Content-type:application/x-www-form-urlencoded

2、Ajax中post请求六步走

第一步:创建Ajax对象

第二步:设置回调函数

第三步:初始化Ajax对象

第四步:设置请求头信息(设置Content-type)

第五步:发送Ajax请求

第六步:判断与执行

demo08.php

3、实际应用:使用Ajax+PHP实现无刷新登陆功能

demo09.php

六、Ajax中的xml数据 1、什么是XML

所谓的XML就是可扩展标记语言,主要实现大批量数据的传输与存储

2、XML执行原理图

PHP可以实现对XML的解析操作,一共提供了两种解决方案:

PHP DOM模型(实现增删改操作)

PHP SimpleXML模型(实现查询操作)

1)PHP DOM模型(非标准DOM模型)

① 开辟内存空间

② 载入xml文件到内存形成DOM树结构

【非标准DOM模型】

【标准DOM模型】

Javascript中的DOM模型就是标准的DOM模型,在实际应用中,标准DOM模型和非标准DOM模型主要区别就在于:

非标准DOM模型:找点à直接通过nodeValue属性输出其值

标准DOM模型:找点à找其子节点à通过nodeValue属性输出文本节点值

3、使用Ajax+XML实现大批量数据的解析

例:使用Ajax+XML返回两个数的四则运算结果

要使用到的知识:

childNodes:获取当前元素的所有子元素,返回数据

demo10.php

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax核心技术之文档对象模型概述

    Ajax核心技术之文档对象模型概述

    2017-01-26 15:11

  • Ajax技术与ASP.NET框架结合使用

    Ajax技术与ASP.NET框架结合使用

    2017-01-26 14:02

  • ajax button提交表单的相关文章,教程,源码

    ajax button提交表单的相关文章,教程,源码

    2017-01-26 10:00

  • bootstrap入门教程:JQuery ajax.ppt 全文免费在线阅读

    bootstrap入门教程:JQuery ajax.ppt 全文免费在线阅读

    2017-01-25 10:00

网友点评