[Js笔记]Ajax通过GET方式与PHP进行交互

来源：互联网发布：linux 交叉编译环境编辑：程序博客网时间：2024/05/18 18:02

Ajax介绍:

内翻译常为“阿贾克斯”和阿贾克斯足球队同音。Web应用的交互如Flickr,Backpack和Google在这方面已经有质的飞跃。这个术语源自描述从基于Web的应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

HTML代码:

<!DOCTYPE html><html><head><meta charset="utf-8"><script type="text/javascript" src="ajax.js" charset="utf-8"></script></head><body><input type="text" id="url_text" name="text"/><input type="submit" id="ok" value="提交" onclick="ChenkGet();"/>    <div width="300px" Heiget="300px" id="hakecc"></div></body></html>

Javascript代码:

      /*                             by y0umer                              [60min]               Function:createXmlHttpRequestobject            returm Xmlobject;          */     var XmlHttp;     function createXmlHttpRequestObject(){                 if(window.ActiveXobject){ // 判断是否是ie浏览器          try { // try开始               xmlhttp = new ActiveXobject("Microsoft.XMLHTTP"); // 使用ActiveX对象创建ajax           }catch(e){               xmlHttp = false;            } // try end       }else{   //Chrome、FireFox等非ie内核           try{            xmlHttp = new XMLHttpRequest(); //视为非ie情况下           }catch(e){              xmlHttp = false; // 其他非主流浏览器          }        } // 判断结束,如果创建成功则返回一个DOM对象,如果创建不成功则返回一个false                           if(xmlHttp)            {                return xmlHttp;            }else{                alert("对象创建失败,请检查浏览器是否支持XmlHttpRequest!");            }             } // 函数体   // createXmlHttpRequestObject();        /**********************************************/                /*           ChenkGet 使用AJAX异步GET请求一个php文件                */function ChenkGet(){             // 先创建一个对象实例          createXmlHttpRequestObject();           // 使用事件对象获取文本框ID的值           var cont1 = document.getElementById("url_text").value;           var url = "test.php?type="+cont1; //待发送URL           xmlHttp.onreadystatechange=ajaxok; // 判断浏览器状态栏 (接收玩数据触发的事件)           xmlHttp.open("GET",url,false); // GET向服务器端发送数据           xmlHttp.send(null);        }           // 开始提交数据         // 回调函数 用于接收服务器返回过来的数据                function ajaxok()        {           if(xmlHttp.readyState == 4 && xmlHttp.status==200)           {                // 表示数据已接收完成            document.getElementById("hakecc").innerHTML = xmlHttp.responseText;          }    }

PHP代码：

<?phpheader('Conent-type:type/html;charset=gb2312');$val=$_GET['type'];echo "value:".$val;?>

运行截图：