文档介绍：
传说中的 Ajax (上) 一、 Ajax 历史 1、历史起源 1998 年微软公司 IE5 浏览器 XMLHTTP ( Outlook Web Access ) 2005 年谷歌公司 Gmail 邮箱、 Google 建议、 Google 地图… 2、什么是 Ajax ? Asynchronous : 异步? JavaScript : jS ? And :和? XML :可扩展标记语言( 数据交换与存储) 解析:异步 Javascript 与 XML 3、 Web 技术客户端技术: ? Html ? Css ? Javascript 服务端技术: ? ASP() ? JSP ? PHP 4 、同步请求与异步请求 1) 同步请求所有数据处理完毕同一返回 2) 异步请求一般处理请求一边返回一部分数据 5、快速入门 demo01_rumen.html demo01.php 运行效果: 二、 Ajax 详解: 1、 Ajax 对象使用 Ajax 必须有一个前提: 必须要创建一个 Ajax 对象, 由于 Javascript 代码是基于客户端浏览器的,所以 Ajax 对象也有两种不同的创建方式: 1) ActiveXobject IE 内核浏览器( IE8 以下版本)下创建方式如下: var Ajax 对象= new AcitveXObject( ‘ Microsoft.XMLHTTP ’); 2) XMLHttpRequest W3C 内核浏览器( Google 浏览器, *** 极速浏览器) 下创建方式如下: 2、常用方法严格大小写① open(method,url) :初始化 Ajax 对象参数说明: method : 请求方法, get 请求或 post 请求 url : 请求的 url 地址② setRequestHeader(header,value) : 设置请求头信息参数说明: header :请求头参数 value :请求头的值③ send(content) :发送 Ajax 请求参数说明: content 代表发送 Ajax 请求时所传递的参数或内容如果是 get 请求,此参数为 null 如果是 post 请求,此参数为要发送的数据 3、常用属性严格大小写? onreadystatechange : 每次 Ajax 状态码发生改变所触发的回调函数? readyState : Ajax 状态码·0 :表示对象已建立,但未初始化创建了 Ajax 对象,但是未调用 open 方法·1 :表示对象已初始化,但未发送调用了 open 方法,但未调用 send 方法·2 :已调用 send 方法进行请求调用 send 方法,但未接收到数据·3 :正在接收数据(接收到一部分服务器端返回的数据) ·4 :接收完成(当服务器端处理完所有数据) ? status : http 的响应状态码, 200 ( 接收到数据) 404 (未找到页面) ? statusText :响应状态文本(了解) ? res ponseText :响应文本(返回最终结果) 如果服务器端返回文本类型的数据,那么可以通过 responseText 进行接收? responseXML :响应文本(返回最终结果) 如果服务器端返回 XML 格式的大批量数据,那么可以通过 response XM L 进行接收三、 Ajax 中的 GET 请求 1、 Ajax 中 get 请求五步走第一步:创建 Ajax 对象第二步:设置回调函数 onreadystatechange 第三步:初始化 Ajax 对象 open 第四步:发送 Ajax 请求 send 第五步:判断与执行(判断 readyState 为4所执行的相关程序) ①创建 Ajax 对象( 解决 Ajax 兼容性问题) 1 )创建一个 public .js 公用文件 2) 创建 createXhr() 函数用于解决 Ajax 对象兼容性问题示例代码: 运行结果: 2、几个小问题 1) 问题:为什么在服务端页面,我们是通过 echo 进行输出,而不是通过 return ? 说明: echo 方法与 return 方法都有返回的含义,但是如果使用 return 方法发现客户端无法接收到服务端返回的数据,主要是由于 return 方法是返回数据到服务端,而 echo 是返回数据到浏览器,由于 Ajax 是基于客户端浏览器的所以可以接收返回结果。 2) 问题:如果 Ajax 请求的页面不存在会出现什么效果? 根据 http 状态码解决如果服务端页面不存在,当发送 Ajax 请求时,系统自动返回如下结果: 在实际项目开发中以上方式必须禁止掉, 如何解决以上问题: 以上代码还可以进一步简写成如下形式: 3、 Ajax 中 get 传递参数 get 如何传参? 如果使用 get 请求传递参数其是追加参数在 url 尾部运行结果: hello , zhangsan 。调试说明: 4、综合案例:判断用户名是否唯一 Demo02.html < script > //js :对象,事件,事件处理函数 window.onload = function (){ // 回调函数:直接调用,, ,可变函数:利用变量调用// 对象:inp 事件:失去焦点$( "inp" ).onblur = function (){ // 第一步:创建 ajax 对象 var xhr = createXhr(); // 第二步:设置回调函数 xhr.onreadystatechange = function (){ // 第五步: 判断与执行:当 ajax 状态码为 4 而且 http 状态码为 200 的时候=> url 正常 if (xhr.readyState == 4 && xhr.status == 200){ //alert(xhr.responseText); if (xhr.responseText == 1){ $( 'sp' ).innerHTML = '<font color="red"> 用户名已存在</font>' ;} else { $( 'sp' ).innerHTML = '<font color="green"> 用户名可用</font>' ;}} else { $( 'sp' ).innerHTML =" 请等待..." ; }} // 获取文本框内的内容 var username = $( 'inp' ).value;

1