Java相关课程系列笔记之十一Ajax学习笔记(建议用WPS打开).doc

Ajax学习笔记 Java相关课程系列笔记之十一 笔记内容说明 Ajax（程祖红老师主讲，占笔记内容100%）；目 录 一、 Ajax概述 1 1.1什么是Ajax 1 1.2 Ajax对象：如何获得Ajax对象 1 1.3 Ajax对象的属性 2 1.4编程步骤 2 1.5编码问题 3 1.6 Ajax的优点 3 1.7缓存问题（IE浏览器） 4 1.8案例：简易注册（使用Ajax进行相关验证，get请求） 4 1.9案例：修改1.8案例，使用post请求 6 1.10案例：使用Ajax实现下拉列表 6 二、 JSON 7 2.1什么是JSON 7 2.2数据交换 7 2.3轻量级 7 2.4 JSON语法（） 7 2.5如何使用JSON来编写Ajax应用程序 8 2.6案例：股票的实时行情 9 2.7案例：显示热卖的前3个商品 10 2.8同步请求 10 2.9案例：修改1.8案例step1中的JS代码（使用同步请求） 11 Ajax概述 1.1什么是Ajax Asynchronous Javascript And Xml（异步的JavaScript和Xml）。是一种用来改善用户体验的技术，其实质是利用浏览器内置的一个特殊对象（XMLHttpRequest，一般称之为Ajax对象）异步地（Ajax对象在向服务器发送请求时，浏览器并不会销毁当前页面，用户仍然可以对当前页面作其他的操作）向服务器发送请求，服务器送回部分数据（不是一个完整的新的页面，而是文本或者Xml文档），在浏览器端，可以利用这些数据部分更新当前页面。整个过程，页面无刷新，不打断用户的操作。 之前，都是先销毁原来的页面，然后发送请求，等待服务器发送响应，再生成新页面。 Ajax的工作流程： 1.2 Ajax对象：如何获得Ajax对象 由于XMLHttpRequest（Ajax对象）没有标准化，所以要区分浏览器。 function getXhr(){//注意：后面的案例都将用到此函数 var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest();//非IE浏览器 }else{ xhr=new ActiveXObject(Microsoft.XMLHttp);//IE浏览器 } return xhr; } 注意事项：后面的案例也会用到以下函数 function $(id){//依据id返回dom节点 return document.getElementById(id); } function $F(id){//返回id对应的值 return $(id).value; } 1.3 Ajax对象的属性 1）onreadystatechange：绑定一个事件处理函数（监听器），该函数用来处理readystatechange事件。Ajax对象的readyState属性发生改变，比如从0到1，则会产生onreadystatechange事件。 2）responseText：获得服务器返回的文本数据。 3）responseXML：获得服务器返回的Xml文档。 4）status：获得状态码。 5）readyState：返回Ajax对象与服务器通讯的状态，返回值是一个number类型的值。一共有5个值，分别是： ①0：（未初始化）对象已建立，但是尚未初始化（尚未调用open方法）。 ②1：（初始化）对象已建立，尚未调用send方法。 ③2：（发送数据）send方法已调用。 ④3：（数据传送中）已接收部分数据。 ⑤4：（响应结束）Ajax对象已经获得了服务器返回的所有的数据。 1.4编程步骤 1）发送get请求： step1：获得Ajax对象，比如：var xhr=getXhr();//调用之前定义的函数 step2：使用Ajax对象发送get请求 ①调用xhr.open(get,check_username.do?username=changage=23,true);方法：建立与服务器之间的连接，三个参数依次为：请求方式、请求资源路径、请求是同步还是异步。 true：表示异步请求（Ajax对象发送请求时，用户可以对当前页面作其他的操作，不会销毁页面）。 false：表示同步请求（Ajax对象发送请求时，浏览器会锁定当前页面，用户只能等待，不会销毁页面）。 ②xhr.onreadystatechange=func1();：绑定一个事件处理函数（监听器） ③xhr.send(null);：发送请求参数，因为参数已经写在了请求资源路径中，所以这里为null。 step3：编写服务器端的处理程序，跟以前相比，有一点点改变，就