有一段时间不写关于AJAX的东西了,最近和同学参加个比赛,要做一个类似博客的东西,用到了AJAX的东西,在写东西之前为了再熟悉一下AJAX,自己做了个关于AJAX的小事例与大家分享一下。

  AJAX在js里可谓是一个牛气冲天的一个词,我刚学的时候有点望名生畏。对于初学者来说AJAX看似很难,图书馆里有些关于AJAX的教程比板砖都厚,看了就不想学。但当你真正长用的东西其实就那么写。在这就不扯那些书上扯的AJAX的历史考古的淡了,不然的话会碎的,你懂的。OK直入正题。

  在这呢我主要说一下AJAX的用法,原理就不多说了。

  1.你要用AJAX首先得会js吧,这个不用多说。

    首先你得NEW一个AJAX的对象,类必须得事例化才能使用,这个大家都知道对吧

    第一步:var oAjax = new XMLHttpRequest();

    但是为了兼容IE6这么蛋疼的浏览器一般这么写:

     if(window.XMLHttpRequest)

     {

        var oAjax = new XMLHttpRequest();

     }

     else

     {

      //IE

      var oAjax=new ActiveXObject("Microsoft.XMLHTTP");

     }

    到这为止对象就事例化好了。

  2.第二步咱得给服务器连接起来吧,这是必须的啊;

  用open();用法是这样的:open(传输方式,文件地址,同步还是异步(默认异步))

    oAjax.open('get','ajax.php?hehe='+sValue,true);

  3.得发送请求吧:

    oAjax.send();

  4.就是接收返回值了,就不废话了,直接看代码吧:

    oAjax.onreadystatechange=function()
    {

    //oAjax.readyState 记录步骤
      if(oAjax.readyState == 4)
      {
        if(oAjax.status == 200)
        {
          oDiv.innerHTML = oAjax.responseText;
        }
        else
        {
          alert("失败");
        }
      }
      else
      {
        alert(oAjax.readyState);//记录步骤
      }
    }

 到此为止AJAX就OK了:

下面是我实验的完整事例:

