Ajax01笔记Word格式文档下载.docx

Ajax01笔记Word格式文档下载.docx

《Ajax01笔记Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《Ajax01笔记Word格式文档下载.docx（21页珍藏版）》请在冰豆网上搜索。

5、实际应用：

使用Ajax验证用户名是否唯一11

四、解决Ajax中的缓存问题12

1、什么是IE缓存12

2、IE缓存作用12

3、解决Ajax技术中get请求的缓存问题13

1）使用随机数解决缓存问题13

2）使用时间戳解决缓存问题（重点）13

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

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

五、Ajax中的post请求15

1、get请求与post请求的区别15

2、Ajax中post请求六步走16

3、实际应用：

使用Ajax+PHP实现无刷新登陆功能17

六、Ajax中的xml数据18

1、什么是XML18

2、XML执行原理图18

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

4、作业：

20

一、Ajax概述

1、历史起源

1998年，微软公司OutlookWebAccess研发小组在当时的IE浏览器中集成了一种技术，可以在客户端无刷新的前提下向服务器端发送Http请求，这门技术称之为“XMLHTTP”。

2005年，谷歌公司在自家的多款产品（Gmail邮箱、GoogleSuggest搜索建议、Google地图）中应用了Ajax技术，从此Ajax火的一塌糊涂…

2、什么是Ajax技术

•Asynchronous：

异步

•JavaScript：

Javascript技术

•And：

和

•XML：

可扩展标记语言，主要用于数据的传输与存储

所谓的Ajax技术就是异步的Javascript和XML，由于XML主要用于数据的传输与存储，由此可知：

Ajax的核心就是异步的Javascript。

3、Web技术

客户端语言：

•Html

•Css

•Javascript

服务端语言：

•ASP（ASP.NET）

•JSP

•PHP

由于Ajax是异步的Javascript，所以我们可以确定：

Ajax也是运行于客户端浏览器的。

4、Ajax工作模式

同步请求在网速比较慢的情况下，其体验度是非常不理想的，因为给用户的感觉整个请求就是不连续的过程。

由上图可知，当用户发送请求时，系统首先把请求发送Ajax对象，Ajax对象在对请求进行发送，然后服务器端对其请求进行处理，但是在处理还没有完成的过程中，其就会返回一部分数据给客户端，所以对于用户而言，整个请求是一个连续的过程，体验度非常好。

5、Ajax应用场景

①表单验证（实时验证用户名是否唯一）

②XX下拉搜索

③无刷新分页

④WebAPP手机+PHP后台程序（手机APP）

6、快速入门

demo01_rumen.html

demo01.php

运行结果：

二、Ajax对象

1、为什么需要Ajax对象

记住：

使用Ajax技术有一个前提，必须要创建一个Ajax对象。

2、如何创建Ajax对象

基于IE内核浏览器（IE8以下的IE浏览器、各种浏览器的兼容模式）

varAjax对象=newActiveXObject（‘Microsoft.XMLHTTP’）;

基于W3C内核浏览器（火狐、Google浏览器、各种浏览器的极速模式）

varAjax对象=newXMLHttpRequest（）;

3、解决Ajax对象的兼容性问题

①创建一个public.js文件，作为核心代码库

②定义一个$函数，用于获取指定id的dom对象

③定义一个公用函数，如createXhr（），用于创建Ajax对象

4、Ajax对象中的属性和方法

常用方法

•open（method,url）：

初始化Ajax对象（设置请求类型与请求地址）

•setRequestHeader（header,value）：

设置请求头

参数说明：

header：

请求头

value：

值

•send（content）：

发送Ajax请求

content：

在请求空白行传递的参数，如果是get请求，此值为null

常用属性

•onreadystatechange：

当Ajax状态码发生改变时所触发的回调函数

•readyState：

Ajax状态码

0：

表示对象已建立，但未初始化，调用了createXhr方法，但是未调用open方法

1：

表示对象已初始化，但未发送，调用了open方法，但是未调用send方法

2：

已调用send方法进行请求

3：

正在接收数据（接收到一部分）

4：

接收完成

•status：

响应状态码，200接收完成，404未找到页面

•statusText（了解）：

响应状态文本

•reponseText：

响应结果

•responseXML：

如果服务器端返回字符串，则使用xhr.responseText进行接收

如果服务器端返回XML格式的数据，则使用xhr.responseXML进行接收

三、Ajax中的get请求

Ajax中get请求五步走

①创建Ajax对象

②设置回调函数

③初始化Ajax对象

④发送Ajax请求

⑤判断与执行

2、使用Ajax技术发送get请求

demo04.php

3、使用Ajax中的get请求进行传值操作

demo05.php

4、几个小问题

1）问题：

我们在使用Ajax时发现，我们在服务器端都是通过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：

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

使用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）

第五步：

第六步：

判断与执行

demo08.php

使用Ajax+PHP实现无刷新登陆功能

demo09.php

六、Ajax中的xml数据

1、什么是XML

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

2、XML执行原理图

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

PHPDOM模型（实现增删改操作）

PHPSimpleXML模型（实现查询操作）

1）PHPDOM模型（非标准DOM模型）

①开辟内存空间

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

【非标准DOM模型】

【标准DOM模型】

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

非标准DOM模型：

找点直接通过nodeValue属性输出其值

标准DOM模型：

找点找其子节点通过nodeValue属性输出文本节点值

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

例：

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

要使用到的知识：

childNodes：

获取当前元素的所有子元素，返回数据

demo10.php

1）使用Ajax+XML无刷新读取分类信息

要求：

在页面中定义一个按钮，定义一个下拉选框，单击按钮可以无刷新获取服务器端的数据放入下拉选框中。

2）使用Ajax+Smarty实现无刷新分页效果