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