html代码如下:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function()
{
var oBtn1=document.getElementById('btn1');
var oInput=document.getElementById("hehe");
var oDiv=document.getElementById("div1");
oBtn1.onclick=function()
{
var sValue=oInput.value;
//alert(sValue);
//1.创建Ajax对象
//只兼容非IE6的浏览器
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
//IE6
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
//alert(oAjax);
//2.连接服务器
//open(传输方式,文件地址,同步还是异步(默认异步))
oAjax.open('get','ajax.php?hehe='+sValue,true); //3.发送请求
oAjax.send(); //4.接收返回
oAjax.onreadystatechange=function()
{ //oAjax.readyState 记录步骤
if(oAjax.readyState == 4)
{
if(oAjax.status == 200)
{
oDiv.innerHTML = oAjax.responseText;
}
else
{
alert("失败");
}
}
else
{
alert(oAjax.readyState);//记录步骤
}
}
//oAjax.send(); }
}
</script>
</head> <body>
<form method="" action="ajax.php">
呵呵:<input type="text" size=20 name="hehe" id="hehe">
<input type="button" value="提交" id="btn1">
</form>
<div id="div1">
</div>
</body>
</html>

后台PHP代码ajax.php

 <?php
$hehe=$_GET['hehe'];
echo $hehe;
?>

简单的AJAX用法事例到此为止,特为初学者而写,大牛可飘过……

PHP中AJAX的使用(完整实例【大牛可飘过】)的更多相关文章

  1. spring mvc 和ajax异步交互完整实例

    Spring MVC 异步交互demo: 1.jsp页面: <%@ page language="java" contentType="text/html; cha ...

  2. php中ajax使用实例

    php中ajax使用实例 一.总结 1.多复习:这两段代码都挺简单的,就是需要复习,要多看 2.ajax原理:ajax就是部分更新页面,其实还在的html页面监听到事件后,然后传给服务器进行操作,这里 ...

  3. thinkphp中ajax使用实例(thinkphp内置支持ajax)

    thinkphp中ajax使用实例(thinkphp内置支持ajax) 一.总结 1.thinkphp应该是内置支持ajax的,所以请求类型里面才会有是否是ajax // 是否为 Ajax 请求 if ...

  4. JavaWeb中点赞功能的实现及完整实例

    实现原理1.功能描述:一个用户对同一文章只能点赞一次,第二次就是取消赞2.建立一个点赞表great,字段有文章ID(aid),点赞用户ID(uid)3.当有用户进行点赞行为时,使用aid和uid搜索点 ...

  5. Ajax 中Post 与 Get的 实例

    Ajax中 Post 与 Get 实例   Ajax的POST实例,index.html <html> <head> <script type="text/ja ...

  6. javascript中ajax post实例详解

    一,原生态的XMLHttpRequest 代码如下 复制代码 <script language="javascript">         function savei ...

  7. 超详细的php用户注册页面填写信息完整实例(附源码)

    这篇文章主要介绍了一个超详细的php用户注册页面填写信息完整实例,内容包括邮箱自动匹配.密码强度验证以及防止表单重复等,小编特别喜欢这篇文章,推荐给大家. 注册页面是大多数网站必备的页面,所以很有必要 ...

  8. 前后端API交互数据加密——AES与RSA混合加密完整实例

    前言 前段时间看到一篇文章讲如何保证API调用时数据的安全性(传送门:https://blog.csdn.net/ityouknow/article/details/80603617),文中讲到利用R ...

  9. jQuery中ajax的4种常用请求方式

    jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...

随机推荐

  1. Cloud Engine:大杀器如何炼成

    郑昀(微博:http://weibo.com/yunzheng) 创建于2016/6/18 最后更新于2016/6/19 点击查看我的<如何从零搭建一个技术平台>,这是一个系列.转载时请注 ...

  2. MongoDB的简单操作(asp.net)

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using MongoDB.D ...

  3. Map的keySet和entrySet

    /*Map集合的两种 取出方式 * 1.keySet() * 2.entrySet() * */ //定义一个学生类 重写了equals.hashcode三个方法,实现了comparable接口并覆盖 ...

  4. hdu 2037简单贪心--活动安排问题

    活动安排问题就是要在所给的活动集合中选出最大的相容活动子集合,是可以用贪心算法有效求解的很好例子.该问题要求高效地安排一系列争用某一公共资源的活动.贪心算法提供了一个简单.漂亮的方法使得尽可能多的活动 ...

  5. javascript 执行上下文的理解

    首先,为什么某些函数以及变量在没有被声明以前就可以被使用,javascript引擎内部在执行代码以前到底做了些什么?这里,想信大家都会想到,变量声明提前这个概念: 但是,以下我要讲的是,声明提前的这个 ...

  6. 数据分析之Numpy基础:数组和适量计算

    Numpy(Numerical Python)是高性能科学计算和数据分析的基础包. 1.Numpy的ndarray:一种多维数组对象 对于每个数组而言,都有shape和dtype这两个属性来获取数组的 ...

  7. 初识Windows程序

    首先,我们创建第一个Windows程序,一共分为4个步骤: 1.打开Visual Studio开发工具 2.选择"文件"→"新建"→"项目" ...

  8. ENode 2.6 架构与设计简介以及全新案例分享

    前言 ENode是一个应用开发框架,为开发人员提供了一整套基于DDD+CQRS+ES+EDA架构风格的解决方案.ENode从发布1.0开始到现在的差不多两年时间,我几乎每周都在更新设计或实现代码.以至 ...

  9. MySQL 对比数据库表结构

    200 ? "200px" : this.width)!important;} --> 介绍 本章主要介绍怎样对比数据库的表结构的差异,这里主要介绍使用mysqldiff工具 ...

  10. C# MVC 项目下的路由配置-RouteConfig

    1. 设置备份全局路径下的路由 目的,我们在网站中域名后面输入参数,可以跳转到相应的controller,例如:www.innovsys.cn/dd.直后端直接跳转到controller,获取dd参数 ...