《Java相关课程系列笔记之十一Ajax学习笔记(建议用WPS打开).doc》由会员分享，可在线阅读，更多相关《Java相关课程系列笔记之十一Ajax学习笔记(建议用WPS打开).doc（16页珍藏版）》请在金锄头文库上搜索。
1、Ajax学习笔记Java相关课程系列笔记之十一笔记内容说明Ajax（程祖红老师主讲，占笔记内容100%）；目 录一、 Ajax概述11.1什么是Ajax11.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二、 JSON72.1什么是JSON72.2数据交换72.3轻量级72.4 JSON语法（www.json.org）72.5如何使用JSON
2、来编写Ajax应用程序82.6案例：股票的实时行情92.7案例：显示热卖的前3个商品102.8同步请求102.9案例：修改1.8案例step1中的JS代码（使用同步请求）111勿传网上！严禁牟利！ Ajax学习笔记常彦博一、 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.XMLHttpRequest)xhr=new XMLHttpRequest();/非IE浏览器elsexhr=n
4、ew ActiveXObject(Microsoft.XMLHttp);/IE浏览器return xhr;u 注意事项：后面的案例也会用到以下函数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，则会产生onreadystate
5、change事件。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对象，比如：va
6、r xhr=getXhr();/调用之前定义的函数step2：使用Ajax对象发送get请求调用xhr.open(get,check_username.do?username=chang&age=23,true);方法：建立与服务器之间的连接，三个参数依次为：请求方式、请求资源路径、请求是同步还是异步。true：表示异步请求（Ajax对象发送请求时，用户可以对当前页面作其他的操作，不会销毁页面）。false：表示同步请求（Ajax对象发送请求时，浏览器会锁定当前页面，用户只能等待，不会销毁页面）。xhr.onreadystatechange=func1();：绑定一个事件处理函数（监听器）xh
7、r.send(null);：发送请求参数，因为参数已经写在了请求资源路径中，所以这里为null。step3：编写服务器端的处理程序，跟以前相比，有一点点改变，就是一般不需要返回一个完整的页面，只需要返回部分的数据。step4：编写事件处理函数 function f1()if(xhr.readyState=4)var txt=xhr.responseText;dom操作 2）发送post请求：step1：获得Ajax对象，比如：var xhr=getXhr();/调用之前定义的函数step2：使用Ajax对象发送post请求xhr(post,check_username.do,true);：建立
8、连接xhr.setRequestHeader(content-type,application/x-www-form-urlencoded);：发送一个content-type消息头xhr.onreadystatechange=func1();：绑定一个事件处理函数（监听器）xhr.send(username=chang);：发送请求参数u 注意事项：v 与get请求不同，请求参数要放到send方法里面。v 因为按照HTTP协议的要求，发送post请求时，应该发送一个content-type消息头，而Ajax对象在默认情况下，不会发送这个消息头，所以，需要调用setRequestHeader方
9、法来添加。step3：编写服务器端的处理程序，跟以前相比，有一点点改变，就是一般不需要返回一个完整的页面，只需要返回部分的数据。step4：编写事件处理函数1.5编码问题1）发get请求乱码产生的原因：IE浏览器内置的Ajax对象会使用“GBK”或“GB2312”对中文参数进行编码，而其他浏览器（Chrom、Firefox）内置的Ajax对象会使用“utf-8”对中文参数进行编码。服务器端，默认会使用“ISO-8859-1”去解码。因为编码与解码所使用的字符集（编码格式）不一致，所以，会出现乱码问题。解决：step1：设置服务器使用指定的字符集去解码。比如，可以修改Tomcat的server.
10、xml配置（conf文件夹中），添加URIEncoding=utf-8（告诉服务器，对于所有的get请求，默认使用“utf-8”去解码），修改之后重新启动服务器。 step2：使用encodeURI()函数（JS中内置函数）对请求地址进行编码。encodeURI()函数会使用“utf-8”进行编码 xhr.open(get,check_username.do?username=+$F(username),true); var uir=check_username.do?username=+$F(username); xhr.open(get,encodeURI(uri),true);2）发po
11、st请求乱码问题产生的原因：所有浏览器（一般指三大浏览器：Chrom、Firefox、IE）内置的Ajax对象都会使用“utf-8”对中文参数进行编码，而服务器默认情况下，会使用“ISO-8859-1”去解码。u 注意事项：Firefox特殊，本应是乱码，但能正常显示。通过截取消息头发现Firefox会在消息头中自动添加charset=utf-8。解决：服务器端添加：request.setCharacterEncoding(utf-8);1.6 Ajax的优点1）页面无刷新，不打断用户的操作。2）按需要获取数据，客户端（浏览器）与服务器端之间的数据传输量大大减少。3）是一种标准化的技术，不需要
12、下载任何插件。1.7缓存问题（IE浏览器）1）当发送get请求时IE浏览器（其他浏览器没这个问题）内置的Ajax对象会检查请求地址是否访问过，如果访问过，则不再向服务器发送请求。2）解决方式方式一：在请求地址后面添加一个随机数，用于欺骗IE，例如： xhr.open(get,getNumber.do?+Math.random(),true);方式二：使用post方式发请求。3）案例：在IE浏览器中测试缓存问题step1：getNumber.jsp页面点这儿，在链接底下显示一个随机数step2：JS代码getNumber函数function getNumber()var xhr=getXhr()
13、;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);step3：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对象
