20150825ajax教程方案.docx

传说中的Ajax（上）一、Ajax历史1、历史起源1998年 微软公司 IE5浏览器 XMLHTTP （Outlook Web Access）2005年 谷歌公司Gmail邮箱、Google建议、Google地图…2、什么是AjaxAsynchronous ：异步JavaScript ：jSAnd ：和XML ：可扩展标记语言（数据交换与存储）解析：异步Javascript与XML3、Web技术客户端技术：HtmlCssJavascript服务端技术：ASP(ASP.NET)JSPPHP4、同步请求与异步请求1）同步请求所有数据处理完毕同一返回异步请求一般处理请求一边返回一部分数据5、快速入门demo01_rumen.htmldemo01.php运行效果：二、Ajax详解：1、Ajax对象使用Ajax必须有一个前提：必须要创建一个Ajax对象，由于Javascript代码是基于客户端浏览器的，所以Ajax对象也有两种不同的创建方式：ActiveXobjectIE内核浏览器（IE8以下版本）下创建方式如下：varAjax对象 = new AcitveXObject(‘Microsoft.XMLHTTP’);XMLHttpRequestW3C内核浏览器（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：响应状态文本（了解）responseText：响应文本（返回最终结果）如果服务器端返回文本类型的数据，那么可以通过responseText进行接收responseXML：响应文本（返回最终结果）如果服务器端返回XML格式的大批量数据，那么可以通过responseXML进行接收三、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。调试说明：综合案例：判断用户名是否唯一Demo02.htmlscript//js：对象，事件，事件处理函数window.onload = function(){//回调函数：直接调用，，，可变函数：利用变量调用//对象:inp 事件：失去焦点$(inp).onblur = function(){//第一步：创建ajax对象var xhr = createXhr();//第二步：设置回调函数