Ajax

Ajax Day011、什么是Ajax？i.Aynchronous javascript and xml : 异步的javascript和xmlii.在传统的web应用中，当用户点击”提交”，客户端需要等待服务器处理，用户什么都不能做。

服务器处理之后，必须返回一个完整的页面给浏览器，浏览器需要重新解析这个页面，生成相应的界面为了解决传统的web应用当中的问题(即等待-响应-等待)，可以使用ajax 技术来解决。

可以使用浏览器的一个特殊的对象XmlHttpRequest异步地(即浏览器不会抛弃原有的页面，用户可以继续操作该页面)向服务器发送请求，服务器将处理的结果以文本或者xml的形式返回给浏览器。

可以使用javascript来更新原有的页面(更新时，需要使用到服务器返回的这些文本或者xml文档)2、XmlHttpRequest对象a)发展历史，如果获得该对象i.微软发明的，目前没有标准化。

所以在创建该对象时，需要区分浏览器ii.创建该对象：Function getXmlHttpRequest(){Var xhr = null;If(window.XMLHttpRequest){//非ie浏览器Xhr = new XMLHttpRequest();}else{//ie浏览器Xhr = new ActiveXObject(“Microsoft.XMLHttp”);}Return xhr;}b)属性Onreadystatechange:注册一个监听器，每当XmlHttpRequest与服务器通讯的状态发生改变，就会产生readystatechange事件，此时会调用监听器来处理事件。

responseText:读取服务器端返回的数据responseXML:读取服务器端返回的dom兼容的对象readyState: 该对象与服务器之间通讯的状态，其值是number的数字0(未初始化)，对象已建立，但是尚未初始化(尚未调用open方法)1(初始化),对象已建立，尚未调用send方法2(发送数据),send方法已经调用。

3(数据传送中),已接收部分数据4(响应结束)可以通过responseText,responseXML获取数据status:服务器返回的状态码C)编程Step1:获得XmlHttpRequest对象Var xhr = getXmlHttpRequest();Step2:发送请求get:请求//true表示异步请求//action表示要发送的请求,比如check_name?name=abcXhr.open(…get‟,‟action‟,true);Xhr.onreadystatechange = f1;Xhr.send(null);Post请求：//action表示请求,如:check_name.doXhr.open(…post‟,‟action‟,true);//添加一个消息头xhr.setReuqetHeader(“Content-type”,“application/x-www-form-urlencoded”);Xhr.onreadystatechange = f1;Xhr.send(…name = abc‟);Step3:在服务器端编写相应的处理代码,只需要输出一些文本或者xml文档就行Step4:在监听器当中，编写相应的代码来处理服务器返回的数据Function f1(){If(xhr.readyState == 4){Var txt = xhr.responseText;//dom操作，更新界面等}}代码示例：(post方式),若post的action中有参数,则应该以send的方式发送,如：Xhr.send(…name = abc‟);Get方式:检验验证码function check_name(){//获得xhr对象var xhr = getXmlHttpRequest();//发送请求xhr.open('get','check_name.do?username=' + $F('username'),true);xhr.onreadystatechange=function(){//只有当readyState的值是4,客户端//才完整地接受到了服务器返回的所有数据。

if(xhr.readyState == 4){//status == 200:服务器处理正确if(xhr.status == 200){//获得服务器返回的文本var txt = xhr.responseText;//dom操作。

$('username_msg').innerHTML = txt;}else{$('username_msg').innerHTML = '系统出错,稍后重试';}}else{$('username_msg').innerHTML = '正在验证...';}};xhr.send(null);}Ajax Day021.ajax的优点a)页面无刷新，不打算用户的操作b)按需获取数据(浏览器与服务器之间传输的数据量减少，因为服务器与浏览器不再传递整个页面)c)可以利用客户端的计算能力，减轻服务器的压力d)是一种标准化的技术，不需要安装插件2.编码问题a)如果是链接地址中包含中文所有的浏览器，如果链接地址包含中文(或者其他url地址中不允许出现的字符) 则浏览器会对中文进行编码(utf-8)解决办法：在conf/server.xml添加URIEncoding=”utf-8”对于get请求，使用utf-8的编码格式去解码修改完后需要重新启动服务器b).如果链接地址包含中文参数：浏览器会根据页面编码格式进行解码。

解决办法：方法一：在conf/server.xml添加URIEncoding = “utf-8”,所有页面，使用contentType, pageEncoding属性指定uft-8编码方法二：在conf/server.xml添加URIEncoding=”utf-8”，对中文参数使用URLEncoder.encode方法进行编码。

C).在ajax应用中，如果使用get方式向服务器发送请求，则ie会使用gbk编码，firefox会使用utf-8编码解决办法：在conf/server.xml添加URIEncoding=”utf-8”，在页面中，使用encodeURI函数对连接地址进行编码。

D).在ajax应用当中，如果使用post方式，向服务器发送请求，浏览器会使用utf-8编码。

解决办法:在服务器端，使用request.setCharacterEncoding即可。

3.当采用get方式向服务器发送请求时，ie会缓存之前访问过的数据，也就是说，ie会比较两次访问的地址，如果相同，则不会向服务器发送请求。

解决办法：在请求地址后面添加一个随机数使用post方式向服务器发送请求。

4.JSONa)什么是jsoni.Javascript object notation:是数据交换的一种标准，与xml技术相比，解析速度更快，数据量更小。

b)Json的基本语法//新建一个对象User user = new User();user.setName("cherkiee");user.setPassword("test");//将User对象转换成一个JSON对象JSONObject jsonObj = JSONObject.fromObject(user);//jsonObj.toString(),将json对象转换成一个字符串//结果如下：{"name":"cherkiee","password":"test"}由此可见，可以将一个对象传递到JSP页面，然后通过编写js代码，再从json 对象中取出数据。

不妨假设从控制层传给jsp的对象是一个json对象str，则在jsp上可以通过下列jsp代码来获取数据:Var user = str.evalJSON(); //将json对象转换成js对象Alert(+”:”+user.password);List对象转换成JSON对象。

//将list转换成一个json对象JSONArray jsonObj = JSONArray.fromObject(users);//jsonObj.toString(),将list转换成一个json对象//[{"name":"cherkiee","password":"test"},//{"name":"cherkiee","password":"test"}]在jsp页面，使用如下编码获取数据:Var userJs = users.evalJSON();Alert(userJs[1].name);//下标从0开始Ajax与json异步请求的例子：function quoto(){setInterval(f1,5000);}//异步地向服务器发送请求，获得最新的//股票的价格，并更新页面。

function f1(){var xhr = getXmlHttpRequest();xhr.open('post','quoto.do',true);xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.onreadystatechange=function(){//获得最新的股票的价格，并更新页面。

if(xhr.readyState ==4){var stockInfo = xhr.responseText;//stockInfo是一个json字符串，为了//方便处理，需要将其转换成js对象var stock = stockInfo.evalJSON();//在div中显示信息,$函数来自于prototype框架$('d1').innerHTML ='股票代码:'+ stock[0].stockName+'____'+' 股票价格:'+stock[0].price+'<br/>'+'股票代码:'+stock[1].stockName+'____'+' 股票价格:'+stock[1].price+'<br/>'+'股票代码:'+stock[2].stockName+'____'+' 股票价格:'+ stock[2].price;}};xhr.send(null);}5.prototype简介:介绍prototype:$(id):相当于document.getElementById(id);$F(id):相当于document.getElementById(id).value;$(id1,id2,id3...):返回id1,id2...组成的一个数组，strip():除掉空格。