Ajax入门(二)
接收服务器返回的消息
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入门(二)的更多相关文章
- Ajax入门（二）Ajax函数封装
如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...
- AJAX入门---DOM操作HTML
AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象.上次写的是怎样简单的使用XMLHttpRequest对象.今天写的是DOM(文档对象模型(Document Object M ...
- ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）
UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...
- ASP.NET AJAX入门系列（1）：概述
经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...
- ASP.NET AJAX入门系列
ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...
- 系列文章--ASP.NET之AJAX入门教程
ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...
- 对jquery的ajax进行二次封装
第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": " ...
- 【原创】NIO框架入门(二)：服务端基于MINA2的UDP双向通信Demo演示
前言 NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能.这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2.而Netty的主要版本是Netty3和Netty ...
- 掌握 Ajax，第 1 部分: Ajax 入门简介
转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...
随机推荐
- MyCat源码分析系列之——前后端验证
更多MyCat源码分析,请戳MyCat源码分析系列 MyCat前端验证 MyCat的前端验证指的是应用连接MyCat时进行的用户验证过程,如使用MySQL客户端时,$ mysql -uroot -pr ...
- 基于trie树的具有联想功能的文本编辑器
之前的软件设计与开发实践课程中,自己构思的大作业题目.做的具有核心功能,但是还欠缺边边角角的小功能和持久化数据结构,先放出来,有机会一点点改.github:https://github.com/chu ...
- BZOJ3095 : 二元组
\[\begin{eqnarray*}&&\sum_{i=0}^{n-1}\left(ki+b-a_i\right)^2\\&=&\sum_{i=0}^{n-1}\le ...
- JavaWeb_day01_HTTP_Servlet
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! JavaWeb_day01 HTTP协议 HTTP(H ...
- 记录一次bug解决过程：eclipse集成lombok插件
一 总结 eclipse集成插件lombok: 启动Spring Boot项目: sublime全局搜索关键字:ctrl + shift + F JDK8中的lambda表达式使用 二 BUG描述:集 ...
- python generator next send
*******oi********oi********oi 上面 * 符号 代表 一系列的代码, oi 代表 一个 [yield]关键字引出的 [数据交换,称之为 oi ] 在一个有[yield] ...
- /etc/sysconfig/下找不到iptables文件解决方法
时间:2014-12-19 01:17来源:csdn 作者:大智 举报 点击:5639次 本想做些防火墙策略.防火墙策略都是写在/etc/sysconfig/iptables文件里面的.可我发现我也没 ...
- python学习笔记- 多线程(1)
学习多线程首先先要理解线程和进程的关系. 进程 计算机的程序是储存在磁盘中的可执行的二进制文件,执行时把这些二进制文件加载到内存中,操作系统调用并交给处理器执行对应操作,进程是程序的一次执行过程,这是 ...
- Spring在web应用中获得Bean的方法
一:使用ApplicationContext获得Bean 首先新建一个类,该类必须实现ApplicationContextAware接口,改接口有一个方法,public void setApplica ...
- iOS 汉字的拼音
获取汉字的拼音 #import <Foundation/Foundation.h> @interface NSString (Utils) /** * 汉字的拼音 * * @return ...