<!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>
<title>js中的Ajax经典示例</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript">

function ajax() {

//先声明一个异步请求对象
var xhr = null;
if (window.ActiveXObject) {//如果是IE

xhr = new ActiveXObject("Microsoft.XMLHTTP");

} else if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest(); //实例化一个xhr
}
var data="a=23&b=34";
//如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
if (xhr != null) {
xhr.open("post", "a.php", true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.send(data);
xhr.onreadystatechange = doResult; //设置回调函数

}

//回调函数
//一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应

//设定函数doResult()
function doResult() {

if (xhr.readyState == 4) {//4代表执行完成

if (xhr.status == 200) {//200代表执行成功
//将xhr.responseText的值赋给ID为resText的元素
document.getElementById("resText").innerHTML = xhr.responseText;

}
}

}

}
</script>
</head>
<body>

<div id="resText"></div>
<form method=get action="">
<input type="button" value="小胡子" onclick="ajax();"/>
</form>
</body>
</html>

js ajax 经典案例的更多相关文章

  1. ajax经典案例--省市联动

    ajax的省市联动案例 如果我们的代码比较复杂,可以通过file_put_contents来输出信息到某个日志. 在一个元素中添加另一个元素使用的方法是:appendChild(). 函数append ...

  2. js中的经典案例--简易万年历

    js中的经典案例--简易万年历 html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  3. javascript的理解及经典案例

    js的简介: JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言. 你可以利用JavaScript轻易的做出亲切的欢迎讯息.漂亮的数字钟.有广告效 ...

  4. jQuery基础的工厂函数以及定时器的经典案例

    1. jQuery的基本信息:  1.1 定义: jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装, 1.2 作用: 许多使用JavaScript能实现的交 ...

  5. HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  6. jQuery中的ajax用法案例

    什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...

  7. ajax交互案例

    数据交互是前端很重要的一部分,静态页是基础,而交互才是网页的精髓.交互又分为人机交互和前后端数据交互,现阶段的互联网下,大部分的网站都要进行前后端数据交互,如何交互呢?交互的流程大概就是前端发送数据给 ...

  8. Django（十二）视图--利用jquery从后台发送ajax请求并处理、ajax登录案例

    一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...

  9. Linux运维之道（大量经典案例、问题分析，运维案头书，红帽推荐）

    Linux运维之道(大量经典案例.问题分析,运维案头书,红帽推荐) 丁明一 编   ISBN 978-7-121-21877-4 2014年1月出版 定价:69.00元 448页 16开 编辑推荐 1 ...

随机推荐

  1. PosgreSQL 9.0 High Performance中文版瑕疵

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL杂记页     回到顶级页面:PostgreSQL索引页 发表此文不是为了吐槽,而是为了防止更多的受害者出现啊,拿到书后 ...

  2. alibaba/fescar 阿里巴巴 开源 分布式事务中间件

    Fescar 是 阿里巴巴 开源的 分布式事务中间件,以 高效 并且对业务 0 侵入 的方式,解决 微服务 场景下面临的分布式事务问题. 示例:https://github.com/windwant/ ...

  3. CentOS7的安装与配置

    Linux系统以前接触的不多,主要是公司的网站部署在了一台安装了Ubuntu系统的机器上.是典型的LAMP架构的产物,因为偶而需要更新网站内容及需要定期备份.所以学习了一些Ubuntu & A ...

  4. 使用过滤器解决JSP页面的乱码问题

    乱码详情  总结:讨论了使用GET和POST方法,控制台和JSP页面显示的问题. 最终发现:在servlet或者过滤器中添加:request.setCharacterEncoding("ut ...

  5. 快速部署 Kubeadm 1.13 集群（ETCD）

    软件环境清单 kubeadm.x86_64  Version :1.13.1-0 kubelet.x86_64 Version : 1.13-1-0 kubectl.x86_64 Version : ...

  6. linux 其他知识目录

    博客目录总纲首页 为博客园添加目录的方法总结 linux 命令自动补全包 手动配置网卡 nginx日志统计 Linux 深入理解inode/block/superblock /proc/sys目录下各 ...

  7. 团队项目开题Scrum Meeting报告

    团队项目开题Scrum Meeting报告 在10月30号星期四的晚上我们团队找到了给我们代码的王翊学长,由学长给我们讲解了他编写IOS平台上北航MOOC系统的架构和思路, 因为我们团队没有苹果公司的 ...

  8. OO学习总结与体会

    前言 经过了对于面向对象程序设计的一个月的学习,我初尝了JAVA以及面向对象程序的魅力.经历了三次难度逐渐加大的课后编程作业,我对于工程化面向对象编程以及调试有了深刻的认识与颇多感想.我写下本篇文章以 ...

  9. 实验1：java开发环境的熟悉

    一．实验内容 1. 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试Java程序 3.实现四则运算并进行测试. 二．实验知识点 1. JVM.JRE.JDK的安装 ...

  10. 项目Beta冲刺（团队）第三天

    1.昨天的困难 记住密码打勾之后点击登录记住密码这四个字会变成省略号 点赞点击以后本应该呈现的爱心形状变成了方块 2.今天解决的进度 成员 进度 陈家权 私信模块探索ing,回复详情界面设计 赖晓连 ...