前言

本篇AJAX基础教程，只讲干货，拒绝废话。

全文通过两个实例来讲解AJAX的基本用法，第1个实例是使用AJAX技术从服务器获取纯文本(HTML)数据，

第2个实例是获取从服务器PHP文件的数据。

注意：必须在服务器环境下在才能运行AJAX程序，本文使用的WAMP

准备知识可不看，有一点基础直接跳到实例部分也能理解，代码中都有详细注释。

准备知识

掌握AJAX技术的核心是理解XMLHttpRequest这个对象，它是一个JavaScript对象。下面简单介绍下它

的属性和方法。

属性

readyState

表示请求当前的状态，共有5个值，含义分别如下：

0 = uninitialized

1 = loading

2 = loaded

3 = interactive

4 = completed

这里我们只关注第4个状态，代表向服务器发送的请求已经完成（不代表成功）。

onreadystatechange

这是一个事件属性，就像onclick单击事件一样，readyState的值一旦变化，就会触发这个事件。

status

表示HTTP请求的状态码，值为200时表示请求成功。

responseText

以字符串的形式返回从服务器请求的数据。

方法

open('GET/POST', 'URL')

GET与POST 2选1，URL表示要从服务器请求文件的地址。

send(content)

向服务器发送数据，请求方法为POST时会用。

实例1 从服务获取HTML文件的数据

需要2个文件放在WAMP的WWW目录下通过，浏览器localhost运行即可。

文件1： apples.html

文件2： k1.html

<!-- filename: apples.html -->

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title></title>

</head>

<body>

<p style="color: red">hello world</p>

<p>你看到的信息来自外部文件apples.html</p>

</body>

</html>


<!-- filename: k1.html -->

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>Ajax示例</title>

</head>

<body>

<div>

    <button>Apples</button>

</div>

<div id="target">

    Press a button

</div>

<script>

(function() {

    var buttons = document.getElementsByTagName("button")[0];

    buttons.addEventListener("click", handleButtonPress);

    function handleButtonPress() {

        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = handleResponse; // onreadystatechange有5种状态

        xhr.open("GET", "apples.html"); // 从服务器获取信息

        xhr.send(); // 没有向服务器发送信息，所以这里为空

    }

    function handleResponse(e) {

        // console.log(e.target);

        // console.log("he_" + Math.random());

        /*

            xhr刚创建的时候，onreadystatechange=1

            使用open方法后1，请求结束返回4

            这里一共打印4次信息

        */

        // if (xhr.readyState == XMLHttpRequest.DONE &&

        // xhr.status == 200) {

        //     document.getElementById("target").innerHTML

        //     = xhr.responseText;

        // }

        if (e.target.readyState == XMLHttpRequest.DONE &&

        e.target.status == 200) {

            document.getElementById("target").innerHTML

            = e.target.responseText;

        }

        /*

			XMLHttpRequest.DONE 相当于 xhr.readyState == 4

            由于xhr变量是一个局部变量，所以只能使用e.target才能访问到xhr对象。

            若果直接使用xht对象，就会出现未找到xhr对象的错误。

			如果不想这么麻烦，直接把xhr对象定义到函数外边也是可以的。

        */

    }

})()

</script>

</body>

</html>

效果

实例2 从服务器获取PHP文件的数据

使用Ajax技术获取PHP文件的数据，与获取HTML等纯文本格式的文件不同。

服务器上PHP格式的文件不能当成纯文本文件来获取，当我们使用

open(method, php_filename)时，服务器会先执行这个PHP文件，只有echo

出来的数据，才能被JavaScirpt获取到，并返回给xhr.responseText

实例2 ajax+php 获取服务器时间小程序，需要两个文件k1.php和tell_time.php

需要在配置好的PHP环境下运行。代码如下：

<!-- filename: k1.html -->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Ajax Demonstration</title>

<style>

body {

	background-color:#ccc;

	text-align:center;

}

.displaybox {

	width:150px;

	height: 40px;

	margin: 0 auto;

	margin-top: 20px;

	background-color:#ffffff;

	border:2px solid #000000;

	padding:10px;

	font-size: 24px;

	font-family: "微软雅黑";

}

</style>

</head>

<body>

<h1>Ajax Demonstration</h1>

<h2>无刷新获取服务器时间</h2>

<form>

	<input type="button" value="Get Server Time" id="btn">

</form>

<div id="showtime" class="displaybox"></div>

<script>

