分享Ajax创建简单实例代码

所属分类: 网络编程 / AJAX相关 阅读数: 1661
收藏 0 赞 0 分享

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简单实例。

更多精彩内容其他人还在看

AjaxSubmit()提交file文件

这篇文章主要介绍了AjaxSubmit()提交file文件的实例讲解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

基于Blod的ajax进度条下载实现示例代码

本篇文章主要介绍了基于Blod的ajax进度条下载实现示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用Ajax、json实现京东购物车结算界面的数据交互实例

这篇文章主要介绍了使用Ajax、json实现京东购物车结算界面的数据交互实例,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)

这篇文章主要介绍了用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案),需要的朋友可以参考下
收藏 0 赞 0 分享

Ajax 传递JSON实例代码

虽然ajax全称是asynchronous javascript and XML。但目前使用ajax技术时,传递JSON已经成为事实上的标准。这篇文章主要介绍了Ajax 传递JSON实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax用json实现数据传输

本文主要介绍了ajax用json实现数据传输的方法,具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

Ajax中post方法直接返回以0开头数字出错问题分析

这篇文章主要介绍了Ajax中post方法直接返回以0开头数字出错问题分析,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax+springmvc实现C与View之间的数据交流方法

下面小编就为大家带来一篇ajax+springmvc实现C与View之间的数据交流方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Spring MVC前端与后端5种ajax交互方法【总结】

下面小编就为大家带来一篇Spring MVC前端与后端5种ajax交互方法【总结】。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Ajax校验是否重复的实现代码

这篇文章主要介绍了Ajax校验是否重复的实现代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多