文档介绍：第一章 PHP&AJAX 使用jQuery简化Ajax操作
本章结构:
提升用户体验―使用Ajax
二. 使用jQuery简化Ajax操作
一. 提升用户体验―使用Ajax
(一). Ajax的概念:
ajax是asynchronous javascript and xml的缩写,是javascript、xml、css、DOM等多个技术的组合。
这个技术可以实现客户端异步请求操作,也就是在不需要刷新页面的情况下与服务器通信,减少用户等待时间。
(二). Ajax的工作原理:
页面中用户的请求通过ajax引擎与服务器进行通信,服务器将返回的结果提交给客户端页面中的ajax引擎,由这个引擎来决定讲返回的数据插入到页面中指定位置。
这样就实现了在不刷新整个页面的情况下,对部分数据进行更新,从而降低了网络流量,增强了客户体验的友好程度。
(三). Ajax的优缺点:
优点是:
1. 减轻了服务器端负担,将一部分以前由服务器负担的工作转移到客户端执行,利用客户端闲置的资源进行处理;
2. 在无刷新的情况下更新页面,增加了页面反应速度,使用户体验更友好。
缺点是:
1. 不利于seo推广优化,因为搜索引擎无法直接访问到ajax请求的内容。必须通过类似网站地图一类的手段来弥补该损失。
一. 提升用户体验―使用Ajax
一. 提升用户体验―使用Ajax
(四). Ajax的核心技术:
ajax的核心技术是XMLHttpRequest,它是javascript中的一个对象,。
因为XMLHttpRequest不是W3C的标准,所以在不同浏览器下对它初始化的方法也不同。
1. IE浏览器初始化XMLHttpRequest:
xmlHttp = new ActiveXObject("");
或者:
xmlHttp = new ActiveXObject("");
2. 非IE浏览器初始化XMLHttpRequest:(如:Mozilla,safari)
xmlHttp = new XMLHttpRequest();
备注: XMLHttpRequest()来初始化XMLHttpRequest。
一. 提升用户体验―使用Ajax
(五). XMLHttpRequest对象的常用方法:
()方法:
例如:('GET' , url , true);
()方法:
如果没有参数的时候,该方法写成send(null);
()方法:
该方法必须在调用open()方法之后才可以调用。
固定写法为:('Content-Type' , 'application/x-ded');
一. 提升用户体验―使用Ajax
(六). XMLHttpRequest对象的常用属性:
1. onreadystatechange:
当状态改变的时候会触发一个指定的事件处理器,也就是触发执行一个函数。例如以下写法:
= callServer;//该语句就是指定一个响应方法,或者说是触发执行一个回调函数。
2. readyState:
请求的状态有5个值,分别为0,1,2,3,4。
4表示加载url完成,并且获取到该页面的所有返回信息。
用法如下:
if ( == 4)
一. 提升用户体验―使用Ajax
(六). XMLHttpRequest对象的常用属性:
:
当访问一个url之后,返回服务器的http状态码,常见的状态码为:
200, 表示页面访问成功;
400, 表示请求错误;
404, 表示访问的文件不存在或没有找到;
500, 表示访问的url所在的服务器发生错误。
用法如下:
if ( == 200)
:
表示当访问一个url成功后,将获取到的文字信息返回到页面,也就是说返回一个字符串。
一. 提升用户体验―使用Ajax
(七)实例代码如下(可直接将代码复制到别处执行或查看)
<script language="javascript" type="text/javascript">
//以下是AJAX公共函数
var oDiv;
var xmlHttp = false;
function cre