1.首先了解什么事ajax?
ajax是什么意思:ajax是asynchronous([ə'sɪŋkrənəs],异步的 )javascript and xml 的缩写,即异步的javascript和xml
对ajax的阐述:ajax是一种用来改善用户体验的技术,其实质是利用浏览器提供的一个特殊的对象(XMLHttpRequest对象,一般称之为ajax对象)异步地
(当ajax对象向服务器发请求时,浏览器不会销毁当前页面,用户仍然可以对当前页面左其它的操作)向服务器发送请求。服务器返回的数据不再是一个完整的页面,
而是部分数据,利用这些数据,更新当前页面。整个过程,页面无刷新,不打断用户的操作。
2.如果获得ajax对象:
XMLHttpRequest没有标准化,要区分浏览器。
因此,如果获取ajax对象?
通过如下获取ajax对象的函数,可以看出不同的浏览器对ajax对象有不同的处理。
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){
//非ie浏览器
xhr= new XMLHttpRequest();
}else{
//ie浏览器
xhr= new ActiveXObject('MicroSoft.X MLHttp');
}
return xhr;
}
3.ajax对象的一些重要属性
1) onreadystatechange :为绑定事件处理函数,当ajax对象的readyState值发生了改变,就会产生readystatechange事件。
2) responseText :获得服务器返回的文本。
3) responseXML :获得服务器返回的xml文档。
4)status :状态码
5)readyState :有5个值,分别是0,1,2,3,4表示ajax对象与服务器通信的状态。比如,当值为4时,表示ajax对象获得了服务器返回
的所有数据。
网上查阅关于readyState各个状态值表示的含义:
0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
4 、编程的步骤
step1,获得ajax对象。
比如使用刚刚讲过的函数获取ajax对象:
var xhr=getXhr();
step2,使用ajax对象发请求。
可以发送两种请求。
1)发送get请求。
xhr.open('get','check_username.do?username=tom',true);
xhr.onreadystatechange=f1;
xhr.send(null); 不发送任何内容,因为url中包含了参数数据。
2)发送post请求
xhr.open('post','check_username.do',true);
xhr.setRequestHeader('content-type','application/x-www-formurlencoded'); //告诉服务器发送的是文本
//xhr.setRequestHeader('content-type','text/xml'); //告诉服务器发送的是一个xml文件
xhr.onreadystatechange=f1;
xhr.send('username=tom');
setRequestHeander的作用是添加一个"contend-type"消息头。
true:发送异步请求(ajax对象发送请求时,浏览器不销毁当前页面,用户仍然可以进行其他操作。);
false:发送同步请求(ajax对象发送请求时,浏览器不销毁当前页面,浏览器会锁住当前页面,用户不能做其他的操作)。
网上查阅相关的资料解读:
xhr.open("post",url,true);
ajax有三种打开服务的方式分别是get,post,head
head主要是获取服务器的一些头文件的信息,比如说charset,cont-type之类
这里主要讨论前两种方式,是实际中应用频繁的
xhr.open("post",url,true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //告诉服务器发送的是文本
//xhr.setRequestHeader("Content-Type", "text/xml"); //告诉服务器发送的是一个xml文件
xmlHttp.send(url);
open()中请求URL只需要制指定请求的Action。
同时,需要设置请求头,以实现URL内容的正确编码:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");而且,还要通过send()函数将拼接好的URL发送到Action,如下:
xmlHttp.send(url);
step 3.编写服务器断的处理代码,一般不再需要返回一个完整的页面,只需要返回部分数据。
step 4.编写事件处理函数
function f1(){
if(xhr.readyState=4){
var txt=xhr.responseText;
更新当前页面
}
}
6、编码问题
1)发送get请求
ie浏览器提供的ajax对象会对中文按照gbk
进行编码,其它浏览器会对中文按照utf-8进行
编码。容器(比如tomcat)默认情况下会使用
iso-8859-1去解码。
解决方式:
step1,让容器按照指定的字符集去解码。
修改tomcat的配置文件(conf/server.xml)
<Connector URIEncoding="utf-8">
step2,使用encodeURI函数对中文进行编码。
2)发送post请求
所有浏览器都会对中文按照使用utf-8进行编码。
容器(比如tomcat)默认情况下会使用 iso-8859-1
去解码。
解决方式:
request.setCharacterEncoding("utf-8");