接收服务器返回的消息

1,定义触发Ajax的js效果

2,创建Ajax方法

如果返回的数据是XML,则需使用aj.responseXML

3,接收服务器返回的消息,并显示在网页上

　错误案例:直接接收服务器返回的消息,是接收不到的.

　

　因为有可能客户端还在发送请求,而另一段代码已经执行接收消息.当然,接收的消息就为空.

　所以我们应该有一个判别机制,判断XMLHttpRequest 的状态

　　aj.onreadystatechange = function(){
　　　　if(aj.readyState == 4){
　　　　document.getElementById("dl1").innerHTML = aj.responseText;
　　　　}
　　}

　其中onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

　readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。(一般只能接收到从1到4的信息)

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

代码部分:

 <!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" xml:lang="en">

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

     <title>接收服务器信息</title>

 </head>

 <body>

     <h2>这是返回的请求</h2>

     <input type="button" value="触发" onclick="f1()">

     <div id="dl1"></div>

 </body>

 <script type="text/javascript">

     function f1(){

         //创建ajax对象

         var aj = new XMLHttpRequest();

         //创建新的http请求

         aj.open('get','./03.php')

         //发送请求

         aj.send(null);

         aj.onreadystatechange = function(){

             if(aj.readyState == 4){

                 document.getElementById("dl1").innerHTML = aj.responseText;

             }

         }

     }

 </script>

 </html>
 <?php 

   echo "<div style='color:green'>Today is monday</div>";

  ?>

Ajax入门(二)的更多相关文章

  1. Ajax入门（二）Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  2. AJAX入门---DOM操作HTML

    AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象.上次写的是怎样简单的使用XMLHttpRequest对象.今天写的是DOM(文档对象模型(Document Object M ...

  3. ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）

    UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...

  4. ASP.NET AJAX入门系列（1）：概述

    经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...

  5. ASP.NET AJAX入门系列

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  6. 系列文章--ASP.NET之AJAX入门教程

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  7. 对jquery的ajax进行二次封装

    第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": " ...

  8. 【原创】NIO框架入门(二)：服务端基于MINA2的UDP双向通信Demo演示

    前言 NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能.这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2.而Netty的主要版本是Netty3和Netty ...

  9. 掌握 Ajax，第 1 部分: Ajax 入门简介

    转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...

随机推荐

  1. 一款批量修改AE模板的工具

    一.需求分析 对于视频后期剪辑及相关从业人员来说,AE(After Effects)模板效果是一个不错的开始点.在模板效果的基础上,可以很快的做出各种炫酷的后期效果.但是在网上下载的模板工程中,往往包 ...

  2. 实例讲解react+react-router+redux

    前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...

  3. 修复 Visual Studio Error “No exports were found that match the constraint”

    清空Visual Studio 文件缓存目录 Just delete or rename this folder: %AppData%\..\Local\Microsoft\VisualStudio\ ...

  4. 三个linux系统共存，修改默认启动

     一个mint,一个ubuntu,想要默认启动ubuntu,那么咱们这么来:修改启动顺序,我们需要修改Ubuntu的GRUB配置文件.使用常见的编辑程序如"gedit"就可以很方便 ...

  5. quartz CronExpression表达式

    一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素.按顺序依次为1.秒(0~59)2.分钟(0~59)3.小时(0~23)4.天(月)(0~31,但是你需要考虑你月的天数)5.月(0~11 ...

  6. session 存入数据库 php

     session 机制 1.php中session的生成机制 session是保存在服务器的,当我们在代码中调用session_start();时,PHP会同时往SESSION的存放目录(默认为/tm ...

  7. 用java单例模式实现面板切换

    1.首先介绍一下什么是单例模式: java单例模式是一种常见的设计模式,那么我们先看看懒汉模式: public class Singleton_ { //设为私有方法,防止被外部类引用或实例 priv ...

  8. Oracle Sales Cloud：报告和分析（BIEE）小细节2——利用变量和过滤器传参（例如，根据提示展示不同部门的数据）

    在上一篇随笔中,我们建立了部门和子部门的双提示,并将部门和子部门做了关联.那么,本篇随笔我们重点介绍利用建好的双提示进行传参. 在操作之前,我们来看一个报告和分析的具体需求: [1] 两个有关联的提示 ...

  9. [转]ASP.NET应用程序生命周期趣谈(一)

    这几天一直在看ASP.NET应用程序生命周期,真是太难了,我理解起来费了劲了,但偏偏它又是那么重要,所以我希望能给大家带来一篇容易理解又好用的文章来帮助学习ASP.NET应用程序生命周期.这篇就是了. ...

  10. Git从码云Clone代码到本地

    Git从码云或者Github 克隆代码到本地 1.下载安装Git,傻瓜式下一步下一步即可... 2.配置Git: 2.1.选择你要clone到本地的路径:右键--->$ Git Bash Her ...