(function(){

	var btn = document.getElementById('btn');

	btn.addEventListener('click', getServerTime);

	var xhr = new XMLHttpRequest();

	function getServerTime() {

		var myurl = 'tell_time.php';

		myRand = parseInt(Math.random() * 99999999);

		// 构造随机数，防止缓存问题

		var modurl = myurl + "?rand=" + myRand;

		xhr.open("GET", myurl);

		xhr.onreadystatechange = xhrResponse;

		xhr.send();

	}

	function xhrResponse() {

		if (xhr.readyState == 4 && xhr.status == 200) {

			var timeValue = xhr.responseText;

			document.getElementById('showtime').innerHTML = timeValue;;

		}

	}

})()

</script>

</body>

</html>


<?php

// filename: tell_time.php

    date_default_timezone_set('Asia/shanghai');

    // 把默认时区设置成中国/上海，也就是设置成北京时间。

    echo date('H:i:s');

    // 直接打印当前时间。

?>

效果

AJAX基础_AJAX获取PHP数据的更多相关文章

  1. 使用JSONP，jQuery的ajax跨域获取json数据

    网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

  2. Ajax从服务器端获取数据

    写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...

  3. Ajax从服务器端获取数据---原生态Ajax

    写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...

  4. Struts1.x下使用jquery的Ajax获取后台数据

        jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法.     前台页面: ...

  5. ajax获取json数据及实现跨域请求

    最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...

  6. Ajax读取XML和JSON数据

    Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或者JSON. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用JSON语句话,服务端 ...

  7. 使用Typescript重构axios(六)——实现基础功能：获取响应数据

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  8. ajax请求获取的数据无法赋值给全局变量问题总结

    一.总结: 1.问题描述: 今天做项目遇到在用表单显示详细信息的过程中ajax请求获取的数据无法赋值给全局变量的情况,从列表页面进入详情页,在详情页面被渲染了之后就会调用js文件里的接口向服务器请求数 ...

  9. 用ajax获取后台数据，返回json数据，怎么在前台使用？

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

随机推荐

  1. [0] TFS 分支/标签

    比较常见的版本控制分支策略有三种:不稳定主干策略.稳定主干策略.敏捷发布策略. 下面是对这几种策略的摘录: 不稳定主干策略 使用用主干作为新功能开发主线,分支用作发布. 被广泛的应用于开源项目. 比较 ...

  2. [0] (VDP)垂直开发模式

    垂直管理 网格化管理 属地管理 横向管理 面向接口编程 面向对象编程(OOP) 设计模式(GOF.MVC.SOA) 依赖注入(DI/IoC) 面向方面编程(AOP) 领域驱动开发(DDD) 测试驱动开 ...

  3. MiniProfiler使用点滴记录-2017年6月23日11:08:23

    1.看似针对同样一段查询表ef达式,重复执行却没有被记录下来.其实这是正常情况,因为ef并没有重复去执行 相同sql查询. 2.MiniProfiler结合MVC过滤器进行 拦截记录Sql,示例代码: ...

  4. qt中setStyleSheet导致的内存泄漏

    原始日期: 2017-01-05 19:31 现象:程序运行至某一个界面下,内存出现缓慢持续的占用内存增长   原因:经过排查,确定是在事件派发的槽函数中频繁重复调用setStyleSheet导致的 ...

  5. 使用阿里百川HotFix

    前言:首先要弄懂HotFix是干嘛的,不然就别向下看了.这里仅仅根据官方文档的代码书写,亲测可用,不做理论指导. Android Studio集成: 添加maven仓库地址: repositories ...

  6. angularJS 源码阅读之一:toDebugString

    简介: 这个函数返回调试字符串: number,boolean,string,null,undefined,都会转为字符串. function 中括号前面有空格的,会去除函数体,没空格的,会输出函数的 ...

  7. mybatis学习笔记(四）-- 为实体类定义别名两种方法（基于xml映射）

    下面示例在mybatis学习笔记(二)-- 使用mybatisUtil工具类体验基于xml和注解实现 Demo的基础上进行优化 以新增一个用户为例子,原UserMapper.xml配置如下: < ...

  8. Mac之OS系统下搭建JavaEE环境 <二> 之Tomcat 的安装配置

    二.Tomcat的安装与配置 1.下载Tomcat 找到Tomcat的官网 百度搜索Tomcat 点击下载即可 下载网址:http://tomcat.apache.org/download-80.cg ...

  9. rang enumerate

    叨逼叨: 小知识点 rang enumerate # 1. 请输出1-10# 2.7: 立即生成所有数字# range(1,11) # 生成 1,23,,4,56.10# 3.x: 不会立即生成,只有 ...

  10. springmvc(三) 参数绑定、

    前面两章就介绍了什么是springmvc,springmvc的框架原理,并且会简单的使用springmvc以及ssm的整合,从这一章节来看,就开始讲解springmvc的各种功能实现,慢慢消化 --W ...