浅谈AJAX开发技术
- 作者: 一不小心就帅了这么多年
- 来源: 51数据库
- 2021-08-30
ajax（asynchronous javascript and xml，异步javascript和xml），ajax并不是一项新的技术，它产生的主要目的是用于页面的局部刷新，从之前的代码开发来看，读者可以发现，每当用户向服务器端发出请求时，那怕需要的只是简单的更新一点点的局部内容，服务器端都会将一个整体的页面进行刷新，并重新生成代码，这样一来程序的性能肯定会有所降低的，而如果采用了ajax技术之后，就可以实现局部的内容变更，而不用再进行整体的页面刷新，显然处理的性能要比前者高很多 。
在ajax中主要是通过xmlhttprequest对象处理发送异步请求和处理回应的，此对象最早是在ie 5中以activex组件的形式出现的，一直到2005年之后才被广泛的使用，而如果要想创建一个xmlhttprequest对象必须使用javascript。
xmlhttprequest对象的属性
|
no. |
属性 |
描述 |
|
1 |
onreadystatechange |
指定当readstate状态改变时使用的操作，一般都用于指定具体的回调函数 |
|
2 |
readystate |
返回当前请求的状态，只读 |
|
3 |
responsebody |
将回应信息正文以unsigned byte数组形式返回，只读 |
|
4 |
responsestream |
以ado stream对象的形式返回响应信息，只读 |
|
5 |
responsetext |
接收以普通文本返回的数据，只读 |
|
6 |
responsexml |
接收以xml文档形式回应的数据，只读 |
|
7 |
status |
返回当前请求的http状态码，只读 |
|
8 |
statustext |
返回当前请求的响应行状态，只读 |
创建xmlhttprequest对象
<script language="javascript">
var xmlhttp ; // ajax核心对象名称
function createxmlhttp() { // 创建xmlhttprequest核心对象
if (window.xmlhttprequest) { // 判断当前使用的浏览器类型
xmlhttp = new xmlhttprequest();// 表示使用的为firefox内核的浏览器
} else { // 表示使用的是ie内核的浏览器
xmlhttp = new activexobject("microsoft.xmlhttp");
}
}
</script>
对readstate一共有五种取值，分别是：
请求没有发出（在调用open()函数之前之前）。
请求已经建立但还没有发出（调用send()函数之前）。
请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
请求已经处理，正在接收服务器的信息，响应中通常有部分数据可用，但是服务器还没有完成响应。
响应已完成，可以访问服务器响应并使用它。
xmlhttprequest对象的方法
|
no. |
方法 |
描述 |
|
1 |
abort() |
取消当前所发出的请求 |
|
2 |
getallresponseheaders() |
取得所有的http头信息 |
|
3 |
getresponseheader() |
取得一个指定的http头信息 |
|
4 |
open() |
创建一个http请求，并指定请求模式，例如：get请求或post请求 |
|
5 |
send() |
将创建的请求发送到服务器端，并接收回应信息 |
|
6 |
setrequestheader() |
设置一个指定请求的http头信息 |
ajax封装后的代码
ajax.js
function ajax(recvtype){
var aj=new object();
aj.recvtype=recvtype ? recvtype.touppercase() : 'html' //html xml
aj.targeturl='';
aj.sendstring='';
aj.resulthandle=null;
aj.createxmlhttprequest=function(){
var request=false;
//window对象中有xmlhttprequest存在就是非ie，包括（ie7，ie8）
if(window.xmlhttprequest){
request=new xmlhttprequest();
if(request.overridemimetype){
request.overridemimetype("text/xml");
}
//window对象中有activexobject属性存在就是ie
}else if(window.activexobject){
var versions=['microsoft.xmlhttp', 'msxml.xmlhttp', 'msxml2.xmlhttp.7.0','msxml2.xmlhttp.6.0','msxml2.xmlhttp.5.0', 'msxml2.xmlhttp.4.0', 'msxml2.xmlhttp.3.0', 'msxml2.xmlhttp'];
for(var i=0; i<versions.length; i++){
try{
request=new activexobject(versions[i]);
if(request){
return request;
}
}catch(e){
request=false;
}
}
}
return request;
}
aj.xmlhttprequest=aj.createxmlhttprequest();
aj.processhandle=function(){
if(aj.xmlhttprequest.readystate == 4){
if(aj.xmlhttprequest.status == 200){
if(aj.recvtype=="html")
aj.resulthandle(aj.xmlhttprequest.responsetext);
else if(aj.recvtype=="xml")
aj.resulthandle(aj.xmlhttprequest.responsexml);
}
}
}
aj.get=function(targeturl, resulthandle){
aj.targeturl=targeturl;
if(resulthandle!=null){
aj.xmlhttprequest.onreadystatechange=aj.processhandle;
aj.resulthandle=resulthandle;
}
if(window.xmlhttprequest){
aj.xmlhttprequest.open("get", aj.targeturl);
aj.xmlhttprequest.send(null);
}else{
aj.xmlhttprequest.open("get", aj.targeturl, true);
aj.xmlhttprequest.send();
}
}
aj.post=function(targeturl, sendstring, resulthandle){
aj.targeturl=targeturl;
if(typeof(sendstring)=="object"){
var str="";
for(var pro in sendstring){
str+=pro+"="+sendstring[pro]+"&";
}
aj.sendstring=str.substr(0, str.length-1);
}else{
aj.sendstring=sendstring;
}
if(resulthandle!=null){
aj.xmlhttprequest.onreadystatechange=aj.processhandle;
aj.resulthandle=resulthandle;
}
aj.xmlhttprequest.open("post", targeturl);
aj.xmlhttprequest.setrequestheader("content-type", "application/x-www-form-urlencoded");
aj.xmlhttprequest.send(aj.sendstring);
}
return aj;
}
使用ajax可以完成局部刷新操作；
在ajax中主要是通过xmlhttprequest对象完成操作。
以上就是关于ajax开发技术的全部内容了，希望小伙伴们能够喜欢。
