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. <Sicily>Funny Game

    一.题目描述 Two players, Singa and Suny, play, starting with two natural numbers. Singa, the first player ...

  2. Unified BeginFrame scheduling for Chrome

    Unified BeginFrame scheduling for Chrome http://goo.gl/D1Qxrr Status: http://crbug.com/401331 and ht ...

  3. Python学习笔记(2)--基本数据类型

    在介绍基本数据类型之前,先说一个系统方法type():返回对象的数据类型,可以帮助我们查看系统的类型定义 python不同的版本,类型名称稍有不同,这里使用的是3.5.2版本 一.基本数据类型: 1. ...

  4. unity调用Android的两种方式：其二，调用aar包

    上一篇我们讲了unity如何调用jar包 http://www.cnblogs.com/Jason-c/p/6743224.html, 现在我们介绍一下怎么生成aar包和unity怎么调用aar 一. ...

  5. 【Codeforces Round #465 (Div. 2) C】Fifa and Fafa

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 这个x2,y2和圆心(x1,y1)相连.形成的直线和圆交于点(x3,y3) 则(x2,y2)和(x3,y3)的中点就是所求圆的圆心. ...

  6. 【Android 进阶】图片载入框架之Glide

    简单介绍 在泰国举行的谷歌开发人员论坛上,谷歌为我们介绍了一个名叫 Glide 的图片载入库,作者是 bumptech.这个库被广泛的运用在 google 的开源项目中,包含 2014 年 googl ...

  7. DNS A记录和CNAME记录

    参考文章:http://blog.xieyc.com/differences-between-a-record-and-cname-record/ A (Address) 记录是用来指定主机名(或域名 ...

  8. quartz-misfire 错失、补偿执行

    调度(scheduleJob)或恢复调度(resumeTrigger,resumeJob)后不同的misfire对应的处理规则 misfire产生的条件是:到了该触发执行时上一个执行还未完成,且线程池 ...

  9. 深入Vue的响应式原理

    工作的过程中,有时候会有数据改变但是视图没有更新的问题,作者在vue的官方文档中有提到这个问题,我来总结一下 1.vue的每个组件实例都有对象的watcher实例对象,它会在组件渲染的过程中把属性记录 ...

  10. Gym - 100625E Encoded Coordinates 矩阵快速幂

    题意: 一直TLE我也是醉了,,不爽! #include <iostream> #include <cstdio> #include <fstream> #incl ...