Web基础之Ajax

Ajax概述：
+ Ajax(Asynchronous JavaScript And Xml),异步的JavaScript和Xml。是一种用来改善用户体验的技术，其实质是利用浏览器内置的一个特殊对象（XMLHttpRequest，一般称之为Ajax对象）异步地（Ajax对象在向服务器发送请求时，浏览器并不会销毁当前页面，用户仍然可以对当前页面作其他的操作）向服务器发送请求，服务器送回部分数据（不是一个完整的新的页面，而是文本或者Xml文档），在浏览器端，可以利用这些数据部分更新当前页面。整个过程，页面无刷新，不打断用户的操作。
+ 优点：
1) 页面无刷新，不打断用户的操作。
2) 按需要获取数据，客户端（浏览器）与服务器端之间的数据传输量大大减少
3) 是一种标准化的技术，不需要下载任何插件。
+ 获得Ajax对象：由于XMLHttpRequest（Ajax对象）没有标准化，所以要区分浏览器。

function getXhr(){var xhr=null;   if(window.XMLHttpRequest){   xhr=new XMLHttpRequest();//非IE浏览器}else{   xhr=new ActiveXObject('Microsoft.XMLHttp');//IE浏览器}return xhr;}

语句处理：

(“id”)<—>document.getElementById(“id”);F(“id”) <—> document.getElementById(“id”).value;
+ Ajax对象属性：
1）onreadystatechange：绑定一个事件处理函数（监听器），该函数用来处理readystatechange事件。Ajax对象的readyState属性发生改变，比如从0到1，则会产生onreadystatechange事件。
2）responseText：获得服务器返回的文本数据。
3）responseXML：获得服务器返回的Xml文档。
4）status：获得状态码。
5）readyStatue：返回Ajax对象与服务器通讯的状态，返回值是一个number类型的值。一共有5个值，分别是：
①0：（未初始化）对象已建立，但是尚未初始化（尚未调用open方法）。
②1：（初始化）对象已建立，尚未调用send方法。
③2：（发送数据）send方法已调用。
④3：（数据传送中）已接收部分数据。
⑤4：（响应结束）Ajax对象已经获得了服务器返回的所有的数据。
if(xhr.readyState==4 && xhr.status == 200){…}
+ get请求：
1）获得Ajax对象，比如：var xhr=getXhr();//调用之前定义的函数
2）发送get请求：
① xhr.open(‘get’,check_username.do?username=chang&age=23,true)；
//参数依次为：请求方式、url、同步还是异步(true：异步，用户能对当前页面进行其他操作，不会销毁页面；false:同步，浏览器会锁定该页面，用户只能等待，不会销毁页面)
② xhr.onreadystatechange=func1();//绑定一个事件处理函数（监听器）
③ xhr.send(null);//送请求参数，因为参数已经写在了请求资源路径中，所以这里为null。
④事件处理函数func1()：
function f1(){
if(xhr.readyState==4){
var txt=xhr.responseText;
dom操作……
}
}

• post请求：

1）获得Ajax对象，比如：var xhr=getXhr();//调用之前定义的函数
2）使用Ajax对象发送post请求：
① xhr.open(“post”,”check.do”,true);//建立连接
② xhr.setRequestHeader(“content-type”,”application//x-www-form-urlencoded”);//发送一个content-type消息头, 必须设置
③ xhr.onreadystatechange=func1();//绑定一个事件处理函数（监听器）
④ xhr.send(“username=小红“);//发送请求参数
【注意：与get请求不同，请求参数要放到send方法里面；因为按照HTTP协议的要求，发送post请求时，应该发送一个content-type消息头，而Ajax对象在默认情况下，不会发送这个消息头，所以，需要调用setRequestHeader方法来添加。】
3）编写函数处理事件func1();

• 乱码问题：
  1）get请求：
  —>乱码产生原因：IE浏览器内置的Ajax对象会使用“GBK”或“GB2312”对中文参数进行编码，而其他浏览器（Chrom、Firefox）内置的Ajax对象会使用“utf-8”对中文参数进行编码。服务器端，默认会使用“ISO-8859-1”去解码。因为编码与解码所使用的字符集（编码格式）不一致，所以，会出现乱码问题。
  —> 乱码解决：
  ① 设置服务器使用指定的字符集去解码。比如，可以修改Tomcat的server.xml配置（conf文件夹中），添加URIEncoding=“utf-8”（告诉服务器，对于所有的get请求，默认使用“utf-8”去解码），修改之后重新启动服务器。
  ② 使用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）post请求：
—> 乱码产生原因：所有浏览器（一般指三大浏览器：Chrom、Firefox、IE）内置的Ajax对象都会使用“utf-8”对中文参数进行编码，而服务器默认情况下，会使用“ISO-8859-1”去解码。
【注意：Firefox特殊，本应是乱码，但能正常显示。通过截取消息头发现Firefox会在消息头中自动添加”charset=utf-8”。】
—> 乱码解决：服务器端添加：request.setCharacterEncoding(“utf-8”);

• 缓存问题
  1）get请求：
  —> 缓存原因：IE浏览器（其他浏览器没这个问题）内置的Ajax对象会检查请求地址是否访问过，如果访问过，则不再向服务器发送请求。
  —> 解决方式：
  ① 在请求地址后面添加一个随机数，用于欺骗IE；如：xhr.open(‘get’,’getNumber.do?’+Math.random(),true);
  ② 使用post方式发请求。

【注意：】
1）href=”javascript:;”相当于href=”#”，写成href=”javascript:;”一般要和onclick事件一起使用，表示a元素不再指向一个地址，而是点击后触发一个事件。

• 同步请求：
  1）什么是同步请求
  Ajax对象在向服务器发送请求时，浏览器会锁定当前页面，用户不能够对当前页面做任何的操作。
  2）如何发送同步请求
  open(请求方式，请求地址，false)
  3）优先使用异步，因为同步会影响性能，当服务器端处理比较慢的时候，浏览器会锁定当前页面（“假死”）。
  4）只有当客户端需要等待服务器的响应之后，才能继续向下执行时，应该使用同步。
  【注意：Firefox的某些版本（低版本，如3、4）对于同步的支持比较特殊：
  不能使用xhr.onreadystatechange来绑定一个事件处理函数，而应该在send方法执行之后，才调用xhr.responseText方法来获得服务器返回的数据。】

• 跨域
  当协议、子域名、主域名、端口号中任意一个不相同时的接口访问即是跨域。
  javaScript出于安全考虑，不允许跨域调用其他页面的对象。如a.com下的js不能调用b.com下的js对象。
  *处理方法
  1）代理方式JSONP：需要与服务器端配合。
  —> 在服务器端的接口中添加jsonp;
  —> 在web端的ajax的参数：dataType:”jsonp”,jsonp:”callback自定义返回名”；
  2）在HTML5中已经提供了跨域支持。只需要在服务器添加header:”Access-Control-Allow”和“Access-Control-Allow-Methods:POST,GET”

博客地址：Web基础之Ajax