#ajax(asynchrous javascript and xml 异步的javascript和xml) ##ajax是什么? 是一种用来改善用户体验的技术，其本质是利用浏览器内部的一个 对象(XmlHttpRequest),异步的向服务器发送请求，服务器返回部分 数据，浏览器利用这些数据对，当前页面做部分刷新。整个过程，页 面无刷新，不打断用户的操作。 注：异步，是指当这个对象向服务器发送请求的时候，浏览器不会销毁 当前页面，用户让然可以对当前页面做其他操作。 ##ajax对象如何获得？ ie5.5(第一个实现的) ActiveXObject 其他 XmlHttpRequest function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHttp'); } } ##ajax对象的几个重要的属性 1. onreadystatechange:绑定事件处理函数(处理readystatechange事件)。 注：当readyState属性值发生了任何的改变，比如从0变成了1， 就会产生readystatechange事件。 2. readyState:有五个值(0,1,2,3,4)表示ajax对象与服务器通信的状态。 其中4表示ajax已经获得了服务器返回的所有数据。 3. responseText:获得服务器返回的文本。 4. responseXML:获得服务器返回的xml文档。 5. status:获得服务器返回的状态码。 ##编程步骤 step1.获得ajax对象。比如： var xhr = getXhr(); step2.利用ajax对象发请求。 方式一：发送get请求的步骤： · xhr.open('get','check_uname.do?uname=tom&age=22',true); 注:true：异步 false：同步(当ajax向服务器发送请求的时候，浏览器会锁定当前页面， 用户不能对当前页面做其他操作)。 · xhr.onreadstatechange=handler; · xhr.send(null); step3.编写服务器端的程序。 step4.处理服务器返回的数据 if(xhr.readyState==4&&xhr.status==200){ //获得服务端的数据 var txt = xhr.responseText; //更新页面 ... }
##缓存问题 · 什么是缓存问题？ 如果使用IE浏览器发送get请求，浏览器会检查请求地址是否访问过，如果访问过 则不再向服务器发送请求，而是显示之前缓存的结果。 · 如何解决？ 在请求地址里面加一个随机数。如：'check_uname.do?'+Math.random() ##发送post请求 xhr.open('post','check_uname.do',true); xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); xhr.send('username=tiger'); 注：按照http协议要求，发送post请求时，请求数据包里面应该包含content-type 消息头，默认情况下，ajax对象在打包时，不会添加该消息头，所以要调用setRequestHeader方法。 #编码问题 ##get请求 1. 为什么会有乱码？ IE浏览器会使用GBK对中文参数进行编码，其他浏览器会使用UTF-8来编码，而服务器默认 会使用IOS-8859-0来解码。 2. 解决方式 step1.修改服务端的配置，比如，修改tomcat的配置(server.xml) <Connector URIEncoding='UTF-8'...> step2.使用encodeURI函数对中文参数进行编码 注：encodeURI是javascript内置的函数，会使用utf-8来编码。 ##post请求 1. 为什么会有乱码？ IE浏览器会使用GBK对中文参数进行编码，其他浏览器会使用UTF-8来编码，而服务器默认 会使用IOS-8859-0来解码。 2. 解决方式 request.setCharacterEncoding('utf-8') #json(javacript object notation) ##json是什么？ json是一种轻量级的数据交换格式。 1. 数据交换： 将数据转换成一种与平台无关的数据格式(比如xml)交给接受方来处理 2. 轻量级： json相对xml，文档更小，解析速度更快。 ##json基本语法 1. 表示一个对象 {属性名：属性值，属性名：属性值...} 注意: a.属性名必须使用双引号括起来. b.属性值可以是string，number，true/false，null，object c.属性值如果是string，必须用双引号括起来。 2. 表示由对象组成的数组。 [{},{},{}...] ##使用json做数据交换 www.json.org 1. 将java对象转换成json字符串。 可以使用json官方提供的工具类(JSONObject和JSONArray)。 2. 将json字符串转换成相应的javascript对象。 可以使用prototype提供的函数。 #jQuery&aJax ##$.ajax() 1. $ajax({});其中{}是一个对象，用来设置各个选项参数。 2. 常用的选项参数： url:请求地址。 type:请求类型，比如(get/post) data:请求参数，有两种格式。 请求字符串形式:比如：'username=tom&age=22' 对象的形式，比如：{"username":"tom","age":22} success:服务器处理正确，用来处理服务器返回的数据的一个函数。 error:服务器处理出错，用来处理服务器返回的数据的一个函数。 returnType:返回数据的类型 text:文本 html:html文档 json:json字符串 xml:xml文档 script:javacript脚本 async:同步还是异步，默认是异步，当值是false，表示同步。 ##$.load() 1. 用法 向服务器发送异步请求，然后将服务器返回的数据值直接添加到符合要求的结点之上。 $obj.load(url); 注：$obj是要操作的结点，url是请求地址。 data是请求参数，可以有两种形式。
