分享Ajax创建简单实例代码

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

赞 (0)

相关推荐

  • 原生ajax调用数据实例讲解

    由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下: 一.兼容浏览器部分 function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(

  • 关于ajax的使用方法_例题、ajax的数据处理

    关于ajax的使用方法_例题、ajax的数据处理

    需要注意的是,调用的封装的数据库,和jQuery的保存地址 一.注册 (1)写文本框来进行用户名的验证 <input type="text" id="uid" /> <span id="tishi"></span> //这个使用来显示提示信息的 (2)用jQuery语句写:用户名存在不能使用,用户名可以使用 $("#uid").blur(function(){ //取用户名 var uid

  • 分享Ajax创建简单实例代码

    XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面.几乎所有的浏览器都支持XMLHttpRequest对象,它是Ajax应用的核心技术. js代码如下: <html> <head> <title> New Document </title> <meta charset="utf

  • Ajax 传递JSON实例代码

    Ajax 传递JSON实例代码

    前面的话 虽然ajax全称是asynchronous javascript and XML.但目前使用ajax技术时,传递JSON已经成为事实上的标准.因为相较于XML而言,JSON简单且方便.本文将上一篇中的实例进行改写,以JSON的方式来进行数据传递 前端页面 <!-- 前端页面 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

  • Java web的读取Excel简单实例代码

    Java web的读取Excel简单实例代码

    目录结构: Data.xls数据: 后台页面: public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //System.out.println(this.getServletContext().getRealPath ("/")); try{ Workbook wb = Workbook.getWorkbook(

  • Ajax验证用户名实例代码

    用Ajax验证用户名代码如下所示: 接口: get guestbook/index.php m : index a : verifyUserName username : 要验证的用户名 返回 { code : 返回的信息代码 0 = 没有错误,1 = 有错误 message : 返回的信息 具体返回信息 } js oUsername1.onblur = function() { //失去焦点的时候,把当前用户名给后端去验证 ajax('get', 'guestbook/index.php',

  • 使用jquery datatable和bootsrap创建表格实例代码

    使用jquery datatable和bootsrap创建表格实例代码

    使用jquery-datatable插件 bootstrap前端框架 json 一.创建demo.html 代码块 代码块语法遵循标准markdown代码,例如: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" pref

  • 仿百度换肤功能的简单实例代码

    仿百度换肤功能的简单实例代码

    效果:(换肤出来一个div,选择你想要的图片,作为网页背景,保存) 要点:cookie保存状态 html代码: <body> <div id="header"> <div id="header_con"> <div class="dbg"><a href="javascript:;" onclick="showImgBox()">换肤</a&

  • django ajax json的实例代码

    1. views.py 定义views视图函数,将数据存入字典.并用压缩为json格式,dumps,并return. import json def get_comments(request, article_id): article_obj = models.Article.objects.get(id=article_id) article_comments = article_obj.comment_set.select_related() comment_dict = {} for i

  • matplotlib简介,安装和简单实例代码

    matplotlib简介,安装和简单实例代码

    官网介绍: Matplotlib is a Python 2D plotting library which produces publication quality figures in a variety of hardcopy formats and interactive environments across platforms. Matplotlib can be used in Python scripts, the Python and IPython shell, the ju

  • Vue验证码60秒倒计时功能简单实例代码

    template <template> <div class='login'> <div class="loginHeader"> <input type="tel" class="loginBtn border-bottom" placeholder="请输入手机号" /> <input type="tel" class="codeBtn&q

  • 动态创建类实例代码

    例如: import mymodule myobject = mymodule.myclass() 或者 from mymodule import myclass myobject = myclass() 如果要在程序中动态地创建类实例,也一样要分两步走,例如: m = __import__('mymodule') c = getattr(m, 'myclass') myobject = c() 但是要注意:如果myclass并不在mymodule的自动导出列表中(__all__),则必须显式地

随机推荐