2.14??? AJAX

js三种声明函数的方式：

???????? 1.

?function f1(a,b){

???????? return a+b;

}

alert(f1(1,2))

2.

var f1=new Function();

例如：

var f1=new Function(“a”,”b”,”return a+b”);

alert(f1(2,3));

3.

var f1=function(){};

例如：var f1=function(a,b){

???????? return a+b;

}

alert(f1(5,7));

?

?

?

传统注册的弊端：

???????? 1.当用户注册失败，用户在页面所填的信息会全部丢失，因为此时所填内容的页面在提交之后会被浏览器销毁。注册失败返回的新页面和原来的页面一模一样，但是数据全部丢失。

???????? 2.如果网络通信较差，新返回的页面还未生成，而老页面已经被销毁，此时用户只能处于等待状态，等待服务端响应回来新页面才能去做后续的操作。

???????? 3.因为响应回来的是一个html页面，在传输过程中需要消耗较多的网络传输资源。（消耗网络带宽）

?

?

使用AJAX之后的注册：

一、ajax(Asynchronous? JavaScript? and? Xml)

a 翻译过来就是异步的xml和js技术

b 是一种用来改善用户体验的技术

c? ajax本质是利用浏览器内置的一个特殊对象（XMLHttpRequest）异步的向服务器发送请求，服务端只需要返回部分数据，浏览器利用这些数据对当前页面进行局部的更新，整个过程页面无刷新，不打断用户的操作。

????????

二、获取ajax对象

???????? function getXhr(){

?????????????????? var xhr = null;

?????????????????? if(window.XMLHttpRequest){

?????????????????? //非IE浏览器

??????????????????????????? xhr = new XMLHttpRequest();

}else{

???????? //低版本的IE浏览器

???????? xhr = new ActiveXobject(‘Microsoft.XMLHttp’);

}

return xhr;

}

?

三、ajax对象的重要属性和事件

???????? onreadystatechange 事件:xhr.onreadystatechange = function(){

???????????????????????????????????????????????????????????????????????????????????????????? if(xhr.readyState==4&&xhr.status==200){

?var text = xhr.responseText;

//dom操作对页面局部更新

}

}

???????? readyState：0,1,2,3,4? 4表示ajax对象完全接受到服务端响应的内容，通信结束

???????? responseTest：服务端响应回来的文本使用该属性接收

???????? responseXML：服务端响应回来的xml文件使用该属性接收

???????? status：状态码200表示成功

?

四、ajax编程步骤：

???????? step1：获取ajax对象（var xhr = getXhr()）

???????? step2：发送请求（get/post区别）

?????????????????? get请求：

???????? ?????????????????? step2.1 ajax对象与服务端建立通信连接

???????????????????????????????????? xhr.open(‘请求方式’,’请求地址’,’同步或者异步’);

?????????????????? 例如：

??????????????????????????? xhr.open(“get”,”checkName.do?username=”+username,true);

??????????????????????????? true表示异步

??????????????????????????? false表示同步

?

??????????????????????????? step2.2 ajax对象绑定事件处理函数

???????????????????????????????????? xhr.onreadystatechange=f1

?

??????????????????????????? step2.3 发送数据包到服务端

???????????????????????????????????? xhr.send(null);

?????????????????? post请求：

??????????????????????????? step2.1 ajax对象与服务端建立通信连接

???????????????????????????????????? xhr.open(‘请求方式’,’请求地址’,’同步或异步’)

???????????????????????????????????? 例如：

???????????????????????????????????? xhr.open(‘post’,’checkName.do’,true)

?????????????????????????????????????????????? true表示异步

?????????????????????????????????????????????? false表示同步

??????????????????????????? step2.2 post请求需要绑定消息头

???????????????????????????????????? ???????????????????????????????????? xhr.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);

?????????????????? ???????? step2.3 ajax对象绑定事件处理函数

??????????????????????????? ???????? xhr.onreadystatechange=f1

?????????????????? ???????? step2.4 发送数据包到服务端

??????????????????????????? ???????? xhr.send(‘username=’+username)

???????? step3? 编写servlet处理ajax请求。

???????? step4? 编写事件处理函数

?????????????????? function f1(){

??????????????????????????? if(xhr.readyState==4){

???????? var text = xhr.responseText;

???????? //dom操作? 对页面局部更新

}

}

?

utf-8:国际最优编码，一个英文字符占一个字节，一个中文3个字节

gbk：大陆最优编码，一个英文字符占一个字节，一个中文字符占两个字节

ISO8859-1：不能保存中文字符，一个字符占一个字符。

五、中文乱码解决方案

???????? 1）发送get请求

?????????????????? a 产生乱码的原因？

??????????????????????????? IE浏览器提供的ajax对象在发送get请求时，采用gbk编码，而非IE浏览器采用utf-8编码，服务器默认接收时使用ISO8859-1解码。这个时候由于两边编码和解码采用的字符集不一致，导致乱码问题。

?????????????????? b 解决方案

??????????????????????????? 以前我们使用new String(str.getBytes(“ISO8859-1”),”utf-8”);用于浏览器不一样，使用的字符集也不一样，在服务器端我们去接收的时候需要区分时IE浏览器还是非IE浏览器，这样写代码不好，不建议这样去做，那么我们可以这样处理：

???????? 第一步? 我们指定服务端按照某种指定的字符集去解码。修改tomact下的server.xml文件，找到64行，添加URLEncoding=”utf-8”,这样做的目的是为了告诉我们tamcat对于所有get请求中文参数采用utf-8解码。

???????? 注意，这句话只针对get请求有效。

第二步?? 因为IE浏览器发送get请求时采用的是gbk编码，那么我们可以使用encodeURL()函数（js内置的特殊函数），对中文参数采用统一编码指定为utf-8，这一步的作用就是抢在ajax编码之前，指定统一使用utf-8进行编码。

2.15? JSON

???????? 发送post请求：

???????? a 产生乱码的原因，对于post请求，所有浏览器在发送ajax中文参数时，默认采用utf-8编码，而服务端使用iso8859-1编码。之前添加的URLEncoding=”utf-8”只针对get请求有效。

???????? b 解决方案

???????? request.setCharacterEncoding(“utf-8”)，这句话的意思表示服务端对于发送过来的post请求中文参数默认都是utf-8进行解码。

6. 缓存问题

1）什么是缓存问题：

???????? IE浏览器在第一次发送get请求时，会把返回的结果存入到内存中，如果下次再发送相同的请求时，浏览器不再向服务端发送请求，而是直接返回上一次的结果。

2）解决方案

???????? a 改用post请求

???????? b 每次模拟改变url请求地址

????????

JSON：（JavaScript object notation? ?js对象声明）是什么？

???????? a概念：

?????????????????? 是一种轻量级与平台无关的第三方数据交换技术，易于人阅读和编写，同时也易于及其解析和生成，JSON完全独立于语言之外，但语法上借鉴了JavaScript。

???????? 轻量级：对项目代码的侵入性较低。json相对于xml文件就是一个轻量级技术。是一段字符串内容，数据要比xml文件小很多，解析与传输速度更快。

注：做数据交互既可以使用xml也可以使用json。xml支持的更多的数据类型交换，大约有20多种，而json仅仅支持5种，在ajax领域使用json足够。

???????? b 作用：

???????? 将数据转换成一种与平台无关的数据格式，然后发送给接收方处理，易于人理解和及其解析。

?

cs