Ajax的关键在于XMLHttpRequest对象，如下基本用法：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

	</head>

	<body>

		<div>

			<button>Apples</button>

			<button>Cherries</button>

			<button>Bananas</button>

		</div>

		<div id="target">

			press a button

		</div>

		<script type="text/javascript">

			var buttons=document.getElementsByTagName("button")

			for(var i=0;i<buttons.length;i++){

				buttons[i].onclick=handleButtonPress;

			}

			function handleButtonPress(e){

				var httpRequest=new XMLHttpRequest();

				httpRequest.onreadystatechange=handleResponse;

				httpRequest.open("GET",e.target.innehttpRequest=new XMLHttpRequest();rHTML+".html")

				httpRequest.send()

			}

			function handleResponse(e){

				if(e.target.readyState==XMLHttpRequest.DONE&&e.target.status==200){

					document.getElementById("target").innerHTML=e.target.responseText;

				}

			}

		</script>

	</body>

</html>

    第一步是创建一个新的XMLHttpRequest对象。与之前在DOM中见过的大多数对象不同，你并非通过浏览器定义的某个全局变量来访问这类对象，而是使用关键词new如：var httpRequest=new XMLHttpRequest();

    下一步是给readystatechange事件设置一个事件处理器。这个事件会在请求过程中被多次触发，向你提供事情的进展情况。将onreadystatechange属性的值设为handleResponse;httpRequest.onreadystatechange=handleResponse;可以告诉XMLHttpRequest对象你想要做什么，使用open方法来指定HTTP方法（在这里是GET）和需要请求的URL:httpRequest.open("GET",e.target.innerHTML+".html")

    注：上述展示的是open方法最简单的形式。你还可以给浏览器提供向服务器发送请求使用的认证消息，就如：httpRequest.open("GET",e.target.innerHTML+''.html",true,"adam","secret")最后两个参数是应当发送给服务器的用户和密码。剩下的那个参数指定了该请求是否应当异步执行。它应该始终设置为true.

    注：GET请求适用于安全的交互行为，就是那些你可以反复发起而不会带来副作用的请求。POS请求用于不安全的交互行为，意思是每一个请求都会导致服务器端发生某种变化，而重复的请求可能会带来问题。虽然还有些别的HTTP方法，但GET和POST是使用最为广泛的。

    函数的最后一步是调用send()方法，如：httpRequest.send()；上述例子里没有向服务器发送任何数据，所以send方法无参数可用。

ajax起步 （二）的更多相关文章

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

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

  2. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  3. Ajax实例二：取得新内容

    Ajax实例二:取得新内容 通过点击pre和next按钮,从服务器取得最新内容. HTML代码 <div id="slide">图片显示区</div> &l ...

  4. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

  5. 对jquery的ajax进行二次封装以及ajax缓存代理组件：AjaxCache

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...

  6. Ajax 技术二

    一.Ajax与XML案例 例:使用Ajax+XML读取数据表中的分类信息并放入下拉选框中 demo01.php 运行结果: 二.Ajax中的JSON 在Javascript中,可以通过两种方式(XML ...

  7. 从零开始学 Web 之 Ajax（二）PHP基础语法

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. Java基础——Ajax（二）

    一.jQuery 实现 ajax $(function(){ $("#userName").blur(function(){ // 发ajax请求 用的函数原型: $.get(ur ...

  9. MVC3学习：利用jquery+ajax生成二维码（支持中文)

    二维码越来越热火了,做电子商务网站,不做二维码,你就OUT了. 一.下载DLL文件(ThoughtWorks.QRCode.dll),并在项目中引用.点此下载 如果你还不知道什么是QRCode二维码, ...

随机推荐

  1. RSA不对称加密

    package sinRsa; import java.io.ByteArrayOutputStream; import java.io.FileInputStream; import java.io ...

  2. 给 “rm” 命令添加个“垃圾桶”

    作者: 2daygeek 译者: LCTT amwps290 人类犯错误是因为我们不是一个可编程设备,所以,在使用 rm 命令时要额外注意,不要在任何时候使用 rm -rf *.当你使用 rm 命令时 ...

  3. 关于zxing生成二维码，在微信长按识别不了问题

    在做校园学生到校情况签到系统时,我采用了zxing作为二维码生成工具.在测试的时候使用微信打开连接发现.我长按我的二维码之后,总是不会出现以下这种识别二维码的选项. 这就大大的降低了用户的体验,只能大 ...

  4. LinkedList源码学习

    链表数据结构 当前节点会保存上一个.下一个节点. 参见 LinkedList的Node类 实现: 1. 内部链表的方式. 1.1 添加元素.追加的方式,创建一个新的节点[Node],用最后一个节点关联 ...

  5. 开源映射平台Mapzen加入了Linux基金会的项目

    2019年1月29日,Linux基金会宣布,开源映射平台Mapzen现在是Linux基金会项目的一部分. Mapzen专注于地图显示的核心组件,如搜索和导航.它为开发人员提供了易于访问的开放软件和数据 ...

  6. 紫书 例题 10-5 UVa 12716 （枚举方式）

    设gcd(a, b) = a xor b = c 那么我们可以证明c＝a-b 那么同时c又是a的因子(c是a与b的最大公因数) 所以我们可以枚举c,然后枚举c的倍数,也就是a 有了a和c可以算出b为a ...

  7. 第三讲 $\mathbb{R}^4$上平凡主丛的联络、曲率与Yang-Mills泛函

    一. $\mathbb{R}^4$或$\mathbb{R}^n$上平凡主丛的联络与曲率$\newcommand{\R}{\mathbb{R}}$ 回忆切丛$T\R^n\cong \R^n\times\ ...

  8. 存储过程和transaction

    https://stackoverflow.com/questions/11531352/how-to-rollback-a-transaction-in-a-stored-procedure BEG ...

  9. 12.ng-switch

    转自:https://www.cnblogs.com/best/tag/Angular/ 根据作用域表达式动态切换把那个DOM元素包含在已经编译的模板中. 示例代码: <!DOCTYPE htm ...

  10. jquery基本Dom操作

    1 html()获取所有的html内容 2 html(value) 设置html内容,有html自动解析 3 text() 获取文本内容 4 text(value) 设置文本内容,有html自动转义 ...