Ajax学习笔记.docx

1、Ajax学习笔记 Ajax学习笔记Java相关课程系列笔记之十一 笔记内容说明Ajax（程祖红老师主讲，占笔记内容100%）； 目录一、 Ajax概述.11.1什么是 Ajax.11.2 Ajax对象：如何获得 Ajax对象. 11.3 Ajax对象的属性. 21.4编程步骤.21.5编码问题.31.6 Ajax的优点. 31.7缓存问题（IE浏览器）.41.8案例：简易注册（使用 Ajax进行相关验证，get请求）.41.9案例：修改 1.8案例，使用 post请求.61.10案例：使用 Ajax实现下拉列表.6二、 JSON. 82.1什么是 JSON. 82.2数据交换.82.3轻量级.

2、82.4 JSON语法（www.json.org）.82.5如何使用 JSON来编写 Ajax应用程序.92.6案例：股票的实时行情.102.7案例：显示热卖的前 3个商品.112.8同步请求.112.9案例：修改 1.8案例 step1中的 JS代码（使用同步请求）.121 ZAjax 学习笔记 一、Ajax概述1.1什么是 AjaxAsynchronous Javascript And Xml（异步的 JavaScript和 Xml）。是一种用来改善用户体验的技术，其实质是利用浏览器内置的一个特殊对象（ XMLHttpRequest，一般称之为 Ajax对象）异步地（Ajax对象在向服务器

3、发送请求时，浏览器并不会销毁当前页面，用户仍然可以对当前页面作其他的操作）向服务器发送请求，服务器送回部分数据（不是一个完整的新的页面，而是文本或者 Xml文档），在浏览器端，可以利用这些数据部分更新当前页面。整个过程，页面无刷新，不打断用户的操作。之前，都是先销毁原来的页面，然后发送请求，等待服务器发送响应，再生成新页面。Ajax的工作流程：1.2 Ajax对象：如何获得 Ajax对象由于 XMLHttpRequest（Ajax对象）没有标准化，所以要区分浏览器。function getXhr()/注意：后面的案例都将用到此函数var xhr=null;if(window.XMLHttpRe

4、quest)xhr=new XMLHttpRequest();/非 IE浏览器elsexhr=new ActiveXObject(Microsoft.XMLHttp);/IE浏览器return xhr; 注意事项：后面的案例也会用到以下函数function $(id)/依据 id返回 dom节点return document.getElementById(id);function $F(id)/返回 id对应的值return $(id).value;1 ZAjax 学习笔记 1.3 Ajax对象的属性1）onreadystatechange：绑定一个事件处理函数（监听器），该函数用来处理 re

5、adystatechange事件。Ajax对象的 readyState属性发生改变，比如从 0到 1，则会产生 onreadystatechange事件。2）responseText：获得服务器返回的文本数据。3）responseXML：获得服务器返回的 Xml文档。4）status：获得状态码。5）readyState：返回 Ajax对象与服务器通讯的状态，返回值是一个 number类型的值。一共有 5个值，分别是：0：（未初始化）对象已建立，但是尚未初始化（尚未调用 open方法）。1：（初始化）对象已建立，尚未调用 send方法。2：（发送数据）send方法已调用。3：（数据传送中）已接

6、收部分数据。4：（响应结束）Ajax对象已经获得了服务器返回的所有的数据。1.4编程步骤1）发送 get请求：step1：获得 Ajax对象，比如：var xhr=getXhr();/调用之前定义的函数step2：使用 Ajax对象发送 get请求调用 xhr.open(get,check_username.do?username=chang&age=23,true);方法：建立与服务器之间的连接，三个参数依次为：请求方式、请求资源路径、请求是同步还是异步。true：表示异步请求（Ajax对象发送请求时，用户可以对当前页面作其他的操作，不会销毁页面）。false：表示同步请求（Ajax对象发送

7、请求时，浏览器会锁定当前页面，用户只能等待，不会销毁页面）。xhr.onreadystatechange=func1();：绑定一个事件处理函数（监听器）xhr.send(null);：发送请求参数，因为参数已经写在了请求资源路径中，所以这里为 null。step3：编写服务器端的处理程序，跟以前相比，有一点点改变，就是一般不需要返回一个完整的页面，只需要返回部分的数据。step4：编写事件处理函数function f1()if(xhr.readyState=4)var txt=xhr.responseText;dom操作2）发送 post请求：step1：获得 Ajax对象，比如：var x

8、hr=getXhr();/调用之前定义的函数step2：使用 Ajax对象发送 post请求xhr(post,check_username.do,true);：建立连接xhr.setRequestHeader(content-type,application/x-www-form-urlencoded);：发送2 ZAjax 学习笔记 一个 content-type消息头xhr.onreadystatechange=func1();：绑定一个事件处理函数（监听器）xhr.send(username=chang);：发送请求参数 注意事项： 与 get请求不同，请求参数要放到 send方法里面。

9、因为按照 HTTP协议的要求，发送 post请求时，应该发送一个content-type消息头，而 Ajax对象在默认情况下，不会发送这个消息头，所以，需要调用 setRequestHeader方法来添加。step3：编写服务器端的处理程序，跟以前相比，有一点点改变，就是一般不需要返回一个完整的页面，只需要返回部分的数据。step4：编写事件处理函数1.5编码问题1）发 get请求乱码产生的原因：IE浏览器内置的 Ajax对象会使用“GBK”或“GB2312”对中文参数进行编码，而其他浏览器（Chrom、Firefox）内置的 Ajax对象会使用“utf-8”对中文参数进行编码。服务器端，默认

