交互技术之AJAX

阳光穿透心脏的1/2处 2024-04-08 10:39 64阅读 0赞

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

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

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

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

核心对象: XMLHttpRequest

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

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

方式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;  
\}  
\}