交互技术之AJAX



/**作者:呆萌老师*☑csdn认证讲师*☑51cto高级讲师*☑腾讯课堂认证讲师*☑网易云课堂认证讲师*☑华为开发者学堂认证讲师*☑爱奇艺千人名师计划成员*在这里给大家分享技术、知识和生活*各种干货,记得关注哦!*vx:it_daimeng*/




AJAX: Asynchronous Javascript And Xml (异步javascript 和xml ) 是指一种创建交互式网页应用的网页开发技术


作用: 通过在后台与服务器进行少量数据交换,ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新


传统的网页,如果需要更新内容 必须重载整个网页页面


核心对象: XMLHttpRequest



readyState的5种状态:  
 0 (未初始化)   1 (正在装载)   2 (装载完毕)   3 (交互中)   4 (完成)   
所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。


创建异步通信对象方式1:


function createXMLHttp()    { var request;        //var browse = navigator.appName;        if(window.XMLHttpRequest)        {            request = new XMLHttpRequest();//ie7, ie8 ,其它    }    else        {            request = new ActiveXObject("Microsoft.XMLHttp");//ie6,ie7        }            return request;    }    var xhr = createXMLHttp();




方式2:
var request=new ActiveXObject("Msxml2.xmlhttp.3.0");


两种传值方式:



用get方式传中文 需要用 encodeURI(username);将中文编码


 var a;   function check()   {       a=new ActiveXObject("Msxml2.xmlhttp.3.0");       a.open("GET","panduan.php?username="+form1.username.value,true);       a.onreadystatechange=jieshou;       a.send(null);    }   function jieshou()   {          if(a.readystate==4)          {                          document.getElementById("s1").innerHTML=a.responseText;          }   }




用post方式传值


var a;
function check()
{
var username=form1.username.value;


a=new ActiveXObject("Msxml2.xmlhttp.3.0");


a.open("POST","panduan.php",true);


a.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//必须有这句


a.onreadystatechange=jieshou;


a.send("username="+username);
}


function jieshou()
{
if(a.readystate==4)
{
document.getElementById("s1").innerHTML=a.responseText;
}
}

发表评论
留言与评论(共有 0 条评论) “”
   
验证码:

相关文章

推荐文章