35-Ajax五步走.docxVIP

传说中的Ajax（上）目录传说中的Ajax（上）1一、Ajax历史21、历史起源22、什么是Ajax23、Web技术24、同步请求与异步请求31）同步请求32）异步请求35、快速入门3二、Ajax详解41、Ajax对象42、Ajax常用属性与方法51）常用方法52）常用属性63、编写Ajax五步走6一、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）同步请求2）异步请求5、快速入门demo01_rumen.htmldemo01.php运行效果：二、Ajax详解1、Ajax对象使用Ajax必须有一个前提：必须要创建一个Ajax对象，由于Javascript代码是基于客户端浏览器的，所以Ajax对象也有两种不同的创建方式：IE内核浏览器（IE8以下版本）下创建方式如下：var Ajax对象 = new AcitveXObject(‘Microsoft.XMLHTTP’);W3C内核浏览器（Google浏览器，***极速浏览器）下创建方式如下：2、Ajax常用属性与方法1）常用方法① open(method,url) ：初始化Ajax对象参数说明：method：请求方法，get请求或post请求url：请求的url地址② setRequestHeader(header,value) ：设置请求头信息参数说明：header：请求头参数value：请求头的值③ send(content) ：发送Ajax请求参数说明：content代表发送Ajax请求时所传递的参数或内容如果是get请求，此参数为null如果是post请求，此参数为要发送的数据2）常用属性onreadystatechange ：当Ajax状态码发生改变所触发的回调函数readyState ：Ajax状态码0：表示对象已建立，但未初始化 创建了Ajax对象，但是未调用open方法1：表示对象已初始化，但未发送 调用了open方法，但未调用send方法2：已调用send方法进行请求 调用send方法，但未接收到数据3：正在接收数据（接收到一部分服务器端返回的数据）4：接收完成 （当服务器端处理完所有数据）status ：响应状态码，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请求的页面不存在会出现什么效果？如果服务端页面不存在，当发送Ajax请求时，系统自动返回如下结果：在实际项目开发中以上方式必须禁止掉，如何解决以上问题：以上代码还可以进一步简写成如下形式：3、Ajax中get传递参数get如何传参？如果使用get请求传递参数其是追加参数在url尾部运行结果：hello ，zhangsan。调试说明：4、综合案例：判断用户名是否唯一服务端页面运行结果：四、Ajax中缓存问题例1：通过Ajax中的get请求完成两个数的求和demo06.php运行结果：再次运行，调试结果如下：在IE浏览器下，在一定时间内，如果向同一个url发送请求，第一次请求时，IE浏览