10、会使用“ISO-8859-1”去解码。因为编码与解码所使用的字符集（编码格式）不一致，所以，会出现乱码问题。解决：step1：设置服务器使用指定的字符集去解码。比如，可以修改 Tomcat的 server.xml配置（conf文件夹中），添加 URIEncoding=utf-8（告诉服务器，对于所有的 get请求，默认使用“utf-8”去解码），修改之后重新启动服务器。step2：使用 encodeURI()函数（JS中内置函数）对请求地址进行编码。encodeURI()函数会使用“utf-8”进行编码xhr.open(get,check_username.do?username=+$F(us

11、ername),true);var uir=check_username.do?username=+$F(username);xhr.open(get,encodeURI(uri),true);2）发 post请求乱码问题产生的原因：所有浏览器（一般指三大浏览器：Chrom、Firefox、IE）内置的 Ajax对象都会使用“utf-8”对中文参数进行编码，而服务器默认情况下，会使用“ISO-8859-1”去解码。 注意事项：Firefox特殊，本应是乱码，但能正常显示。通过截取消息头发现Firefox会在消息头中自动添加charset=utf-8。解决：服务器端添加：request.setC

12、haracterEncoding(utf-8);1.6 Ajax的优点1）页面无刷新，不打断用户的操作。3 ZAjax 学习笔记 2）按需要获取数据，客户端（浏览器）与服务器端之间的数据传输量大大减少。3）是一种标准化的技术，不需要下载任何插件。1.7缓存问题（ IE浏览器）1）当发送 get请求时IE浏览器（其他浏览器没这个问题）内置的 Ajax对象会检查请求地址是否访问过，如果访问过，则不再向服务器发送请求。2）解决方式方式一：在请求地址后面添加一个随机数，用于欺骗 IE，例如：xhr.open(get,getNumber.do?+Math.random(),true);方式二：使用 po

13、st方式发请求。3）案例：在 IE浏览器中测试缓存问题step1：getNumber.jsp页面点这儿，在链接底下显示一个随机数step2：JS代码 getNumber函数function getNumber()var xhr=getXhr();xhr.open(get,getNumber.do?+Math.random(),true);/若没随机数，则点链接不会变化xhr.onreadystatechange=function()if(xhr.readyState=4)var txt=xhr.responseText;$(d1).innerHTML=txt;xhr.send(null);st

14、ep3：Servlet中 service方法中的 if判断if(action.equals(/getNumber)Random r=new Random();int number=r.nextInt(10000);System.out.println(number);out.println(number);1.8案例：简易注册（使用 Ajax进行相关验证， get请求）step1：编写 myScript.js并放在 js文件夹中此处省略三个函数，详看 1.2function check_username()/检查用户名，get请求var xhr=getXhr();/step1获得 Ajax对象

15、/step2使用 Ajax对象发送请求xhr.open(get,check_username.do?username=+$F(username),true);/绑定一个事件处理函数，里面的代码在状态改变时执行，且状态为 4时执行 if语句xhr.onreadystatechange=function()if(xhr.readyState=4)if(xhr.status=200)/服务器返回了正确的结果/只有 readyState为 4时，Ajax对象才获得服务器返回的所有数据4 ZAjax 学习笔记 var txt=xhr.responseText;$(username_msg).innerH

16、TML=txt;/利用服务器返回的数据更新页面else/服务器运行出错$(username_msg).innerHTML=验证出错;$(username_msg).innerHTML=正在验证.;/模拟用户量较大的情况，显示正在验证xhr.send(null);function check_number()/检查验证码var xhr=getXhr();xhr.open(get,check_number.do?number=+$F(number),true);xhr.onreadystatechange=function()if(xhr.readyState=4)var txt=xhr.resp

17、onseText;$(number_msg).innerHTML=txt;xhr.send(null);step2：编写 regist.jsp页面，get请求注册用户名：真实姓名：验证码：看不清换一个 注意事项：href=javascript:;相当于 href=#，写成 href=javascript:;一般要和 onclick事件一起使用，表示 a元素不再指向一个地址，而是点击后触发一个事件。step3：ActionServlet中 service方法response.setContentType(text/html;charset=utf-8);PrintWriter out = res

18、ponse.getWriter();String uri = request.getRequestURI();String action = uri.substring(uri.lastIndexOf(/), uri.lastIndexOf(.);if(action.equals(/check_username) String username=request.getParameter(username);/try /模拟耗时操作Thread.sleep(6000); catch (InterruptedException e) e.printStackTrace();5 ZAjax 学习笔记

19、 if(1=1)/模拟一个系统异常throw new ServletException(some error);if(username.equals(常)out.println(已被占用);elseout.println(可以使用);else if(action.equals(/check_number) String number1=request.getParameter(number);HttpSession session=request.getSession();String number2=(String)session.getAttribute(number);if(number

20、1.equalsIgnoreCase(number2)out.println(验证码正确);elseout.println(验证码错误);else if(action.equals(/regist)/加上验证代码，比如检查用户名是否正确，验证码是否正确，此处略System.out.println(注册成功);step4：CheckcodeServlet借用之前 Servlet笔记中 13.20案例，随机生成验证码1.9案例：修改 1.8案例，使用 post请求step1：修改 regist.jsp页面请求方式为 poststep2：添加 JS验证代码 check_username_postfunction check_username_post()var xhr=getXhr();xhr.open(post,check_username.do,true);/添