ajax入门

最新推荐文章于 2025-07-01 09:45:30 发布

转载最新推荐文章于 2025-07-01 09:45:30 发布 · 332 阅读

frontend 专栏收录该内容

3 篇文章

订阅专栏

js:

var xhr;
if(window.XMLHttpRequest){
     xhr=new XMLHttpRequest();
}else{
     xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open(method,url,aynsc);
     //method:请求的类型,get或post;
     //url:文件在服务器上的位置,为了避免缓存可以向url添加唯一的id,ie:"xxx.jsp?t="+Math.random();
     //async:true(异步)或false(同步)
xhr.send();     //当method为post时带string参数
xhr.onreadystatechange=function(){
     if(xhr.readyState==4&&xhr.status=200){
          //doSomethind;
     }
}     //响应处于onreadystatechange事件中的就绪状态时执行的函数

xhr方法:

setRequestHeader(header,value);

example:xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr属性:

     readyState-存有xhr的状态信息,从0到4发生变化;

          0:请求未初始化

          1:服务器连接已建立

          2:请求已接收

          3:请求处理中

          4:请求已完成，且响应已就绪

     status-200:ok;404:未找到页面;

     responseText-用于接收服务器字符串形式的响应数据

     responseXML-用于接收服务器XML形式的响应数据,需要作为xml进行对象解析

xhr事件:

     onreadystatechange事件:当请求被发送到服务器时，我们需要执行一些基于响应的任务;每当readyState改变时，就会触发该事件

ajax:js无需等待服务器的响应，可以在等待服务器响应时执行其他脚本；当响应就绪后对响应进行处理
非ajax:js会等到服务器就绪后才继续执行，如果服务器繁忙或未响应，应用程序会挂起或停止

Callback函数:

     是一种以参数形式传递给另一个函数的函数

     example:

function MyFunction(){
loadXMLDoc("ajax_info.txt",function(){
if(xhr.readyState==4 && xhr.status==200){
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
});
}

get与post区别:

     get简单且快，大部分情况下应使用get

     get无法使用缓存文件(更新服务器上的文件或数据库);向服务器发送大量数据(post没有数据量限制);发送包含未知字符的用户输入时,post比get更稳定也更可靠.