欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

分享Ajax创建简单实例代码

程序员文章站 2022-04-15 10:16:07
xmlhttp是一套可以在javascript、vbscript、jscript等脚本语言中通过http协议传送或从接收xml及其他数据的一套api。xmlhttp最大的用...

xmlhttp是一套可以在javascript、vbscript、jscript等脚本语言中通过http协议传送或从接收xml及其他数据的一套api。xmlhttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。几乎所有的浏览器都支持xmlhttprequest对象,它是ajax应用的核心技术。
js代码如下:

<html>
 <head>
 <title> new document </title>
 <meta charset="utf-8">
 </head>
<script type="text/javascript">
 /**创建 xmlhttprequest 对象
 *ie7+、firefox、chrome、safari 以及 opera均内建 xmlhttprequest 对象
 *ie5,ie6使用activex对象,xmlhttp = new activexobject("microsoft.xmlhttp")
 **/
 function createxmlhttprequest(){
 var xmlhttp;
 if (window.xmlhttprequest)
 {
  xmlhttp = new xmlhttprequest();
 }else{
  xmlhttp = new activexobject("microsoft.xmlhttp");
 }
 xmlhttp.onreadystatechange = function(){
  if (xmlhttp.readystate == 4)
  {
  
  if (xmlhttp.status == 200)
  { 
   document.getelementbyid("mydiv").innerhtml = xmlhttp.responsetext;
  }
  }else{
  document.getelementbyid("mydiv").innerhtml = "正在加载...";
  }
 };
    //向服务器放松请求
 xmlhttp.open("get","test.php",true);
 xmlhttp.send();
 }
</script>
 <body>
 <input type="button" onclick="createxmlhttprequest()" value="请求数据" />
 <div id="mydiv"></div>
 </body>
</html>

对上面js代码部分解释:
(1).xmlhttprequest对象的onreadystatechange属性,当请求被发送到服务器时,需要执行任务。每当 readystate 改变时,就会触发onreadystatechange事件。
(2).xmlhttprequest对象的readystate属性,存有 xmlhttprequest 的状态(0~4)。

  •     0: 请求未初始化
  •     1: 服务器连接已建立
  •     2: 请求已接收
  •     3: 请求处理中
  •     4: 请求已完成,且响应已就绪

(3).open(method,url,async) 方法:规定请求的类型、url 以及是否异步处理请求。
(4).send(content) 向服务器发送请求。

以上就是ajax创建简单实例代码,希望对大家的学习有所帮助,大家也可以自己动手创建ajax简单实例。