关于ajax技术

传统注册存在的弊端 ：
当我们点击注册时，会存在以下几个问题。
首先，浏览器会销毁当前页面，如果注册失败返回的新页面所有之前
填写的数据丢失。
其次,如果网络通信较差，我们表单提交请求数据到服务端，而服务端
又没有返回新的页面，此时用户处于一个等待状态(打断用户操作)。
另外，如果注册失败。从服务端响应回来的是一个新的注册页面，网络
传输一个页面需要消耗较多的网络资源，那么就会导致网络传输性能
下降。

一 什么是ajax（Asynchronous JavaScript and Xml）？
a 翻译过来就是异步的js和xml技术。
b 可以用来改善用户体验的技术，
c ajax本质是利用浏览器内置的一个特殊对象，异步的向服务器发送请求，服务器
一般只返回部分数据，浏览器接收到这些数据后，通过dom操作对当前页面进行局部
更新。整个过程页面无刷新，不打断用户的操作。

二 如何获取ajax对象
function getXhr(){
var xhr = null;
if(wind.XMLHttpRequest){ // 非ie浏览器
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
三 ajax对象重要的五个属性

该用户名可以使用
该用户名已经存在

onreadystatechange:绑定事件处理函数

readyState：0 1 2 3 4 ，只有状态等4，说明ajax对象与服务端之间的交互结束。
此时才可以对页面进行局部的更新。
responseText：接收服务端响应回来的文本

responseXML：接收服务端响应回来的xml文件。

status ：对状态码进行判断，200表示正常状态。此时我们只接收状态为200返回的
部分数据。

四 ajax编程步骤

step1 获取ajax对象 var xhr = getXhr();
step2 ajax对象向服务端发送请求
get请求：

step2.1 ajax对象与服务端之间建立通信连接。
xhr.open('get','url','true/false');

第一个参数：表示发送请求的方式。
第二个参数：发送请求的地址 ，如果有参数需要把参数绑定在url请求
地址上。 'checkName.do?uname='+name
第三个参数：如果为true表示发送的是异步请求，
如果false表示发送的是同步请求。

step2.2 ajax对象绑定事件处理函数
xhr.onreadystatechange=f1

step2.3 xhr.send(null)
发送请求到服务端，此时ajax对象会准备一个空的数据包往服务端传递。

step3 编写服务端处理程序，接收ajax请求处理，处理完毕之后响应部分数据
交给ajax对象。 （编写ActionServlet）

step4 编写事件处理函数
function f1(){

}

post请求：

xhr.open('post','checkName.do',true);
xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
xhr.onreadystatechange=f1
xhr.send("name="+username);

五 解决中文乱码
5.1 get请求乱码的原因？
当发送get请求时，非ie浏览器使用的是utf-8编码，ie浏览器默认使用gbk编码，
而服务端使用的是iso8859-1编码，两边编码不一致所以导致乱码产生。

解决办法
对于非ie浏览器发送的get请求，我们可以去修改server.xml文件添加URIEncoding="utf-8",
默认指定服务端接收个get请求时，使用utf-8接收。

对于ie浏览器我们可以指定发送请求参数时，使用utf-8编码，只需要给发送的url使用
encodeURI(url);

utf-8编码（变长编码）：国际化最优编码，存储一个英文或数字，占一个字节。
一个中文字母占三个字节。
gbk：本地化最优编码。存储一个英文字母占一个字节。存储一个汉字占2个字节。

服务端默认使用iso8859-1编码。一个字母占一个字节。

5.2 post请求产生乱码的原因？
当发送post请求时，所有浏览器默认采用utf-8编码。而我们修改server.xml文件
指定编码URIEncoding="utf-8",只针对get请求有效。

解决办法 :
request.setCharacterEncoding("utf-8"); 这行代码只针对post请求有效。
告诉服务端接收浏览器发送过来的参数使用utf-8.

六 缓存问题 ？
当ie浏览器发送get请求时，第一次发送请求之后，请求地址保存在浏览器缓存中。
如果再次发送相同的请求，此时浏览器不会像服务端发送请求。而是直接从缓存中取出
上次访问的历史记录。

解决办法有两种？
1 默认使用post请求。

2 Math.random() 随机产生0~1之间随机数。
'checkName.do?name='+username+'&'+Math.random()

jQuery对ajax的支持
jQuery对ajax支持有两个好处：第一我们不会像以前写原生的ajax，需要写
一堆的模式化代码，我们只需要调用jQuery提供对ajax支持的方法即可，另外
使用原生的ajax去进行dom操作时，会出现浏览器不兼容问题，我们现在如果使用
jQuery，因为jQuery对dom操作封装性非常高，能够帮我们解决大部分浏览器不
兼容的问题，这样jQuery也能够帮助我们解决了ajax浏览器不兼容性问题。

1.load
作用：向服务器发送异步请求，将服务器返回的数据直接添加到符合要求的节点上。
用法：$obj.load(url[,data])
注:url:请求地址
data：请求参数，有两种格式：
字符串格式 "name=tom&age=22"
json对象格式 {"name":"tom","age":22}
该方法如果没有参数则默认发送get请求，如果有参数默认发送POST请求
<div> </div>
$('div').load('')
弊端：只能发送异步请求，不能发送同步请求。返回的数据直接填在当前的节点上，不能对返回的数据进行处理，如果返回是json格式
的数据,显然该方法不能满足要求
2.$.post()/$.get()
作用：只能异步的向服务器发送请求，可以使用回调函数处理服务端返回的数据
用法：$.get(url,[data],[callbock],type);
注:
url:请求地址
data：如果有参数则写，没参数可不写，有两种格式
字符串格式 "name=tom&age=22"
json对象格式 {"name":"tom","age":22}
callback:回调函数可以用来处理服务端返回的数据
function(data,status){

}
其中data表示从服务端获取响应回来的内容，status是一个字符串，描述ajax对象
接受服务端请求的状态（一般可以不写）

type：服务端返回的数据类型，可以是以下几种：
text：文本
HTML：HTML文档
json：json字符串
xml:xml文档
script：javascipt脚本
3.$.ajax() 重点掌握
作用：能够向服务端发送异步或同步请求，并且也可以使用回调函数处理服务端返回的数据
用法：$.ajax({json格式的字符串});
json格式的字符串参数？
$.ajax({
url:'请求的地址',
type：'请求方式 post/get',
data:请求参数{'name':username}或"name=username",
dataType:服务器返回的数据类型（text,html,xml,json,script），
sueccess:function(data,status){//成功接收服务端响应回来的数据
其中data表示从服务端获取响应回来的内容，status是一个字符串，描述ajax对象
接受服务端请求的状态（一般可以不写）
},
error:服务端处理失败调用的回调函数
async:如果 不写则默认为异步请求。也可以指定，false表示为同步，true表示为异步
})